document.ready 和异步有什么区别？

Question

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

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

VS

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

Answer 1

为了

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

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

This attribute must not be used if the src attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect.

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

如果脚本标签did有一个src，那么async标签会异步下载脚本（HTML解析不是被阻止），然后在脚本下载后立即执行脚本（无论页面是否首先完成加载）。参见 here

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

因此，带有 src 标记的 async 脚本可能会比 $(document).ready(function(){.

执行得更快

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

Answer 2

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

的底部

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

What's the difference between document.ready and async?