script 标签执行与加载时机：defer、async 和防阻塞方法

script 执行时机介绍

没有 defer 或 async

<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有 async

<script async src="script.js"></script>

有 async，会在 HTML 文档解析时并行下载文件，并在下载完成后立即执行（暂停 HTML 解析）。

有 defer

<script defer src="myscript.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行会在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

总结

对于 defer，我们可以认为是将外链的 js 放在了页面底部。js 的加载不会阻塞页面的渲染和资源的加载。不过 defer 会按照原本的 js 的顺序执行，所以如果前后有依赖关系的 js 可以放心使用

async 和 defer 一样，会等待的资源不会阻塞其余资源的加载，也不会影响页面的加载。但是有一点需要注意下，在有 async 的情况下，js 一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 js 前后有依赖性，用 async，就很有可能出错。

Defer 和 async 的相同点

• 加载文件时不阻塞页面渲染
• 对于 inline 的 script 无效
• 使用这两个属性的脚本中不能调用 document.write 方法
• 有脚本的 onload 的事件回调

Defer 和 async 的区别

• html4.0 中定义了 defer；html5.0 中定义了 async
• 浏览器支持不同
• 加载时机：
  • 具有 async 属性的脚本都在它下载结束之后立刻执行，同时会在 window 的 load 事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；
  • 具有 defer 属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在 document 的 DOMContentLoaded 之前执行。

使用这两个属性会有三种可能的情况

• 如果 async 为 true，那么脚本在下载完成后异步执行。
• 如果 async 为 false，defer 为true，那么脚本会在页面解析完毕之后执行。
• 如果 async 和 defer 都为 false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行

如何防止 inline script 造成阻塞

问题：

在有 inline script 情况下。下载缓慢的 CSS 可能会阻碍 inline script 的执行。而这又可能阻碍之后的 async script 下载与执行

举个例子：(这里css.php下载缓慢。)

  <link rel="stylesheet" href="css1.css.php" type="text/css" />
  <script src="js1.js" async></script>
  <script>console.log('inline script 1 ' + (+new Date - start));</script>
  <link rel="stylesheet" href="css2.css.php" type="text/css"/>
  <script src="js2.js" async></script>
  <script>console.log('inline script 2 ' + (+new Date - start));</script>

输出结果：

external script 1 87
inline script 1 5184
external script 2 5186
inline script 2 10208
DOMContentLoaded 10216
onload 10227

原因分析：

js1 下载执行正常。但是内联 script 和第二个外部 script 因为第一个 CSS 文件（css1.css.php）的缓慢而延迟。DOMContentLoaded 也被阻塞了。 因为内联 script 可能会请求布局信息，为了使其工作，所以要等待 css 下载应用完成。而这又会 block 后续的 async script 的加载。

解决方案：

1. 把inline script移到页面底部。虽然这仍然阻碍渲染，但是不会阻碍页面资源的下载
2. 使用setTimeout启动长时间执行的代码
3. 有一种方法可以使 inline script 以非 inline 的行为处理：将src指向 data：URI。并不需要进行base64编码

把原来的内联 script：

<script>console.log('inline script 1 ' + (+new Date - start));</script>

改写成：

<script async src="data:text/javascript,console.log%28%27inline%20script%201%20%27%20%2B%20%28%2Bnew%20Date%20-%20start%29%29%3B"></script>

这样就可以避免下载缓慢的 css 造成 inline script 对其它 script 文件下载的阻塞。

参考

script中defer和async的区别

Asynchronous inline scripts via data: URIs

Positioning Inline Scripts