DEFER 实际上并不推迟答案

【问题标题】：DEFER not actually deferringDEFER 实际上并不推迟
【发布时间】：2018-09-11 21:54:26
【问题描述】：

最初，我将所有的 javascript 都放在了头部，但后来我注意到页面加载时间非常慢 - 这并不奇怪。因此，我将所有脚本移至底部以消除 DOM 渲染阻塞效应。

在 Google 的 PageInsights 页面上，他们说这不再是最佳做法，他们建议将脚本放在首位并添加异步加载

我遇到的问题和我的理解是，如果您使用异步，那么脚本将在完成加载后立即执行，因此您可能会遇到依赖问题 - 这正是 jQuery 和脚本所发生的依赖它。

我发现有一个类似于 async 的 defer 属性，但它将执行推迟到加载。如果是这样，为什么我仍然会遇到这些依赖错误？

它不会每次都发生。碰巧的是，有时依赖 jQuery 的脚本比 jQuery 本身加载得更快，如下所示。

我的问题是，我应该怎么做才能确保所有内容都异步加载但直到加载完成才执行？

希望这是一个简单的修复，无需大量花哨的 javascript。

【问题讨论】：

【解决方案1】：

请注意，异步脚本不保证按指定顺序执行，不应使用 document.write。依赖于执行顺序或需要访问或修改页面的 DOM 或 CSSOM 的脚本可能需要重写以解决这些限制。

简单的建议：只需将您的脚本放在底部，或者只使用 async 标签，除非它们没有任何依赖关系。

任何依赖于 Jquery 的东西都依赖于首先执行（加载）的 Jquery。

此外，最佳做法可能是对捆绑文件进行分块、对加载顺序进行微组织，并根据需要使用带有缓存破坏器的 CDN（如果您不使用版本控制），但此时这听起来像是过度优化.

或者，如果我正在查看您的代码，您需要延迟 ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js 脚本行。

【讨论】：

延迟异步下载但按顺序执行，除非脚本标签上缺少 src 属性。 [MDN][1] [1]：developer.mozilla.org/en-US/docs/Web/HTML/Element/script

【解决方案2】：

您仍在使用异步下载 jquery 脚本，请将其更改为延迟。

你可能已经知道的关于异步和延迟的一些额外细节：

异步：在浏览器渲染时下载您的脚本，然后在该脚本下载完成后停止渲染并执行它，然后继续渲染。

defer：在浏览器渲染时下载您的脚本，然后等到 DOM 完成渲染，然后再以正确的顺序执行您的脚本（仅当还有 src 属性时）。

来自MDN：

"推迟此布尔属性设置为向浏览器指示脚本将在文档被解析之后但在触发 DOMContentLoaded 之前执行。如果 src 属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下它将不起作用。

要为动态插入的脚本实现类似的效果，请改用 async=false。具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。"

【讨论】：