浏览器关键渲染路径

[791045873]

该笔记是对于谷歌开发者文档的关键渲染路径的学习总结。
笔记讨论的是HTML、CSS、JS对于页面首次渲染的影响。

首先，当用户在浏览器访问一个url时，浏览器开始下载该url所对应的HTML文件。
然后将文件解析为一个个的令牌（令牌即指标签）。
接着，将一个个的令牌构建为DOM树。在构建过程中，如果遇到外链的CSS文件，则立刻下载CSS到本地，并且构建出CSSOM。
当CSSOM与DOM构建结束后，一起构建出渲染树。

在这里要注意的是：DOM树并非是渲染树。我们在浏览器F12所看到的HTML文件也并非DOM树。F12看到的仅仅是文件本身。渲染树是我们最终在屏幕上所看到的。DOM树是这中间的一种状态。

当在构建DOM树的过程中，如果遇到了script标签，不论是内联的JS代码还是引用的外部脚本，都会暂停DOM的构建。因为，JS代码可以任意改变DOM结构，例如，appendChild接口。
如果在遇到script标签时，CSSOM仍在构建，则会延迟JS脚本的执行，直到CSSOM构建完毕。（当JS尝试修改样式时，会和CSSOM互相竞争，故需延迟JS的执行）

综上，CSSOM会阻止JS的执行，JS会阻止DOM的构建。

但是仍可以指定CSS与JS异步加载。
对引用CSS的Link标签使用media属性。（默认指定为all，此时会被阻塞）
对引用JS的Script标签使用async属性。

另，Script标签中有一defer属性。MDN解释如下：

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。

上述所说的文档解析完成后即DOM树构建完毕后，触发DOMContentLoaded 事件前即渲染树开始构建之前。