浏览器渲染机制

---

浏览器对内容的渲染分为5个部分

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。
   这五个部分并不一定按顺序完成，首先浏览器几乎是并行加载资源，但浏览器的渲染有先后。

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。
而JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。

JavaScript 可以查询和修改 DOM 与 CSSOM。
CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。
所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
JavaScript 应尽量少影响 DOM 的构建。

参考文献

https://juejin.im/entry/59e1d31f51882578c3411c77