依赖顺序的异步 Javascript 个文件

Question

当使用 PageSpeed Insights 评估我的网站的性能时，我得到了 70/100，建议我应该使 jquery 和 bootstrap.js 异步以提高性能。

问题是异步脚本不能保证按指定的顺序执行。我之前遇到一个问题，如果 bootstrap 加载时未加载 jquery，则展开导航栏菜单的按钮不起作用。

如何强制 jquery 在 bootstrap 之前加载，但仍能获得异步脚本的好处？

Answer 1

这基本上是说你的Javascript在加载页面之前被执行，你可以将javascript移动到你的html的底部（所以它会在页面加载之后执行被渲染）或者使用 defer 属性，效果基本相同。

<script src="anything.js" defer></script>

Answer 2

您可以用一个函数包装所有 jquery 依赖的代码。并设置一个间隔工作程序，它将检查是否已加载所有依赖项。

var worker = function() {
  if(window.jQuery /* and other stuff */) {
    dependenciesLoaded(); /* your app wrapper */
  } else {
    setTimeout(worker, 30); 
  }
}; 

worker();

虽然很脏的解决方案。期待将您的脚本捆绑到一个或具有依赖关系管理的库中。

Answer 3

你应该看看：http://requirejs.org。这将允许您调用每个页面所需的 js 文件，并且它已经是异步的。

依赖顺序的异步 Javascript 个文件

Async Javascript files that depend on order

javascript

jquery

asynchronous

pagespeed

twitter-bootstrap