以正确的方式异步加载JS文件.如何

Question

我有几个CDN文件，我在标题中调用它们

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

毕竟我所有的 js 文件取决于这个库，但谷歌的页面速度抱怨这些脚本是页面加载的阻塞者。所以我试图将所有内容放在正文关闭之前，但在这种情况下，我将破坏所有脚本，因为它们依赖于 jquery。

我尝试使用defer但就像页脚中的问题一样。如何加载异步 JavaScript 库以免打破漏洞？

Answer 1

一般的解决方案是使用异步模块加载，如 RequireJS。下面是一个 jQuery 集成案例：http://requirejs.org/docs/jquery.html

考虑到"但在这种情况下，我会破坏所有脚本，因为它们依赖于 jquery"，您可以在 JS 代码中添加检查，例如：

$(document).ready(function(){
  //your jQuery-based code
})

//if jQuery loading failed
if(!window.jQuery){
}

Answer 2

您可能想查看来自同一主机的文件数量。看看这个。

Answer 3

你想要实现的是AMD（异步模块定义）

异步模块定义 （AMD） 是一个 JavaScript 规范，它定义了一个 API，用于定义代码模块及其依赖项，并在需要时异步加载它们。 阅读更多：https://en.wikipedia.org/wiki/Asynchronous_module_definition

有一堆框架可以做到这一点：

• 需要 JS - http://requirejs.org
• 道场工具包 - https://dojotoolkit.org

或者您可以使用此方法手动加载 JS 文件（不推荐）：https://stackoverflow.com/a/7719185/1502230