CSS 真的会阻塞文档解析吗？从浏览器渲染原理深入探究一下

在网页开发领域，一个常见的疑问是 CSS 是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题，需要从浏览器渲染网页的原理说起。

浏览器渲染网页的基本流程

浏览器在接收到 HTML 文档后，会依次进行以下几个主要步骤：

• 解析 HTML：浏览器从网络或本地获取 HTML 文件，然后开始解析，将 HTML 代码转换为 DOM（Document Object Model，文档对象模型）树。DOM 树是 HTML 文档的树形表示，它以节点的形式描述了页面的结构，比如标签之间的层级关系等。
• 构建 CSSOM：同时，浏览器会解析 CSS 代码，无论是内部样式表、外部样式表还是内联样式，都会被解析并构建成 CSSOM（CSS Object Model，CSS 对象模型）树。CSSOM 树描述了页面元素的样式信息，用于后续计算元素的最终样式。
• 合成渲染树：DOM 树和 CSSOM 树构建完成后，浏览器将两者结合，根据 DOM 中元素的结构和 CSSOM 中定义的样式，生成渲染树（Render Tree）。渲染树只包含那些需要显示在页面上的元素及其样式信息，例如

  在这个例子中，如果styles.css还没有完成下载和解析，当 JavaScript 脚本执行到获取元素样式的代码时，由于此时 CSSOM 尚未构建完成，获取到的样式值可能是错误的。为了避免这种情况，浏览器会延迟 JavaScript 脚本的执行以及 HTML 文档的解析，直到 CSSOM 构建完成。

  渲染树构建的要求

  渲染树的构建依赖于 DOM 树和 CSSOM 树。如果 CSS 还在加载或解析过程中，那么 CSSOM 树就不完整，此时无法准确构建渲染树。例如，假设一个网页中有大量复杂的 CSS 规则来定义元素的显示和隐藏、定位等样式，如果这些 CSS 没有加载完毕，浏览器无法确定哪些元素应该显示在页面上，也就无法正确构建渲染树。因此，在这种情况下，浏览器也会等待 CSS 的加载和解析，这间接导致了 HTML 文档解析的阻塞。

  先加载 JavaScript 后加载 CSS 的问题及影响

  若先加载 JavaScript 后加载 CSS，会引发一系列问题。

  首先是页面闪烁，JavaScript 代码可能会操作 DOM，例如修改元素的显示、隐藏状态或样式等。由于 CSS 尚未加载，页面初始会以默认样式呈现，当 JavaScript 执行完相关操作后，CSS 才加载完成并应用样式，这就可能导致页面元素在短时间内从默认样式切换到最终样式，产生闪烁现象。比如一个图片元素原本在 JavaScript 中被设置为display:none，但 CSS 中又定义了其正常显示且有特定样式，用户可能会先看到图片消失，然后又突然出现并带有样式，影响视觉体验。

  其次，脚本执行可能出现异常。JavaScript 脚本可能会依赖 CSS 样式来获取准确的元素尺寸、位置等信息进行操作。如果 CSS 未加载完成，那么getComputedStyle等获取样式的方法返回的值可能不准确。例如，在一个轮播图的 JavaScript 代码中，需要根据图片的宽度来计算切换动画的距离，若 CSS 未加载，获取的图片宽度可能是错误的，导致轮播图动画效果异常。

  再者，渲染性能会下降。浏览器在渲染页面时，需要结合 DOM 和 CSSOM 构建渲染树。若先加载 JavaScript，而 JavaScript 又可能对 DOM 进行大量修改，之后 CSS 加载完成再应用样式，浏览器可能需要多次重新计算布局和重新渲染，增加了渲染的复杂性和时间成本，降低了渲染性能。

  此外，当 JavaScript 修改 CSS 时，也存在潜在风险。恶意的 JavaScript 代码若被注入网页，就可能篡改 CSS 样式，破坏页面的布局和视觉效果。例如，将原本用于隐藏敏感信息的 CSS 样式修改为显示，从而导致信息泄露；或者恶意改变页面的字体、颜色、排版等，影响用户对页面内容的正常理解和使用。即便 CSS 已加载完成，JavaScript 操作 CSS 仍可能引发新问题。大量频繁的 JavaScript - CSS 操作，如在循环中不断修改元素的 CSS 属性，会导致浏览器频繁重新计算布局和重新绘制，严重影响页面性能。例如，通过 JavaScript 循环快速改变一个列表中所有项的背景颜色，页面会出现明显卡顿。而且，JavaScript 代码逻辑错误也可能导致 CSS 样式被错误修改。比如，错误地选择了元素，将原本应用于导航栏的样式错误地应用到了内容区域，破坏页面的视觉呈现。

  解决办法

  针对先加载 JavaScript 后加载 CSS 出现的问题，以及 JavaScript 修改 CSS 带来的潜在风险，有以下解决办法。
  对于非关键的 JavaScript 脚本，可以使用async属性。，async会让浏览器在下载完脚本后立即执行，不会阻塞页面的解析和其他资源的加载，这样可以在一定程度上减少 JavaScript 对 CSS 加载的影响。
  而对于需要按顺序执行且不会阻塞页面渲染的脚本，使用defer属性，，defer会使脚本在 HTML 解析完成后、DOMContentLoaded 事件触发前执行，确保在 CSS 加载完成后再执行脚本，避免脚本执行时因 CSS 未加载而获取错误样式信息。

  另外，将关键的 CSS 样式直接写在 HTML 文件的style标签内，这样浏览器在解析 HTML 时就能立即应用这些样式，减少页面闪烁的可能性。

  例如，对于页面的基本布局样式、字体样式等关键部分进行内联，保证页面初始显示的基本样式正确，后续再加载外部 CSS 文件来补充完整样式。

  同时，在 JavaScript 代码中，避免在 CSS 未加载完成时就进行依赖样式的操作。可以通过监听DOMContentLoaded事件，确保 DOM 和 CSSOM 都已准备好后再执行相关逻辑。

  例如：

  document.addEventListener('DOMContentLoaded', function() {
      // 这里写依赖样式的JavaScript代码
  });

  实际案例分析

  以一个电商网站的产品详情页为例。该页面包含丰富的产品图片、描述文字、价格信息以及购买按钮等元素，同时有大量的 CSS 代码用于控制页面的布局和样式，比如设置图片的尺寸和排列方式、文字的字体和颜色、按钮的样式和交互效果等。

  当用户访问该页面时，浏览器开始下载 HTML 文档。在解析 HTML 过程中，遇到了外部 CSS 文件的链接，于是同时开始下载 CSS 文件。然而，由于 CSS 文件较大，包含了许多针对不同屏幕尺寸的响应式样式以及复杂的动画效果样式，下载和解析时间较长。

  在 HTML 文档中，还包含一些用于实现交互功能的 JavaScript 代码，比如当用户点击某个产品特性标签时，显示或隐藏相关的详细说明。这些 JavaScript 代码在执行时，需要获取页面元素的当前样式来进行相应的操作。例如，判断某个元素是否已经应用了特定的隐藏样式，从而决定是显示还是隐藏该元素。

  由于 CSS 文件尚未完成下载和解析，CSSOM 树不完整，JavaScript 无法获取到准确的样式信息。为了保证 JavaScript 能够正确执行，浏览器会暂停 HTML 文档的解析，等待 CSSOM 构建完成。这就导致了整个页面的渲染延迟，用户可能会看到页面长时间处于空白或部分加载的状态，影响了用户体验。

  综上所述，虽然 CSS 本身并不直接阻塞 HTML 文档的解析，但在与 JavaScript 脚本执行以及渲染树构建相关的情况下，CSS 的加载和解析过程可能会导致文档解析的延迟。同时，先加载 JavaScript 后加载 CSS 会带来诸多问题，JavaScript 对 CSS 的修改也存在潜在风险。网页开发者在优化页面性能时，需要充分考虑这些因素，例如合理优化 CSS 代码，减少其体积和复杂度，采用异步加载 CSS 的方式，以及合理安排 JavaScript 代码的执行顺序等，以确保页面能够快速、流畅地渲染，同时保障网页的安全性和稳定性。

  技术交流沟通欢迎➕V：yinzhixiaxue