浏览器关键渲染路径到认识FCP的优化
关键渲染路径
关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型 (DOM)，CSS 对象模型 (CSSOM)，渲染树和布局。
浏览器渲染过程分析
浏览器的渲染机制一般分为以下几个步骤：
- 处理 HTML 并构建 DOM 树。
- 处理 CSS 构建 CSSOM 树
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，计算每个节点的位置。
- 调用 GPU 绘制，合成图层，显示在屏幕上。
区分好：解析和渲染的区别
理解并解释：
html会解析构建DOM，由于html具有部分解析的特性。
当解析html时，遇到标签就去请求css资源（不会阻塞解析），解析css构建CSSOM
html继续解析，当遇到
<script>***[3]***标签时，会阻塞html解析，并下载执行JS。（若JS先下载完，也要等到CSSOM构建完才执行)。当CSSOM构建完 [1]，js才执行，此时html才继续解析，并构建DOM
DOM和CSSOM构建完后，两者构成渲染树，然后进行布局，绘制 [2]
简单总结：一般情况下，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] 如果为<script> 添加defer或者async属性，情况会不同。
defer与async
1、首先明确JS会阻塞DOM构建，从而影响渲染。
2、defer与async都是用于外部js脚本
分析：
| 脚本下载 | 执行时机 | 多个相同属性时的执行顺序 | |
|---|---|---|---|
| defer（推迟） | dom同时继续解析 | 推迟到html解析完再执行 | 按脚本的出现顺序 |
| async（异步） | dom同时继续解析 | 脚本下载完立刻执行，并阻塞dom解析 | 先下载完，先执行 |
小结：
defer：立即下载脚本，推迟到html解析完再执行（适合与dom关联的脚本）
async：不必等下载完再解析html，也不必等脚本下载执行完再去下载另一个脚本。（适用于第三方脚本）
async脚本不该在加载期间修改dom，因为此时dom可能还没别解析出来。
也因为是异步的，不能确定谁先加载完，如果异步脚本模块之间有依赖，依赖之间就可能有误。
FCP--首次加载（First Contentful Paint）
优化首次内容绘制的三个前提：
- 提高FCP的时间其实就是在优化关键渲染路径
- CSS具有渲染阻碍性
- JavaScript阻塞解析，html解析遇到js时，会停止解析，交给js引擎，等待js执行完毕
css阻塞：cssom构建完，才能配合dom形成渲染树渲染。所以优化要将css放在head标签里和尽快启用cdn加载优化。
DOM渲染优化
先了解回流和重绘
- 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。
- 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。
提高FCP 的核心只有理念之后两个 减少初始化视图内容和 减少初始化下载资源大小
优化手段：
1、初始化的js文件走异步加载，defer和async，cdn的第三方插件放在页面底部
2、使用cdn，开启gzip
3、优化文件大小 ：减少字体包、css文件、以及js文件的大小
4、服务端渲染