javascript - 具有异步属性的脚本元素仍然阻止浏览器呈现？

我使用 cuzillion工具构建 page :

<head>
  <script async></script>
</head>
<body>
   <img />
   <img />
   <img /> 
</body>

head中只有一个script元素，有async属性，延迟2秒，3秒执行。

但是 Chrome 中的页面加载时间轴是:

enter image description here

当脚本执行时，它仍然阻塞浏览器渲染进程？

但是为什么？它不应该异步执行吗？

但是它不会阻塞解析器:

enter image description here

最佳答案

任何脚本的执行总是会阻止同一选项卡中其他脚本的解析、呈现和执行。 async 属性不会改变这一点。

async 所做的唯一一件事就是告诉浏览器应该获取脚本(假设它是一个远程文件)而不阻止这些事件。

下载脚本后，脚本会在下一个可用机会开始执行(即，在当前脚本(如果有)完成运行之后；当然，新脚本不会中断正在运行的脚本)。一旦发生这种情况，您的渲染就会被阻止。因此，对于一个快速的网络服务器，下载发生得如此之快以至于 async 没有任何区别。

如果您不希望脚本暂停渲染，请使用 defer 属性而不是 async。这将延迟脚本的执行，直到文档完全加载之后。

关于此的更多信息 here .

关于javascript - 具有异步属性的脚本元素仍然阻止浏览器呈现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22294131/