JavaScript高级 | 浏览器渲染过程

本文已收录于专栏 ⭐️ 《JavaScript》⭐️

浏览器内核

常见的浏览器内核

浏览器的内核一般由两部分组成：渲染引擎和JS引擎

以流行的webkit内核为例：

• WebCore：负责HTML解析、布局、渲染等等相关工作，即渲染引擎。
• JavaScriptCore：解析、执行JavaScript代码，即JavaScript引擎。

本篇文章我们着重来讲解浏览器渲染引擎的工作流程，即浏览器的渲染过程。

浏览器渲染过程

我们罗列出浏览器渲染的大概流程，有个大概的框架。

1. 先将HTML加载到浏览器的内部。
2. 从上往下开始解析HTML。
3. 当解析到引入的外部CSS文件时，另一个线程开始加载CSS文件，HTML继续解析。
4. 浏览器解析DOM文档时，会将DOM文档解析成一棵树结构–DOM Tree，用来更清晰的显示出标签之间的层级关系。
5. HTML解析完毕之后，等待CSS解析。
6. CSS文件会被解析成CSS规则树，解析完毕之后会将每个节点的样式附加到DOM Tree形成布局树，最后再化为Render Tree （渲染树）

生成DOM Tree

解析HTML时会构建DOM树。
什么是DOM树？
定义

• HTML 编程的接口。
• 提供了文档对文档的结构化的表述。
• 定义了一种方式去改变文档标签、样式和内容。

特点

• DOM解析具有不会被阻塞的特点。
• DOM存在于内存中，且可以通过JS进行修改。

为什么要构建DOM树？

• 浏览器无法直接理解HTML结构，需要解析成DOM树浏览器才能理解，用来更清晰的表达出标签之间的层级关系。

生成CSSOM Tree

在解析过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件。

• 注意：下载CSS文件是不会影响DOM的解析的

浏览器下载完CSS文件后，就会对CSS文件进行解析，根据样式的继承规则和层叠规则计算属性的最终样式，解析出对应的规则树。

• 我们可以称之为CSSOM （CSS Object Model ， CSS对象模型）树

构建布局树

创建布局树

• DOM树包含所有节点，布局树中只需要**看得见的（没有设置display：none）**元素的DOM结构，
• 所有创建的这颗独立的树结构，只含有可见节点。

布局计算

• 根据CSSOM计算元素的样式，计算元素的坐标位置。

总结
遍历DOM树，计算元素坐标位置。

构建Render Tree

当有了DOMTree 和 CSSOM Tress 后就可以两者结合构建 Render Tree了。
需要注意的是：

• link元素不会阻塞DOM Tree 的构建过程，但会阻塞Reader Tree 的构建过程。（不考虑浏览器的优化）
  • 这是因为 Render Tree 在构建时，需要对应的CSSOM Tree，而方法 CSSOM Tree的构建慢于 DOM Tree 的构建。
• Reader Tree 和DOM Tree并不是一一对应的关系，比如 display为 none的元素 ，压根不会出现在 Reader Tree 中。

布局（layout）和绘制（Paint）

第四步是在渲染树(Reader Tree)上运行布局(Layout) 以计算每个节点的几何体.

• 渲染数会显示哪些节点以及其他样式,但是不表示每个节点的尺寸、位置等信息。
• 布局是确定呈现树中的所有节点的宽度、高度、位置信息。

第四步是将每个节点绘制（paint）到屏幕上

• 在绘制阶段，浏览器将布局阶段计算的每个frame（结构体）转为屏幕中实际的像素点。
• 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素。

回流和重绘

理解回流reflow

• 第一次确定节点的大小和位置，称为布局。
• 之后针对节点的大小、位置修改重新计算称之为回流。

引起回流的几种情况

• DOM结构发生变改变，如添加新的节点或者移除节点
• 改变布局，如修改了width height padding font-size等值。
• 改变窗口 resize,修改了窗口的尺寸。
• 调用 getComputedStyle方法获取尺寸、位置信息。

理解重绘repaint

• 第一次渲染内容称之为绘制（paint）
• 之后重新渲染称之为重绘

引起重绘的几种情况

• 修改背景色、文字颜色、边框颜色、样式等。

避免发生回流的方式

回流一定会引起重绘，所以回流是一件很消耗性能的事情。
所以在开发中要尽量避免发生回流：

• 修改样式时尽量一次性修改
  • 例如通过cssText 修改，比如通过添加class修改
• 尽量避免频繁的操作DOM
  • 我们可以在一个DocumentFragment 或者父元素中将要操作的DOM操作完成，再一次性的操作。
• 尽量避免通过getComputedStyle获取尺寸、位置等信息。
• 对某些元素使用position的absolute或者fixed
  • 并不是不会引起回流，而是开销较小，不会对其他元素造成影响

特殊解析-composite合成

• 绘制的过程，可以将布局后的元素绘制到多个图层中。
  • 这是浏览器的一种优化手段。
• 默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；
• 而一些特殊的属性，会创建一个新的合成层（CompositingLayer），并且新的图层可以利用GPU来加速绘制。
  • 因为每个合成层的都是单独渲染的。
• 可以形成新的合成层的常见属性：
  • 3D transform
  • video、canvas、iframe
  • opacity 动画转换时
  • position：fixed
  • will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化
  • animation或者transition 设置了opacity、transform
• 分层确实可以提高性能，但是它以内存管理为代价，因此不应作为web优化性能优势策略的一部分过度使用。

图层效果

完结散花

ok以上就是对 JavaScript高级 |浏览器渲染过程 的全部讲解啦，很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我，我后期再补充完善。

参考文献

coderwhy老师JS高级视频教程
https://juejin.cn/post/7134284163909156901
https://juejin.cn/post/7134251423381848072