使用async not working $未定义

Question

如果我在脚本标记中使用async,则会出现错误,如下所示

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

该错误仅显示在chrome上

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上发现了一个类似的问题. 在其他脚本之前异步加载jquery

我不得不改变异步以推迟现在在firefox,chrome和IE9中没有更多问题.

它完全打破了IE8和IE7.如果我使用defer,jQuery就会停止工作.

Answer 1

好的......基本上......

没有ASYNC:

JS文件按顺序下载并执行顺序...即,第一个遇到的JS文件首先被下载并执行,然后是下一个等等,而此时HTML解析器被阻止,这意味着HTML呈现没有进一步的进展.

与ASYNC:

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

坏处:

然而,异步下载和执行的问题是JS文件在下载后立即执行...即,维护NO ORDER ...例如,在下载之前下载的较小JS文件(main.js)较大的文件(jQuery.js)在较大的文件之前执行.因此,如果我的较小文件引用了较大文件中初始化的某些变量/代码(jQuery的$),那么代码尚未初始化,因此会引发错误.这就是这里发生的事情.

你该怎么办:

1>删除异步属性并以较低的性能生活.
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>