java探针影响页面加载,网页加载性能优化方法研究

网页的加载性能是影响用户体验的最重要因素，页面加载时间过长，极有可能会令用户直接关闭网页，即使网页本身的流程和UI等方面优化得再出色，也不会有任何价值。本文将以优化网页加载性能的角度出发，介绍网页渲染的过程以及各类资源阻塞网页渲染的情况，并给出优化的方向。

(本文以Chrome为主浏览器进行讨论，其他浏览器可能会存在细微不同的情况，不在本文讨论的范围)

网页的渲染过程

五个步骤

想要知道如何优化网页加载性能，首先得清楚浏览器加载一个网页经过了哪些步骤，才能明白应该从哪些方面着手优化。一般来说，浏览器从服务器端获取到HTML文件后就开始了加载过程，加载网页的过程包括如下五个步骤：

HTML代码转化成DOM，并并行地获取外部资源(包括HTML中出现的JS、CSS、图片文件)

CSS文件下载完成，CSS代码转化成CSSOM(CSS Object Model)

结合DOM和CSSOM，生成一棵渲染树(包含每个节点的视觉信息)

生成布局(Layout)：将所有渲染树的所有节点进行平面合成，该步骤可以计算出元素在网页中的位置

绘制(Paint)：将网页内容绘制在屏幕上

在加载过程中，前三步的耗时主要在于外部资源获取上，只有CSS资源下载完成才能完成第二第三步，生成渲染树；而后两步Layout和Paint较为耗时，且在网页渲染过程中会执行多次，其中首次Paint的耗时可以视为页面从空白到有内容的时间，减小这部分用时可以给用户以网页加载快的错觉。

浏览器实践

浏览器具备一些工具可以记录页面渲染的过程，进而帮助我们分析哪些方面的性能还有提升的空间。

以最简单的HTML结构来熟悉一下Chrome中的Performance工具(之前的名字是timeline)。

首先我们打开控制台，切换到Performance工具，在页面加载前点击左上角的圆点，开始录制，页面加载完再次点击，停止录制，等数据分析完成切换到“Event Log”就可以开始查看渲染过程了。

我们先以最简单的结构进行分析，如加载下方index.html文件：

测试浏览器渲染

koa by html file

分析这个网页加载情况，如下截图所示：

(上图为渲染五个步骤中的第一步，接收html文件解析并并行请求外部资源)

(上图为2, 3和4, 5步，接收到CSS文件后构建渲染树，进行Layout和首次的Paint)

(上图为Load事件之后的Paint)

接着我们修改一下node层代码，令CSS文件返回延迟5s，会得到如下“Event Log”

(css文件延迟5s后，会发现首次Layout和Paint都延迟到5s之后)

为了研究JS文件对首次Paint的影响，我们令JS文件返回延迟5s，CSS和图片都即时返回，会得到如下“Event Log”

从上面的分析可以看出：

外部资源是在开头并行获取的，并非HTML解析到引用行再发请求的；

CSS文件加载的速度是影响首次Paint时间的因素，当CSS文件下载完成后才能进行CSSOM和渲染树的构建，然后才是Layout和Paint过程；

JS文件加载的速度不影响首次Paint时间，即使JS文件本身有修改DOM节点的操作，也只是在JS文件加载完成后再进行一次Layout和Paint；

各类资源阻塞网页加载的情况

阻塞网页加载的情况，可以分为两种：一种是阻塞HTML解析，即阻塞Event Log中的parse HTML步骤，令HTML结构停止解析；另一种是阻塞渲染，即阻塞Event Log中的Paint步骤，令已经解析好的HTML结构也无法显示到浏览器上。

CSS资源

CSS样式无法影响DOM结构，但能改变页面中元素呈现的模样，所以CSS资源可以阻塞渲染，但不会阻塞HTML解析。

为了研究CSS是否会阻塞渲染和解析，我们依然使用之前的index.html文件，只将style.css延迟5s返回，得到如下实验结果：

(解析完HTML之后，就并行发JS、CSS和图片请求，JS和图片先接收完成，但没有触发首次Paint渲染，而是延迟到css文件接收完成，CSSOM和渲染树构建完成才触发了首次Paint，因此CSS资源会阻塞渲染)

相同情况下，页面的展示和HTML结构如何呢？请看下方动图：

(在CSS文件接收完成之前，虽然HTML结构已经解析完成，即Elements中HTML结构已经被解析出来，但页面是一片空白，说明CSS资源不会阻塞解析，但会阻塞渲染)

JS资源

JS脚本会影响DOM结构，也能改变页面中元素呈现的模样，所以JS资源既能阻塞渲染又能阻塞HTML解析。

为了研究JS是否会阻塞渲染和解析，我们依然使用index.html文件，只将script.js延迟5s返回，得到如下实验结果：

(并行发送请求，CSS和图片资源先加载完，触发了首次Paint渲染，此时JS文件还没开始下载，所以JS文件并不会影响页面的首次渲染)

(延迟了5s后，开始接收JS文件，完成后，再次Paint渲染)

相同情况下，页面的展示和HTML结构，请看下方动图：

(JS开始下载之前，CSS资源已经下载完成，页面也解析并渲染出一部分内容，这部分是JS文件由script标签引入之前的内容，而script标签之后的图片则需等到JS文件加载完成后才进行解析并渲染出来，因此JS资源会阻塞之后的HTML结构解析和渲染)

图片资源

图片资源无法对其他DOM节点进行操作，所以不会阻塞渲染和HTML解析。

为了研究图片资源是否会阻塞渲染和解析，我们依然使用index.html文件，只将png文件延迟5s返回，得到如下实验结果：

(并行发送请求，CSS和JS文件都加载后，完成HTML解析和首次Paint渲染)

(当图片文件加载完成后，再次渲染)

相同情况下，页面的展示和HTML结构，请看下方动图：

(图片加载之前，页面的HTML结构已经解析完成，并且画面也出现在屏幕上，说明图片资源不会阻塞HTML的解析和画面渲染)

针对首屏的优化建议

从上面的实验可以看出，三种资源中只有CSS文件会影响首次Paint的时间。无论是延迟JS还是图片，在CSS文件加载完成后，都能先渲染出已经解析好的HTML内容。由于在首次Paint之前，页面是一片空白，所以首次Paint的时间也就相当于首屏时间。

针对首次Paint时间的优化，我们可以从以下角度进行考虑：

CSS会影响首次Paint的时间，应该尽快加载，因此将其放在head标签处以保障能在解析完HTML后发出请求；

JS不会影响首屏的时间，但由于JS会阻塞之后的页面内容的解析与渲染，要避免JS在首屏位置出现，一般将它们放在body的最后，另外，JS会影响整体页面加载的性能，可以使用defer和async转成非阻塞模式(见参考文献[6])；

图片不影响首屏时间，但会影响Load事件的时机(没有找到合适的参考文献，待我另起一篇文章补充)；

参考文献