浏览器渲染的流程---关键渲染路径

**关键渲染路径**是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型 (DOM)，CSS 对象模型 (CSSOM)，渲染树和布局。

浏览器渲染过程分析

浏览器的渲染机制一般分为以下几个步骤：

1. 处理 HTML 并构建 DOM 树。
2. 处理 CSS 构建 CSSOM 树
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，计算每个节点的位置。
5. 调用 GPU 绘制，合成图层，显示在屏幕上。

区分好：解析和渲染的区别

理解并解释：

• html会解析构建DOM，由于html具有部分解析的特性。

• 当解析html时，遇到标签就去请求css资源（不会阻塞解析），解析css构建CSSOM

• html继续解析，当遇到

简单总结：一般情况下，html解析会被JS阻塞，JS执行完后，HTML才继续解析构建DOM，期间css的解析构建又会阻塞JS执行。所以最后DOM和CSSOM构建完成后，才形成渲染树。

至此关键渲染路径的过程就分析完了，需要注意以下三点。

特别说明：

[1] 因为js可能会去获取或改变元素的样式，所以浏览器为了不重复渲染， 等所有的css加载渲染完成后在执行js（无论js是外部还是内部）

[2] 由以上过程分析，CSSOM构建是阻塞渲染的一大原因，因为CSSOM关系到渲染树的构建，也阻塞JS的执行。

[3] 由于JS能操作DOM，修改CSS。所以修改完毕之后，又会重新执行渲染树—布局—绘制的这个阶段。

JS阻塞DOM的构建，所以JS是阻塞渲染的一大原因。

[4] 如果为

derfer与async

1、首先明确JS会阻塞DOM构建，从而影响渲染。

2、derfer与async都是用于外部js脚本（非模块脚本。async可用于模块内联脚本）

分析：

	脚本下载	执行时机	多个相同属性时的执行顺序
derfer（推迟）	dom同时继续解析	推迟到html解析完再执行	按脚本的出现顺序
async（异步）	dom同时继续解析	脚本下载完立刻执行，并阻塞dom解析	先下载完，先执行

小结：

derfer：立即下载脚本，推迟到html解析完再执行（适合与dom关联的脚本）

async：不必等下载完再解析html，也不必等脚本下载执行完再去下载另一个脚本。（适用于第三方脚本）

async脚本不该在加载期间修改dom，因为此时dom可能还没别解析出来。

也因为是异步的，不能确定谁先加载完，如果异步脚本模块之间有依赖，依赖之间就可能有误。

最后总结：
本文从浏览器渲染流程开始研究，从MDN对关键渲染路径定义开始，并展开对渲染流程的分析理解，引出了DOM与CSSOM，JS三个在解析渲染时的关系，带出了脚本标签的两个属性derfer和async，得到两个的区别。
最后对浏览器渲染的流程有个初步认识，为之后的文章：FCP–首次加载（First Contentful Paint）作准备。

参考来源：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script —