浏览器渲染机制（下）

2020-06-04 1796

欢迎阅读，本文分上下篇，将详细介绍浏览器进程和线程、JS代码的解析与执行、浏览器的渲染机制。主要想对之前名为《浏览器渲染机制和React虚拟DOM》的一次前端技术分享进行总结和扩充。

前言

了解了浏览器的进程线程架构及其主要进程任务及职责后，本篇主要讲解浏览器的渲染机制。

浏览器关键渲染路径

浏览器关键渲染路径1

步骤说明

1：解析HTML生成DOM树：遍历html文档节点，生成DOM（Document Object Model）树

解析HTML生成DOM树

2：解析CSS生成CSSOM规则树（1、2步会同时进行）

解析CSS生成CSSOM规则树
CSSOM（CSS Object Model）又叫层叠样式表对象模型，是一棵仅含有样式信息的树。
CSS解析过程中，子节点会继承父节点的样式。这就是层叠规则以及CSS为什么叫CSS层叠样式表。
浏览器解析CSS文件并生成CSSOM（CSS Object Model）规则树，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。
CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。

注意：

html解析遇到link、script、img等标签时，浏览器会向服务器发送请求资源。
script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。
CSS构建CSSOM的速度将直接影响首屏渲染速度。

Dom树构建阻塞：

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。

渲染阻塞：

解析HTML构建DOM时，若遇见CSS会立刻构建CSSOM，它们可以同时进行。
但CSS不行，不完整的CSS是无法使用的，因为CSS的每个属性都可以改变CSSOM，所以会存在这样一个问题：假设前面几个字节的CSS将字体大小设置为16px，后面又将字体大小设置为14px，那么如果不把整个CSSOM规则树构建完整，最终得到的CSSOM其实是不准确的。所以必须等CSSOM构建完毕才能进入到下一个阶段，哪怕DOM已经构建完，它也得等CSSOM，然后才能进入下一个阶段。

Q：怎么避免渲染阻塞？
  1. 引入顺序上，CSS优先，JS置后，且应尽量少影响DOM构建
  2. 写CSS时，尽量使用id和class，不要过度层叠
  3. 对JS、CSS进行压缩
    另：查找样式表是按照从右到左的顺序匹配的：
    例如： div p {font-size: 16px}，会先寻找所有p标签并判断它的父标签是否为div，
    之后才会决定要不要采用这个样式进行渲染。切忌过度层叠。

3：将DOM树与CSSOM规则树合并在一起生成渲染树

通过DOM树和CSS规则树我们便可以构建渲染树，浏览器会先从DOM树的根节点开始遍历每个可见节点，为每个可见节点，找到其适配的CSS样式规则并应用，
渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。

注意：

渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，如display: none

4：遍历渲染树开始布局，计算每个节点的位置大小信息

渲染树的绘制呈现是由浏览器的UI组件完成的，比如button、div、span、img等组件。

渲染树布局（layout）：

布局阶段会从渲染树的根节点开始遍历，确定每个节点对象在页面上的确切大小与位置，
布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切大小与位置。

渲染树绘制（paint）：

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。
根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。

注意：

HTML默认是流式布局的，CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。
这时就要提到两个重要概念：replaint和reflow。

重排/回流（reflow）：意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。

重绘（repaint）：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，
但元素的几何尺寸和位置不变。

5：将渲染树每个节点绘制到屏幕

总结

浏览器渲染机制总结