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

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

这个问题在网上有说同步也有说异步的，在 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）：

  
  
  
  



  
hello world
  
  
hello html

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

火狐浏览器

谷歌浏览器

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

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

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

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

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

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

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

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

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

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

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

  
  
  
  
  



  
hello world
  
  
  

  
  

  
  

  
hello html

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

  
  
  
  
  
  



  
hello world
  
hello html

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

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

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

以上都是宏观观察得出的结论，下一篇文章将会通过chrome调试工具来验证上面的结论是否正确。