[JavaScript知识库] js和css会不会阻塞页面渲染？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js和css会不会阻塞页面渲染？ -> 正文阅读

[JavaScript知识库]js和css会不会阻塞页面渲染？

一、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 的脚本会阻塞页面渲染。