浏览器对页面渲染的过程

1,303 阅读3分钟

渲染页面的过程

1、处理 HTML 标记并构建 DOM 树。
2、处理 CSS 标记并构建 CSSOM 树。
3、将 DOM 与 CSSOM 合并成一个渲染树。
4、根据渲染树来布局,计算每个节点的几何信息。
5、将各个节点绘制到屏幕上。

注意:
1、这五个步骤并不一定是按顺序一次性完成,当DOM 或 CSSOM被CSS或Javascript修改时,以上步骤就会重复执行。
2、关键渲染路径要求我们同时具有 DOM 和 CSSOM 才能构建渲染树。

阻塞渲染

CSS阻塞渲染

1、因为CSS被视为阻塞渲染的资源,所以浏览器在CSSOM构建完毕之前,不会渲染任何已处理的内容。
2、CSSOM 构建时,JavaScript执行将暂停,直到CSSOM 就绪。
3、CSS 不会阻塞HTML的解析,但是会阻塞渲染树的构建
所以我们需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。 也就是说,我们尽量把引入css的标签放在head标签内。

JS阻塞渲染

1、JS会阻塞DOM解析和渲染。
2、JavaScript 既可以读取和修改 DOM 属性,又可以读取和修改 CSSOM 属性。
所以,script 标签的位置很重要,在实际应用中我们通常把script标签放在body底部。

改变阻塞模式:defer 与 async

由于存在前文所说的阻塞情况,我们需要改变这些情况,改变方式就包括defer和async

使用方法

将defer和async加在script标签上:

<script src="main1.js" defer></script>
<script src="main2.js" async></script>

defer

defer表示延迟执行引入的 JavaScript。
文档按顺序解析,当遇到JavaScript脚本时开始下载,同时HTML也继续在解析,这两个过程是并行的。如果脚本下载完成,会等到文档解析完毕才会开始执行。

async

async表示异步引入Javascript。
和defer前面一样,文档按顺序解析,当遇到JavaScript脚本时开始下载,同时HTML也继续在解析,但不同的是,脚本下载完成之后,如果文档还未解析完成,则停止解析,先执行下载好的脚本。

注意:
defer、async 对 inline-script 无效

<script async>
  console.log("1");
</script>
<script defer>
  console.log("2");
</script>
<script>
  console.log("3");
</script>

这样和没有加是一样的,控制台还是按顺序打出123。

总结

  • 浏览器渲染过程按照前文的五个步骤执行,并且可能有重复执行的可能。

  • CSS 不会阻塞 DOM 的解析,但会阻塞 DOM 渲染。JS既阻塞DOM解析,又阻塞DOM渲染。

  • 优化阻塞渲染的方法有async和defer。

  • <script>最好放底部,<link>最好放头部,如果头部同时有<script><link>的情况下,最好将<script>放在<link>上面。

如果您觉得我的文章有用,欢迎点赞和关注,也欢迎光临我的个人博客github.com/BokFang