CSS 的加载、解析与应用对于 Web 性能优化是一个非常关键的话题。理解这一过程对于优化页面加载时间和用户体验至关重要。下面我们将详细探讨 CSS 是否阻塞 DOM 的解析和渲染，以及其背后的机制。
CSS 加载与 DOM 解析
-
DOM 解析
-
DOM（Document Object Model）的解析是指浏览器把收到的 HTML 字节流转化为 DOM 树的过程。
-
在 HTML 文档解析过程中，当解析器遇到一个非阻塞资源（如一个异步脚本）时，它会尝试并行下载资源，同时继续解析文档。
-
-
CSS 是否阻塞 DOM 解析：
-
CSS 本身不阻塞 DOM 的解析。也就是说，浏览器会继续解析 HTML，构建 DOM 树。
-
然而，CSS 阻塞了 DOM 渲染和 JavaScript 执行。这意味着虽然 DOM 树可以被构建，但是浏览器不会进行渲染操作，直到相关的 CSS 被解析完成（即 CSSOM 树构建完成）。这是因为浏览器必须确保页面在屏幕上正确呈现，避免重排（reflow）和重绘（repaint）。
-
当浏览器解析 HTML 生成 DOM 树时，它也会并行下载 CSS 文件，并开始构建 CSSOM（CSS 对象模型）。DOM 和 CSSOM 的构建是并行进行的，这意味着 CSS 的下载和解析不会阻止 DOM 的构建。
CSSOM 树与渲染
-
CSSOM 树：
-
CSSOM（CSS Object Model）是与 DOM 并行的一个数据结构，它包含了页面的所有 CSS 信息，浏览器利用它来构建页面的渲染树。
-
当浏览器遇到一个
<link>标签或<style>标签时，它会暂停渲染，优先加载和解析 CSS，从而构建 CSSOM 树。
-
-
渲染树构建：
-
渲染树是 DOM 树和 CSSOM 树结合的结果，它反映了将被浏览器渲染的内容。
-
渲染树的构建过程必须等待 CSSOM 树的构建完成，因为渲染树需要知道所有 DOM 元素的样式信息。
-
可以用这涨图来理解：
为什么 CSS 加载会阻塞 JavaScript
-
保证样式计算的准确性：当 JavaScript 试图修改 DOM 或计算样式时，如果 CSS 还没有加载和解析完母，JavaScript 获取的样式信息可能是不准确的。为了防止这种情况，浏览器必须确保在执行 JavaScript 之前，所有相关的 CSS 都已经被加载和解析完成，以确保 JavaScript 脚本获取到的 DOM 元素样式是最终样式。
-
避免重排和重绘：如果 JavaScript 被允许在 CSSOM 尚未就绪时执行，它可能基于不完整的样式信息修改 DOM，导致一旦 CSSOM 构建完毕，浏览器需要对已渲染的元素进行重排（reflow）和重绘（repaint），这将大大降低页面渲染效率。
-
依赖解析顺序：浏览器解析 HTML 的过程中，遇到
<link rel="stylesheet" href="...">会立即开始加载 CSS，遇到<script>标签时（如果没有 async 或 defer 属性），它会暂停 DOM 解析，等待脚本执行。如果此时 CSS 还未加载完毕，脚本执行可能会依赖于未确定的样式信息，因此，浏览器会等待 CSSOM 就绪后再执行脚本。
在 js 中编写 css 样式会阻塞 dom 渲染吗
在 JavaScript 中编写 CSS 样式是否会阻塞 DOM 渲染，主要取决于样式是如何被应用以及在何时被应用。这个问题涉及到浏览器的渲染流程，尤其是如何处理 JavaScript、CSS 和 DOM 的相互关系。我们可以通过几个方面来探讨这个问题：
- 直接修改元素样式：
当我们直接在 JavaScript 中通过修改 DOM 元素的 style 属性来应用样式时（例如 element.style.color = ‘red’;），这种操作通常不会阻塞 DOM 的解析，但可能会阻塞渲染过程，因为浏览器需要重新计算样式并可能进行回流（reflow）和重绘（repaint）：
-
回流（Reflow）：当元素的尺寸、结构或某些属性发生变化时，浏览器需要重新计算元素的位置和尺寸。
-
重绘（Repaint）：当元素的视觉外观（颜色、边框等）发生变化，但尺寸和结构不变时，浏览器将重新绘制元素。
- 动态插入
<style>或<link>标签：
如果我们通过 JavaScript 动态添加 <style> 或 <link> 标签到 head 中，这会影响到渲染的方式：
-
阻塞渲染：浏览器必须停下来，解析新插入的 CSS 规则，然后再继续渲染。这种插入操作特别是如果 CSS 资源较大或网络条件较差时，确实可能造成显著的渲染阻塞。
-
影响性能：如果频繁操作，如在一个循环中多次插入
<style>标签，这可能导致重复的回流和重绘，严重影响页面性能。
JavaScript 中的 CSS 处理方式如果不当确实可能阻塞或延迟 DOM 的渲染，尤其是在样式动态生成和应用时。
总结
CSS 加载不会堵塞 DOM 的解析，但会堵塞 DOM 的渲染，CSS 加载会堵塞后面 JS 的执行。
最后分享两个我的两个开源项目,它们分别是:
这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗
原文链接：https://juejin.cn/post/7356235820460359706 作者：Moment
