异步/延迟 JavaScript 问题

Question

我在页脚使用这段代码来消除渲染阻塞资源

<script async or defer src="/jquery.js">
 /* custom code  */
<script>    
$(document).ready(function(){
$('.menu-bar').click(function(){
   $('.nav-bar').slideToggle();
  }); 
  $('.dropdown').click(function(){
      $(this).toggleClass('inDrop');
      $('.dropdown-menu').slideToggle('slow');
  });

});
</script>

现在我收到 Uncaught ReferenceError: $ is not defined 错误。

使用异步/延迟的最佳方式是什么JavaScript

Answer 1

异步很难，因为它会在完成的那一刻执行，所以您无法确定脚本完成检索的顺序。和defer相比也是微不足道的，会等到HTML解析完才开始，然后按顺序开始

这里有两种情况：

<HTML start>
<async js 1>
<async js 2 (dep on 1)>
<HTML parses>
<js 2 finishes and executes>
<js 1 finishes and executes>
<HTML finishes parsing>

推迟：

<HTML start>
<defer js 1>
<defer js 2 (dep on 1)>
<js 2 loads, and waits>
<js 1 loads, and waits>
<HTML finishes parsing>
<js 1 is fired>
<js 2 is fired>

您可以保留对 defer 的依赖。我 99.9% 的时间都使用 defer，而且只有在你的脚本顺序不重要的情况下。

如果您需要内联 js 等待直到加载依赖项，您将等待文档就绪状态。

jQuery:

`$(document).ready(function() {
  ...code here...
};`

香草 JS：

`document.addEventListener("DOMContentLoaded", function() {
  ...code here...
};`

异步/延迟 JavaScript 问题

Asynchronous / Deferred JavaScript issue

javascript

jquery

async-await

jquery-deferred