1. 渲染的过程：
浏览器解析html文件进行parse，解析到link为style的时候会去请求css资源，
css资源获取到后会进行解析为cssom，cssom与dom一起生成render tree 进行layout和paint
优化关键渲染路径就是指最大限度的缩短执行1-5步骤的时间。
2. CSS的影响
默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。务必精简 CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞。
(HTML 和 CSS 都是阻塞渲染的资源。
HTML 显然是必需的，因为如果没有 DOM，我们就没有可渲染的内容，但 CSS 的必要性可能就不太明显。
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。)
请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。
3. 脚本的影响
执行script会阻止DOM的parse构建，也就延缓了首次渲染。
如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本。浏览器将 1.延迟 脚本执行和 DOM 构建， 2.优先完成 CSSOM 的下载和构建。
向浏览器传递 脚本不需要在引用位置执行 的信号既可以让浏览器继续构建 DOM，也能够让脚本在就绪后执行（在外引用的script上标记defer）
4. Navigation Timing API:
（ 注意，如果有同步script代码的话，script会阻塞DOM解析，CSS会阻塞Script执行，所以会1.先等待CSS加载完成，2.执行script，3.将DOMparse完，触发DOMContentLoaded https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/ ）
5. 从缓存或从网络获取资源所需的时间:
正如预期的一样，HTML 文件下载花费了大约 200 毫秒。请注意，蓝线的透明部分表示浏览器在网络上等待（即尚未收到任何响应字节）的时间，而不透明部分表示的是收到第一批响应字节后完成下载的时间。当 HTML 内容可用后，浏览器会解析字节，构建 DOM 树。
请注意，为方便起见，DevTools 会在底部报告 DOMContentLoaded 事件的时间（216 毫秒），该时间同样与蓝色垂直线相符。HTML 下载结束与蓝色垂直线 (DOMContentLoaded) 之间的间隔是浏览器构建 DOM 树所花费的时间 — 在本例中仅为几毫秒。
请注意，img标签并未阻止 domContentLoaded 事件。
当我们谈论关键渲染路径时，通常谈论的是 HTML 标记、CSS 和 JavaScript。
图像不会阻止页面的首次渲染，不过，我们当然也应该尽力确保系统尽快绘制图像！
即便如此，系统还是会阻止图像上的 load 事件（也称为 onload）: DevTools 会在 335 毫秒时报告 onload 事件。
onload 事件标记的点是网页所需的所有资源均已下载并经过处理的点，由瀑布中的红色垂直线标记。
下面添加CSS：
1. DOMContentload的事件向后了，因为想要构建渲染树，浏览器在等待构建CSSOM
2. 因为JS可能会查询CSSOM，所以必须先加载完CSS，才能执行JS
尝试给script标签加async：
只有html：
html+css：
让我们定义一下用来描述关键渲染路径的词汇:
- **关键资源: ** 可能阻止网页首次渲染的资源。
- **关键路径长度: ** 获取所有关键资源所需的往返次数或总时间。
- **关键字节: ** 实现网页首次渲染所需的总字节数，它是所有关键资源传送文件大小的总和。我们包含单个 HTML 页面的第一个示例包含一项关键资源（HTML 文档）；关键路径长度也与 1 次网络往返相等（假设文件较小），而总关键字节数正好是 HTML 文档本身的传送大小。
增加script：
加入async标记解除parser blocking：
给css增加异步加载的media pring属性：
6. 关键渲染路径优化
资料：
https://developers.google.com/web/fundamentals/performance/critical-rendering-path
https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/
https://stackoverflow.com/questions/42950574/are-deferred-scripts-executed-before-domcontentloaded-event("...DOMContentLoaded can be fired before CSSOM...")
注意：DOMContentLoaded是一旦页面资源加载完成就会触发（具体是指 html被parse完，如果此时刚有css开始在下载，但是仍然是ContentLoaded的），
https://stackoverflow.com/questions/39319020/what-are-domcontentloaded-and-dominteractive-events
https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event