js和css会不会阻塞页面渲染？

八十岁徒步环游地球

已于 2023-02-02 14:21:17 修改

阅读量2.2k

点赞数

文章标签： javascript css 前端

于 2022-06-27 13:44:20 首次发布

本文链接：https://blog.csdn.net/qq_44318215/article/details/125392575

版权

一、js和css会不会阻塞页面渲染？

为了能搞明白这个问题，我们需要先了解 html 里 link 标签、script 标签加载的同步和异步问题。

1、link标签是同步还是异步？

这个问题在网上有说同步也有说异步的，在 HTML 规范的 4.2.4.3 小节中写到：

User agents may opt to only try to fetch and process such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied.

这意味着 link 标签的加载机制是由浏览器决定的，不同的浏览器可能有不同的表现。

可以看个例子（注：请开启Disable cache）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="woo-spinner-filled">hello world</div>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
  <div>hello html</div>
</body>

</html>

把上面这段代码拿到 Firefox 和 Chrome 中执行，就会出现不太一致的表现。为了使现象更加清楚，可以把网络设置成 Slow 3G 或 Regular 2G。

火狐浏览器

谷歌浏览器

可以得出结论，link标签引入css资源时在火狐浏览器中是异步加载的，在谷歌浏览器中是同步加载的。但如果是通过style标签引入样式，则不论何种浏览器，均为同步加载。

2、link标签应该放在什么位置？

答案是显而易见的，要放到 head 标签里。那能不能放到 body 标签里呢？在 MDN 文档里提到：

< link>元素可以出现在< head>元素或者< body>元素中，具体取决于它是否有一个body-ok的链接类型。例如，stylesheet链接类型是 body-ok 的，因此< link rel=“stylesheet”>允许出现在 body 中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的< link>元素从你的 body 内容中分离出来，将其放在< head>中。

里面明确的指出了不要放在 body 里面，这么做目的一是为了防止闪屏现象（由于火狐浏览器的 link 是异步加载的，所以并不能完全解决闪屏问题，后续会讲怎么搞），目的二是为了减少不必要的重排和重绘。大家有兴趣的可以观察一下京东官网和本文在 Slow 3G 下的表现，不过得益于目前的网速很快，这种现象不是很明显了。

3、js的同步和异步

在阮一峰老师的ES6标准入门（第3版）中写到，默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到 script 标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载。

给 script 标签添加 defer 或 async 属性，脚本就会异步加载（注：异步加载只对外部脚本生效，具有 src 属性会导致内嵌脚本失效），defer 要等到整个页面在内存中正常渲染结束，才会执行；async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

根据实测，设置了 defer 会等待样式资源、dom结构加载完成之后才会执行，但不会等待图片加载完成。

那么推荐把 script 标签放在哪里呢？这个就要具体问题具体分析了。若脚本需要操作dom，则放在 body 闭合标签之前；若脚本需要尽早执行，则放在 head 标签里。

请在火狐浏览器将网速调低后，分别测试以下三个版本的代码：

// log.js
console.log(123);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>

<body>
  <div class="woo-spinner-filled">hello world</div>
  
  <!-- 版本1 -->
  <script src="./log.js"></script>

  <!-- 版本2 -->
  <!-- <script src="./log.js" async></script> -->

  <!-- 版本3 -->
  <!-- <script src="./log.js" defer></script> -->

  <div>hello html</div>
</body>

</html>

我们可以得出结论， link 标签会阻塞 js 的执行，但只会阻塞同步 js 的执行，同时阻塞页面的渲染。所以防止闪屏的终结解决方案则是在 link 标签后加任意同步 js 代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
  <script>
    // any code
  </script>
</head>

<body>
  <div class="woo-spinner-filled">hello world</div>
  <div>hello html</div>
</body>

</html>

4、js和css会不会阻塞页面渲染？

经过以上的讨论，这个问题的结论如下：

1）通过 style 标签引入的样式和同步加载的 link 标签会阻塞页面渲染，但异步加载的 link 标签则不会。

2）js 脚本可以通过添加 async 或 defer 的方式来开启异步下载，开启异步下载则不会阻塞页面渲染，但下载完成后，加 async 的脚本会立即执行，执行时会阻塞页面渲染；而加 defer 的脚本会等样式、dom结构加载完成后才会执行，此时页面已经渲染完了。所以只有同步脚本和个别情况下加了 async 的脚本会阻塞页面渲染。

3）如果是通过document.createElement(“script”)动态添加的脚本，会默认携带async属性。参考：动态插入的script脚本执行时间