浏览器渲染机制
一、浏览器如何渲染网页
浏览器的渲染机制可以分为五步:
第一步:解析html,构建DOM树
第二步:解析CSS,生成CSSOM树
第三步:合并dom树和css规则树,生成render渲染树
第四步:根据render渲染树进行布局
第五步:调用GPU对渲染树进行绘制,合成图层,显示在屏幕上\
其中第四步和第五步合起来,就是我们常常说的浏览器渲染,并且第四步和第五步是浏览器渲染最耗时的部分(主要优化点)
关于渲染:
- 浏览器在生成网页的过程中,至少渲染一次
- 在用户浏览的过程中,还会不断重新渲染 (render = n+1)
- 在构建 CSSOM 树时,会阻塞渲染,直至 CSSOM树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程,所以应该尽量保证层级扁平,减少过度层叠,越是具体的 CSS 选择器,执行速度越慢
- 当 HTML 解析到 script 标签时,会暂停构建 DOM,完成后才会从暂停的地方重新开始。也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件。并且CSS也会影响 JS 的执行,只有当解析完样式表才会执行 JS,所以也可以认为这种情况下,CSS 也会暂停构建 DOM
浏览器渲染的五个阶段
1.解析html标签,构建DOM树
在这个阶段,引擎开始解析html,解析出来的结果会成为一棵dom树(包含全节点,包括隐藏的节点和<head>标签)
dom树构建完成以后主要作为下阶段渲染树状图的输入,并且成为网页和脚本的交互界面。(最常用的就是getElementById等等)
当解析器到达script标签的时候,发生下面四件事情
- html解析器停止解析
- 如果是外部脚本,就从外部网络获取脚本代码
- 将控制权交给js引擎,执行js代码
- 恢复html解析器的控