javascript - 使用异步不起作用 $ 未定义

Question

如果我像下面这样在脚本标签中使用异步，我会遇到错误

<script async src="main.js"></script>

错误仅显示在 chrome saying 上

Uncaught ReferenceError: $ is not defined

如果我从脚本标签中删除异步，我的控制台中就不会再出现错误，并且一切正常。

你知道为什么会遇到这个问题吗？

编辑

下面的脚本放在head标签内

<!-- JS -->
<script async src="../js/jquery/jquery-1.10.1.min.js">    </script>
<script async src="../js/vendor/modernizr-2.8.2.min.js"></script>

<script async src="../js/asynchronous-resources/2014-06-03-asynchronous-resources.js"></script>

<!-- IE JS -->
<!--[if !IE]><!--><script async src="../js/ie10.js"></script><!--<![endif]-->

main.js 添加到页脚。

<script async src="../js/main.js"></script>

我在 stackoverflow 上发现了一个类似的问题。 Load jquery asynchronously before other scripts

我不得不更改 async 以延迟，现在在 firefox、chrome 和 IE9 中不再有问题。

顺便说一句，它在 IE8 和 IE7 中完全崩溃了。如果我使用 defer，jQuery 将停止工作。

Answer 1

好吧……所以基本上...

没有异步:

JS 文件按顺序下载和执行...即，第一个遇到的 JS 文件首先下载和执行，然后是下一个，依此类推，而此时 HTML 解析器被阻止，这意味着没有进一步的进展HTML 渲染。

使用异步:

JS 文件[全部] 遇到时进行异步下载，并在完全下载后立即执行。 HTML 解析器在下载时不会被阻止。因此 HTML 呈现更加先进。

缺点:

然而，异步下载和执行的问题是 JS 文件在下载后立即执行......即，不保持顺序......例如，一个较小的 JS 文件(main.js)获取在较大文件(jQuery.js)执行之前下载。所以，如果我的小文件引用了一些在大文件中初始化的变量/代码($ of jQuery)，唉，代码还没有被初始化，因此会抛出一个错误。这就是这里正在发生的事情。

你应该做什么:

1> 移除 async 属性并以较低的性能运行。
2> 使用保持执行顺序的脚本动态加载。默认情况下，动态脚本是异步下载的，但与 DOM 解析分开执行，因此不会阻塞 HTML 渲染。在此，通过写作

script.async = false; 

我们强制这些按顺序下载和执行。

<script type="text/javascript">
[
  'jQuery.js',
  'main.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false; 
  document.head.appendChild(script);
});
</script>