javascript - DEFER 实际上并未推迟

Question

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

在 Google 的 PageInsights 页面上，他们表示这不再是最佳实践，他们建议将脚本放在头部并添加异步加载

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

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

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

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

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

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

希望这是一个简单的修复，不需要大量花哨的 JavaScript。

Answer 1

Note that asynchronous scripts are not guaranteed to execute in specified order and should not use document.write. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.

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

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

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

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