为什么Chrome似乎异步请求Javascript文件

Why Chrome seems requesting Javascript files asynchronously?

本文关键字：请求 Javascript 文件 异步 Chrome 为什么      更新时间：2023-09-26

鉴于我的HTML页面请求3个脚本文件：

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<link rel="stylesheet" type="text/css" href="d.css"/>

到目前为止，我的理解是浏览器请求a.js并且文档在下载并执行之前不会进一步解析a.js（脚本标签上没有异步属性的默认行为）。

但是现在查看Chrome开发人员工具，选中了"加载"框的时间轴选项卡，我查看并得到了以下内容：

Send Request (this is request for HTML page itself)
Receive data
Receive data
Receive data (this are pockets coming if I understand correctly)
Finish Loading (here page is loaded now)
Parse HTML (now browser starts reading actual HTML code)
Send Request (a.js)

现在，在这里，我希望浏览器停止所有内容并等到a.js完全下载，然后执行，然后才开始进一步解析 HTML 并读取 b.js 和其余部分）但是，我进一步具有此输出：

Send Request b.js (Why is this happening, a.js is not finished loading yet)
Send Request c.js (again why?)
Send Request d.css

只有在某个时候我才得到：

Finish Loading a.js

浏览器执行a.js，然后才按照 html 中SCRIPT标签的顺序执行其他文件（如果已下载）。

现在我的问题是，如果a.js没有完全下载和执行，浏览器如何知道请求b.js、c.js和css文件？Chrome 是否应用了一些魔法来优化和加快流程？如果运行时a.js修改并删除SCRIPT标记的其余部分怎么办？那么请求是否被浪费了？还是我只是读错了输出？

答：因为每个JS文件都是在HTML中指定的。浏览器会尝试批量下载尽可能多的下载以节省时间。从您右键单击某些内容并选择"将链接另存为"的那一刻起，它正在下载 - 即使您尚未指定文件名。如果您点击取消而不是指定名称/位置，那么您已经浪费了已经下载的任何内容。

Chrome 对网页中的资源应用了类似的政策。如果 a.js 删除任何/所有后续脚本标签，那么是的 - 它们的下载是徒劳的。

另一种方法是具有断断续续的性能。

如果要下载多个内容，浏览器通常会并行下载其中的几个。并行下载的确切数量可能因浏览器而异。

注意：CSS 应该在 JS 之前，以便从并行下载中获得最大收益。

相关文章：