简单来说,浏览器渲染一共有五步,
1. 解析HTML标签,构建DOM树。
在这个阶段,引擎开始解析html,解析出来的结果会成为一棵dom树
dom的目的至少有2个:
- 作为下个阶段渲染树状图的输入
- 成为网页和脚本的交互界面。(最常用的就是getElementById等等)
当解析器到达script标签的时候,发生下面四件事情
- html解析器停止解析,
- 如果是外部脚本,就从外部网络获取脚本代码
- 将控制权交给js引擎,执行js代码
- 恢复html解析器的控制权
===由此可以得到第一个结论1====
- 由于<script>标签是阻塞解析的,将脚本放在网页尾部会加速代码渲染。
- defer和async属性也能有助于加载外部脚本。
- defer使得脚本会在dom完整构建之后执行;
- async标签使得脚本只有在完全available才执行,并且是以非阻塞的方式进行的。
2. 解析CSS标签,构建CSSOM树。
我们已经看到html解析器碰到脚本后会做的事情,接下来我们看下html解析器碰到样式表会发生的情况
js会阻塞解析,因为它会修改文档(document)。css不会修改文档的结构,如果这样的话,似乎看起来css样式不会阻塞浏览器html解析。但是事实上 css样式表是阻塞的。阻塞是指当cssom树建立好之后才会进行下一步的解析渲染。
通过以下手段可以减轻cssom带来的影响
- 将script脚本放在页面底部
- 尽可能快的加载css样式表
- 将样式表按照media type和media query区分,这样有助于我们将css资源标记成非阻塞渲染的资源。
- 非阻塞的资源还是会被浏览器下载,只是优先级较低。
3. 3.把DOM和CSSOM组合成渲染树(render tree)
4. 在渲染树的基础上进行布局,计算每个节点的几何结构。
布局(layout):定位坐标和大小,是否换行,各种position, overflow, z-index属性 ……
5. 把每个节点绘制到屏幕上(painting),正式开画!
作者:饥人谷_刘康
链接:https://www.jianshu.com/p/e6eb2adbd55e
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。