总结：
目标：尽快生成rendertree（rendertree包含了各节点以及他们的computed样式，之后进行layout和paint）
需要：DOMTree和CSSOM Tree ，一起生成renderTree
1. js可能会查询cssom，所以必须先加载完cssom，才能执行js （可以加给css 加 media="print"来解除这种行为）
2. script加载会阻塞dom的parse构建，（执行script会阻止dom的parse，无论是内联还是外引） （可以加async defer来解除这种行为）
（https://developers.google.com/web/updates/2018/09/inside-browser-part3）
当同时存在时，优先级 css构建> js执行> dom构建，
当dom构建和cssom构建完成后，才能生成rendertree
=======================================================================================
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:
（我为啥要把这个划掉 想不起来了 2021.08.19）
（ 注意，如果有同步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：
让我们定义一下用来描述关键渲染路径的词汇:
- 关键资源(Critical Resource): 可能阻止网页首次渲染的资源。(Resource that could block initial rendering of the page.)
- 关键路径长度(Critical Path Length): 获取所有关键资源所需的往返次数或总时间。(Number of roundtrips, or the total time required to fetch all of the critical resources.)
- 关键字节(Critical Bytes): 实现网页首次渲染所需的总字节数，它是所有关键资源传送文件大小的总和。我们包含单个 HTML 页面的第一个示例包含一项关键资源（HTML 文档）；关键路径长度也与 1 次网络往返相等（假设文件较小），而总关键字节数正好是 HTML 文档本身的传送大小。(Total number of bytes required to get to first render of the page, which is the sum of the transfer filesizes of all critical resources. Our first example, with a single HTML page, contained a single critical resource (the HTML document); the critical path length was also equal to one network roundtrip (assuming file was small), and the total critical bytes was just the transfer size of the HTML document itself.)
增加script：
加入async标记解除parser blocking：
给css增加异步加载的media print属性：
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
https://developers.google.com/web/updates/2018/09/inside-browser-part3
