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

Question

为了提高性能，我想在我的登录页面上预取1.2 MB的旧版JavaScript库。只有在用户登录后才需要此库.WebPageTest向我显示Chrome下载后需要大约700ms的CPU来处理文件。是否可以在用户的​​浏览器上缓存文件，但不能执行/解析JavaScript？

我理想的流程：

• 加载登录页面
• 使用脚本标记的async和defer属性异步加载js库
  • 不解析，直到用户登录
  之后才实际使用该库
• 用户登录
• 加载用户的主页＆amp;从缓存加载js库（如果存在，否则从服务器获取 - 不是异步）并解析
  • 我只想在这里支付700毫秒的解析时间

我调查了可能改变＆＃34;类型＆＃34;脚本属性为text/plain，但似乎this is not possible。即使这确实有效，在我看来我也会遇到某种eval邪恶。

为什么我要这样做呢？我有一个小窗口的时间，当用户键入他们的凭据时，浏览器基本上处于空闲状态。我想利用这段时间下载这个大型图书馆，以便开始加载下一页。我可以通过在后台下载文件来保存浏览器的缓存，但是在浏览器收到库并解析/执行文件后，CPU会出现700ms的峰值。我想在登录页面上避免这个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

如果您想对此文件的内容执行某些操作， 在req.onload行之前设置.send()：

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

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