前端优化系列 - 首次显示的性能影响分析

对于前端开发者来说，页面打开的速度是影响用户体验的一个重要因素。据统计，用户打开一个页面，如果超过１秒钟页面没有任何内容显示的话，用户将会离开这个页面。而数据表明，即使在资源有缓存的情况下，页面首次访问的耗时也是非首次访问的两倍。为什么首次访问这么耗时呢，时间去哪里了？本文详细分析页面首次访问耗时的原因。本文主要面向前端开发者，因此，呈现页面的载体应用则不在本文范围之内。本文希望能对前端开发者优化页面首次显示速度带来帮助。

ServiceWorker是PWA的关键技术，它具有非常强大的能力，Fetch，Cache，Push和Add to home screen，能让前端开发者非常灵活的操控页面缓存。同时，它也是有比较大的初始化成本的，比如，ServiceWorker线程启动平均要200ms，而每次访问页面，一般ServiceWorker线程至少都需要启动一次。当然，我们的内核也在不断优化这块的耗时，最终预计能优化到100ms以内。
后面我们会陆续推出PWA系列的相关文章，敬请读者关注。

在网络初始化方面，一般内核网络库的初始化并不太耗时，耗时的是DNS和Connection。用户首次访问，一般都需要去进行DNS解析和创建连接，而在后续访问时，一般都可以用上缓存或者预连接。DNS解析一般耗时在200ms以上，创建HTTP连接一般耗时也在200ms以上，而创建HTTPS连接则需要600ms以上。也就是说，用户首次访问时，如果不能提前创建连接，从性能的角度来说，是非常危险的。
这个方面我们的建议是，使用HTTPDNS提前解析和缓存DNS，提前创建连接（比如，用户点击时）。客户端也有这方面的优化，比如，在加载主文档时，提前发起子资源的预连接，但在一些托管网络库的应用来说，这些策略可能不会生效。

页面服务器和资源服务器，是否也需要初始化呢？一般也是需要的，比如页面访问过之后，页面服务器也会有一些缓存，用户再次访问时可以直接使用缓存而无需走完整的流程。但这些缓存应该是大部分用户都能共享的，所以实际影响不好评估。资源服务器也一样，例如图床，很多是按用户手机屏幕和网络类型来返回不同图片的，用户访问过就会放到CDN缓存中。
暂时未有数据表明服务器初始化对页面整体性能产生明显影响。

这里提到的JS初始化，并不是JS引擎相关的初始化。JS初始化是指JS文件缓存到httpcache和解析编译生成V8 Cache文件。很多数据表明，JS解析编译占JS耗时的35%以上，一些有巨型JS的页面甚至可以达到80%。在U4内核中，一般JS执行一次之后，就可以生成V8 Cache，虽然V8 Cache可以重复使用，但也存在被自动清理的情况，所以提前执行一次还是有收益的。
一些业务中，提前执行一次JS，在用户真实访问时，耗时从500ms降到200ms。特别是在一些超级App中，基础JS基本都一样，提前执行一次可能会带来非常明显的收益。

上面介绍了一些常见的初始化对页面性能的影响，希望读者能了解到一些隐藏的信息，能开阔Web优化的思路。当然，这些点不一定会存在很大的性能问题，比如，一些业务模块处理的非常好的App，在业务初始化方面不一定会有性能问题，需要根据自己的实际场景，具体问题具体分析。