script中的async和defer

ゞ浴缸里的玫瑰 2022-05-24 01:29 168阅读 0赞

在<script>中有两个属性，async和defer。前者指示浏览器是否在允许的情况下异步执行该脚本；后者被设定用来通知浏览器该脚本将在文档完成解析后，触发DOMContentLoaded事件前执行。它们都对内联脚本无作用（即没有src属性的脚步）。

在[Asynchronous and deferred JavaScript execution explained][]中解释为：

![70][]

也就是说：

script：当执行当前脚本时会停止对html的解析，对于很慢的服务器和需要引入大量脚本的页面来说，网页将会延迟显示。

defer：html解析完成后才会执行当前脚本。一个好处是你脚本中所用到的DOM元素一定是加载好的，所以不用担心脚本中的代码不执行。但是并不是所有浏览器都支持这个属性。

async：只要脚本下载好了，就开始执行脚本内容，它是异步的，所以html文件也会继续解析。

一般来说，如果你的第二个脚本依赖于第一个脚本，那么如果没有额外的代码来控制执行顺序，则不能使用async，但是可以使用defer，因为defer在文档解析完成后仍会按顺序执行。

async更有用。当不在乎脚本何时加载，并且没有任何依赖时最好使用异步。

如果页面中有jQuery时不适合async，因为其他脚本依赖于它。如果一定要使用async，则必须对其他脚本进行处理，直到加载好jQuery后才能执行它们。

按步骤看它们的执行顺序：

停止解析DOM——下载script.js——执行script.js——继续解析DOM。

（不考虑有async文件存在的问题）

1）、解析DOM，同时下载defer1.js、defer2.js；

2）、解析DOM，js文件下载完成；

3）、解析DOM完成（在这之前如果有普通script.js会停下来执行后再继续解析DOM）；

4）、依次执行defer1.js、defer2.js；

5）、执行[DOMContentLoaded事件][DOMContentLoaded]。

1）、解析DOM，同时下载defer1.js、defer2.js；

2）、解析DOM，js文件下载完成；

3）、停止解析DOM，执行两个js文件，两者执行顺序、阶段都不确定，与DOMContentLoaded事件的执行顺序也不确定，但一定在页面load之前；

4）、继续解析DOM。

但是《JavaScript高级程序设计》第三版中也明确指出，在现实当中，defer并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个defer脚本。具体可从下面案例中看到：

案例1：

//defer.js
    alert("defer");

//async.js
    alert("async");

//script.js
    alert("script");

执行上面的代码可以发现，不论async.js在defer.js前面还是后面，执行顺序都是script——defer——async。

下面两个案例的执行顺序不定，都可能出现在最前，也都可能出现在最后。与加载速度、async执行顺序不定都相关。

案例2:

//defer.js
    alert("defer");

//async.js
    var defer;

//script.js
    var script;

案例3:

//defer.js
    var defer;

//async.js
    var defer;

//script.js
    var script;

[Asynchronous and deferred JavaScript execution explained]: https://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
[70]: /images/20220524/874b2ccd2eb54cbf87fccbb6a2fbd366.png
[DOMContentLoaded]: https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded