浏览器渲染机制
一、浏览器如何渲染网页
浏览器的渲染机制可以分为五步：
第一步：解析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解析器的控
最低0.47元/天 解锁文章
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
