Javascript 使用异步和延迟按顺序加载脚本

因此，我遵循Google PageSpeed的建议，推迟上述折叠脚本。假设这是我的

中的代码：

functions.js

脚本依赖于jQuery，因此在

functions.js

之前加载并执行

jQuery.js

至关重要

我尝试的是： 推迟

虽然这可以正常工作并且

functions.js

可以正确执行，但是当我加载页面时，我看到它闪烁，好像CSS还没有加载。请注意，上述代码位于

中。如果我从

jquery.js

中删除

defer

属性，闪烁就会消失。这就引出了我的问题：

混合

---

在依赖项脚本上使用

async

和在依赖项脚本上使用

defer

是否确保它们始终按该顺序执行？在我的测试中，它似乎可以工作，但我对解析器的工作原理了解不够，因此无法确定。

是的，在chrome上，有时在Firefox上

---

说明书上说他们将按顺序加载，但是loaded意味着downloaded未执行，因此如果文件在其他文件之前完成下载，它将首先运行，因此我不建议您使用defer或async属性依赖于执行顺序。答案是，如果您使用

async

或

defer

，您将无法保证脚本的执行顺序

async

脚本是异步执行的，不能保证执行的顺序<代码>延迟脚本在解析文档后执行，但无法保证它们是否会按顺序执行。（具体看一看。）

不幸的是，在您的情况下，必须通过删除

defer

和

async

属性来同步运行

jquery.js

---

展望未来，当我们转向模块时，指定依赖项并及时（而且只加载一次）加载它们将变得更加容易。

尽管我不确定当前浏览器如何实现该标准，但对于脚本（不带type=“module”的经典脚本元素）和模块的执行顺序有最低限度的保证（类型为module的脚本元素）

1） 未指定延迟或异步的经典脚本将按照它们在html文档中出现的顺序（在解析文档时）执行。它们在延迟的经典脚本和非异步的模块之前执行

2） 延迟的经典脚本和非异步的模块将按照它们在html文档中出现的顺序执行（在解析文档之后）

---

请参见此处处理模型的第20点：

我还没有研究模块。也许在我的下一个项目中，我会检查ECMAScript标准是怎么说的。如果不想用

async

或

defer

加载脚本，监听它的

load

事件，一旦触发，就创建另一个依赖于前一个事件的

，依此类推。