web页面渲染过程

资源加载过程.png

1. 重定向 redirect

相关指标

• 重定向次数：performance.navigation.redirectCount
• 重定向耗时：redirectEnd - redirectStart

2. DNS Lookup

浏览器从DNS服务器中进行域名查询。浏览器解析域名拿到对应的 IP地址后，才能和服务器进行通信。通常浏览器在加载页面的过程中，会进行很多次DNS Lookup操作，其中包括页面本身的域名查询，以及浏览器在解析页面HTML代码过程中，需要加载JS、CSS、Image等资源产生的解析。

优化：

• DNS缓存优化。
• DNS预加载策略。
• 页面中资源的域名的合理分配。
• 稳定可靠的DNS服务器等。

相关指标

• DNS耗时 domainLookupEnd - domainLookupStart

3.建立TCP请求连接

相关指标

• TCP连接耗时：connectEnd - connectStart
• SSL连接耗时：connectEnd - secureConnectionStart

4.http请求

相关指标

• http请求（等待响应）耗时：requestEnd - requestStart

5.服务端响应

Web 服务器根据请求类型，将请求转发给已经注册该请求的应用服务器来处理。如果是一个未做过其他应用服务器注册的请求类型，则 Web服务器会自己来处理。比如静态页面、图片等请求，Web 服务器会通过对文件系统进行 I/O，获取内容，然后跳过后面的步骤，直接进行Gzip压缩后输出。

相关指标

• 数据响应耗时：responseEnd - responseStart
• TTFB：responseStart - requestStart

6.客户端下载、解析、渲染显示页面

服务器返回HTTP Response后，浏览器陆续开始接收数据，进行HTML下载、解析、渲染显示等过程。
具体步骤如下。

1. 如果是Gzip包，则先解压为HTML。
2. 解析HTML的头部代码，下载头部代码中引用的样式资源文件或者脚本资源文件。
3. 解析HTML代码和样式文件代码，这个过程会构造出两个树结构，即与HTML相关的DOM树，以及与CSS相关的CSSOM树。
4. 通过遍历DOM树和CSSOM树，浏览器依次计算每个节点的大小、坐标、颜色等样式，构造出渲染树。
5. 根据渲染树完成绘制的过程。

• HTML代码中的JavaScript代码（简称JS代码）会阻断DOM树的构造，因为浏览器认为这段JS代码可能会修改DOM结构，所以必须等待JS代码执行完毕，再恢复DOM树的构造过程。这是由浏览器的安全解析策略决定的，目前并没有指定某个JS代码不涉及DOM的属性。
• 浏览器必须等待样式表加载完成，才能开始构建CSSOM树。
• 还有一种特殊情况，浏览器在解析HTML时遇到JS代码，而此时CSSOM树还未构建完成，则浏览器会暂停脚本的执行（浏览器同时也会暂停继续向下解析HTML代码，从而导致DOM树的构建过程被暂停阻塞），直到CSS样式文件下载完成，并完成CSSOM树的构建，才会重新恢复原来的解析。这也是由浏览器的安全解析策略决定的。

DOM树和CSSOM树执行顺序有两种情况：

• DOM树构建完成后，立即开始构造CSSOM树。
• 如果样式表的下载速度足够快，DOM树和CSSOM树就进入一个并行的过程，当两棵树准备完毕，即可开始构造渲染树，最后进行绘制。

优化：

• 优化HTML代码和结构，缩短HTML下载时间，加快HTML解析速度。
• 优化CSS文件和结构，缩短CSS文件下载时间和解析时间。
• 合理放置JS代码，避免前面第三种情况的出现，这也是最重要的。

相关指标

• 白屏时间：domLoading - fetchStart
• 解析html和加载dom耗时：domComplete - domLoading
• DCL（初始html文档被完全加载和解析完成）：domContentLoadedEventEnd - fetchStart
• 从开始到文档解析完成耗时（TTI）：domInteractive - fetchStart
• 抛出load事件耗时：loadEventEnd - loadEventStart
• loaded（L）：loadEventEnd - fetchStart