DEFER实际上并没有推迟

Question

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

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

https://developers.google.com/speed/docs/insights/BlockingJS

我遇到的问题和我的理解是，如果你使用async，那么脚本会在完成加载后立即执行，因此你可能会遇到依赖性问题 - 这正是jQuery和脚本所发生的事情。取决于它。

https://calendar.perfplanet.com/2016/prefer-defer-over-async/

我发现有defer属性就像异步但它会延迟执行直到加载。如果是这种情况，为什么我仍然会遇到这些依赖性错误？

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

我的问题是，我该怎样做才能确保所有内容都异步加载但在加载完成之前不会执行？

希望这是一个简单的修复，没有大量花哨的JavaScript。

Answer 1

  

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

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

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

另外，最佳做法可能是对一个包文件进行分块，对加载序列进行微观组织，并根据需要使用带有缓存存根器的CDN（如果您不使用版本控制），但这听起来像是过度优化。

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

Answer 2

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

您可能已经知道的有关异步和延迟的一些额外详细信息：

async：在浏览器渲染时下载脚本，然后在完成一个脚本的下载并执行后停止渲染，然后继续渲染。

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

来自MDN：

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

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