具有异步属性的脚本元素仍会阻止浏览器渲染？答案

【问题标题】：script element with async attribute still block browser render?具有异步属性的脚本元素仍会阻止浏览器渲染？
【发布时间】：2014-04-13 04:47:56
【问题描述】：

我使用cuzillion 工具构建了一个page：

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

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

但 Chrome 中的页面加载时间线是：

脚本执行的时候，还是会阻塞浏览器的渲染进程？

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

但是它不会阻塞解析器：

【问题讨论】：

AFAIK，javascript 从不与渲染页面并行运行。您实现的不是阻塞解析器或其他资源的负载。那是因为异步脚本不能使用document.write。不过，我很好奇更完整的答案。好问题！

【解决方案1】：

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

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

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

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

更多关于here。

【讨论】：