document.ready 和 async 有什么区别？答案

【问题标题】：What's the difference between document.ready and async?document.ready 和 async 有什么区别？
【发布时间】：2018-12-31 02:06:34
【问题描述】：

async 中的脚本在页面加载后加载，(document).ready 在 DOM 就绪时执行脚本，但有什么区别？哪个使页面加载更快？

<script>   
  $(document).ready(function(){
    //some code
  }); 
</script>

<script async>   
    //some code
</script>

【问题讨论】：

【解决方案1】：

对于

<script async>   
    //some code
</script>

async 属性将被忽略，因为当 <script> 具有 src 属性时，async 是 only meaningful：

如果 src 属性不存在（即对于内联脚本），则不得使用此属性。如果包含在这种情况下，它将没有效果。

因此，一旦遇到标记，您问题中的<script async> 将阻止 HTML 解析 - 它根本不会异步操作。

如果脚本标签确实有src，那么async标签会异步下载脚本（不阻塞HTML解析），然后一有脚本就执行已下载（无论页面是否先完成加载）。见here

$(document).ready(function(){ 要求在包含函数运行之前触发DOMContentLoaded 事件，并且DOMContentLoaded 将仅在 HTML 被完全解析后运行（尽管不一定在所有资源都被解析之前下载，如图片等）。

因此，带有src 标签的async 脚本可能会比$(document).ready(function(){ 更快地执行。

请注意有一个defer 标签，它几乎与$(document).ready(function(){ 相同 - 带有defer 标签（和src）的脚本将运行就在DOMContentLoaded 事件触发之前。

【讨论】：

【解决方案2】：

根据 MDN，async has no effect 用于内联脚本标记，因此有效的事实可能意味着脚本恰好位于 html 的底部。

document.ready 是 jQuery 让您创建 DOMContentLoaded 侦听器的一种已弃用的方式，最好使用 jQuery(function($) {...} 并在其中包含代码。

【讨论】：