如何在不解析的情况下下载 JavaScript 文件？

Question

为了提高性能，我想在我的登录页面上预取一个 1.2 MB 的遗留 JavaScript 库。只有在用户登录后才需要这个库。WebPageTest 告诉我 Chrome 它需要大约 700ms CPU 来处理文件下载后。是否可以在用户的浏览器上缓存文件，但不是 execute/parse JavaScript?

我的理想流量：

加载登录页面
使用script标签的async和defer属性异步加载js库
- 不解析，直到用户登录后才真正使用该库
用户登录
加载用户的主页并从缓存中加载 js 库（如果存在，否则从服务器获取 - 而不是异步）并解析
- 这里我只想支付700ms的解析时间

我研究了将脚本属性的 "type" 更改为 text/plain 的可能性，但似乎 this is not possible。即使这确实有效，在我看来我也会面临某种 eval 邪恶。

为什么我要这样做？我有一小段 window 的时间，浏览器在用户键入其凭据时基本上处于空闲状态。我想利用这段时间下载这个大图书馆，以便抢先加载下一页。我可以通过在后台下载文件来补充浏览器的缓存，但是在浏览器收到库和 parses/executes 文件后 CPU 中会出现 700 毫秒的峰值。我想避免登录页面上出现这种 CPU 峰值。

您可以在这个 WPT 屏幕截图的右下角看到 CPU 尖峰：

Answer 1

尝试使用 XMLHttpRequest:

var req = new XMLHttpRequest();
req.open("GET", "/path/to/your/script.js");
req.send(); // This line fetches the file

如果你想对这个文件的内容做些什么，在 .send() 行之前设置 req.onload：

var req = new XMLHttpRequest();
req.open("GET", "/path/to/your/script.js");
req.onload = function()
{
    console.log(this.response);
}
req.send(); // This line fetches the file

最后，在服务器端，确保文件是可缓存的。

如何在不解析的情况下下载 JavaScript 文件？

How to download a JavaScript file without parsing it?

javascript

performance

webpagetest