具有async属性的script元素仍然阻止浏览器渲染？

Question

我使用cuzillion工具构建一个页面:

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

头部只有一个脚本元素,具有异步属性和2秒延迟,执行3秒.

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

在此输入图像描述

当脚本执行时,它仍然阻止浏览器渲染过程？

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

但是它不会阻止解析器:

在此输入图像描述

Answer 1

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

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

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

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

更多关于这里。