依赖于订单的异步Javascript文件

Question

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

问题是异步脚本无法保证按指定顺序执行。我之前遇到的问题是，如果在引导程序加载时没有加载jquery，则展开导航栏菜单的按钮不起作用。

如何在引导程序之前强制加载jquery但仍然可以获得异步脚本的好处？

Answer 1

它基本上说你的Javascript在加载页面之前正在执行，你可以将javascript移动到html的底部（因此它将在页面呈现后执行）或使用defer属性，即基本相同的效果。

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

Answer 2

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

Answer 3

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

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

worker();

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