JS CSS 如何阻塞页面渲染

VIP文章风灯零乱

已于 2022-02-12 23:48:14 修改

阅读量1.1k

点赞数

文章标签： javascript css 前端

于 2022-02-12 19:44:58 首次发布

本文链接：https://blog.csdn.net/weixin_41571491/article/details/122901000

版权

原文地址：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>

得到如下结果：

最低0.47元/天解锁文章

风灯零乱

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JS CSS 如何阻塞页面渲染

原文地址：[https://waynegong.cn/posts/49203.html](https://waynegong.cn/posts/49203.html)TLDR:CSS 和 JS 都会阻塞页面的关键渲染路径，不同情况下阻塞效果不同：内联 JS 的执行会阻塞 DOM 构建（Layout）；外部 JS 的加载和执行都会阻塞 DOM 构建；内联 CSS 的 CSSOM 构建会阻塞渲染树的构建，从而阻塞布局（Layout）；外部 CSS 的加载和 CSSOM 构建都会阻塞渲染树的...
复制链接

扫一扫