学习指南:
浏览器内核
常见的浏览器内核
浏览器的内核一般由两部分组成:渲染引擎和JS引擎
以流行的webkit内核为例:
- WebCore:负责HTML解析、布局、渲染等等相关工作,即渲染引擎。
- JavaScriptCore:解析、执行
JavaScript
代码,即JavaScript引擎。
本篇文章我们着重来讲解浏览器渲染引擎的工作流程,即浏览器的渲染过程。
浏览器渲染过程
我们罗列出浏览器渲染的大概流程,有个大概的框架。
- 先将HTML加载到浏览器的内部。
- 从上往下开始解析HTML。
- 当解析到引入的外部CSS文件时,另一个线程开始加载CSS文件,HTML继续解析。
- 浏览器解析DOM文档时,会将DOM文档解析成一棵树结构–DOM Tree,用来更清晰的显示出标签之间的层级关系。
- HTML解析完毕之后,等待CSS解析。
- 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