先简要概述浏览器渲染的步骤:
处理HTML标记并构建DOM树
处理CSS标记并构建CSSOM树
将DOM与CSSOM合并成一个渲染树
根据渲染树来布局,计算每个节点的布局信息
将各个节点绘制到屏幕上
如果DOM或CSSOM被修改,就会重新执行上面所有步骤
3055132361-55169ffa877a0_articlex.png
构建对象模型(DOM,CSSOM)
浏览器解析HTML文档时,会完成以下步骤:
读取HTML的原始字节,根据文件制定编码(例:utf-8)解析为各个字符
将字符串转化为各种标签
将标签转化为node节点
DOM构建
full-process.png
浏览器解析HTML时,遇到link标签,会发出请求并返回资源,开始解析CSS:
CSS字节转换为字符,接着转换成令牌和节点,最后构建生成CSSOM
cssom-tree.png
CSSOM和DOM是独立的数据结构
渲染树构建、布局及绘制
CSSOM树和DOM树合并成渲染树,然后用于计算每个可见元素的布局,并输出给绘制流程,将像素渲染到屏幕上。
构建渲染树的步骤:
从DOM树的根节点开始遍历每个可见节点(display:none与visibility:hidden的区别)
对于每个可见节点,为其找到适配的CSSOM规则并应用它
生成渲染树
布局阶段:输出盒模型
绘制:输出到屏幕上的像素
CSS阻塞渲染
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。
这就是为什么我们将外部样式的引入放在head标签中的原因,在body渲染前先把相对完整CSSOM Tree构建好。
对于某些CSS样式只在特定条件下叉用,添加媒体查询解决。
请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。无论哪一种情况,浏览器仍会下载 CSS 资产,只不过不阻塞渲染的资源优先级较低罢了。
JavaScript阻塞渲染
JavaScript 会阻止 DOM 构建和延缓网页渲染。 为了实现最佳性能,可以让您的 JavaScript 异步执行,并去除关键渲染路径中任何不必要的 JavaScript。
JavaScript 可以查询和修改 DOM 与 CSSOM。
JavaScript 执行会阻止 CSSOM。
除非将 JavaScript 显式声明为异步,否则它会阻止构建 DOM。
如果浏览器尚未完成 CSSOM 的下载和构建,而我们却想在此时运行脚本,浏览器将延迟脚本执行和 DOM 构建,直至其完成 CSSOM 的下载和构建。
简言之,JavaScript 在 DOM、CSSOM 和 JavaScript 执行之间引入了大量新的依赖关系,从而可能导致浏览器在处理以及在屏幕上渲染网页时出现大幅延迟:
脚本在文档中的位置很重要
当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行。
JavaScript 可以查询和修改 DOM 与 CSSOM。
JavaScript 执行将暂停,直至 CSSOM 就绪。
async属性:加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。无顺序
defer属性: 加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。按顺序