javascript - document.ready 和 async 有什么区别？

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属性将被忽略，因为 async是 only meaningful当 <script>有一个src属性:

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 解析 - 它根本不会异步操作。

如果脚本标签确实有src ，然后 async tag会异步下载脚本(不阻塞HTML解析)，脚本下载完成后立即执行脚本(无论页面是否先加载完毕)。请参阅here

$(document).ready(function(){需要 DOMContentLoaded在包含函数运行之前触发的事件，并且 DOMContentLoaded仅当 HTML 被完全解析后才会运行(尽管不一定是在所有资源下载完成之前，例如图像等)。

所以，async带有 src 的脚本标记可能会早于 $(document).ready(function(){ 执行.

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