浏览器的渲染 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天

浏览器在输入URL到显示页面的经过

输入网址 --> 缓存解析 --> 域名解析 --> TCP连接，三次握手 --> 发送HTTP请求 --> 返回HTTP 响应 --> 客户端页面渲染 --> 断开连接

这里主要讨论客户端的渲染，缓存机制可查看上一篇

客户端渲染步骤

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

阻塞渲染

• 默认情况下，CSS被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至CSSOM构建完毕
• 存在阻塞的CSS资源时，浏览器会延迟JavaScript的执行和DOM构建，另外：
  1. 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
  2. JavaScript 可以查询和修改 DOM 与 CSSOM。
  3. CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。
  所以script标签的位置很重要。一般遵循下面两个原则：
  1. 引入顺序上，CSS资源有限域JavaScript资源
  2. JavaScript应尽量少影响DOM的构建

渲染树的关键渲染路径中，要求同时具有DOM和CSSOM，之后才会构建渲染树。

改变阻塞模式

defer

<script src="xxx.js" defer></script>
defer属性表示延迟执行引入的JavaScript，即这段JavaScript加载时HTML并未停止解析，当整个document解析完毕和defer-script加载完成后，会执行由defer-script加载的JavaScript代码，然后触发DOMContentLoaded事件。
与普通的script相比有两点区别：载入JavaScript文件时不会阻塞HTML的解析，执行阶段被放到HTML标签解析完成之后。

async

<script src="xxx.js" async></script> async属性表示异步执行引入的JavaScript，与defer的区别在于，如果已经加载完毕，就会开始执行，无论此时是HTML解析阶段还是DOMContentLoaded触发之后。注意：async加载的JavaScript依然会阻塞load事件。