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具有<script>属性时，src是only meaningful：

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

因此，您遇到的问题<script async>将在遇到标记后阻止HTML解析-它根本不会异步运行。

如果脚本标签 did 具有src，则async标签将异步下载脚本（不阻止HTML解析），然后按以下方式执行脚本脚本下载完成后（页面是否首先完成加载）。参见here

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

因此，带有async标签的src脚本的执行时间可能早于$(document).ready(function(){。

请注意，有一个defer标记，与$(document).ready(function(){ 几乎相同-一个带有defer标记（和{{1 }}）将在src事件触发之前运行。

Answer 2

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

document.ready是jQuery允许您创建DOMContentLoaded侦听器的一种不建议使用的方法，最好执行org.hibernate.TransientPropertyValueException: object references an unsaved transient instance - save the transient instance before flushing : package.VehicleStatus.vehicleTire -> package.Tires并在其中包含代码。

document.ready和async有什么区别？

2 个答案: