JS CSS 如何阻塞页面渲染_css阻塞渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41571491/article/details/122901000

本文探讨了JS和CSS如何影响页面的关键渲染路径。内联JS执行会阻塞DOM构建，而外部JS的加载和执行同样会产生影响。CSSOM的构建会阻塞渲染树构建，CSS资源无论内外链都会影响页面布局。async和defer属性可以缓解JS对DOM构建的阻塞。CSS放置在头部可以减少重新渲染带来的性能损失，而JS通常推荐放在底部以提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：https://waynegong.cn/posts/49203.html

TLDR:

CSS 和 JS 都会阻塞页面的关键渲染路径，不同情况下阻塞效果不同：

内联 JS 的执行会阻塞 DOM 构建（Layout）；
外部 JS 的加载和执行都会阻塞 DOM 构建；
内联 CSS 的 CSSOM 构建会阻塞渲染树的构建，从而阻塞布局（Layout）；
外部 CSS 的加载和 CSSOM 构建都会阻塞渲染树的构建，从而阻塞布局；
在页面存在 CSS 和 JS 的情况下，CSSOM 的构建会阻塞他后面 JS 的执行；
script 标签的 async 和 derfer 属性能使 JS 的加载不阻塞 DOM 构建；

测试 Demo

为了验证关键渲染路径是如何被阻塞，可以运行一个 Web Server，并通过浏览器调试工具（Chrome DevTools – Performance）观察页面渲染过程。

一个简单的 Demo

JS 如何阻塞页面渲染

由于 JS 可能会修改 DOM，所以运行 JS 和构建 DOM 不能同时进行，所以 JS 会对页面渲染造成较大的影响。

验证 Js 对页面渲染的影响主要分为三种情况：

内联方式的 JS
外部链接引入的 JS
外部链接并使用 async、defer 属性的 JS

内联 JS 对页面渲染的影响

修改 Demo 代码 demo/static/index.html:

<html>
<body>
  <h1>hello</h1>
  <script>
    const stopTime = Date.now() + 20
    while (Date.now() < stopTime);
  </script>
  <br>
  <h1>world</h1>
</body>
</html>

得到如下结果：