0

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

我的理想流程：

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

我研究了可能将脚本属性的“类型”更改为text/plain但似乎这是不可能的。即使这确实有效，在我看来，我也会面临某种eval邪恶。

为什么我要这样做？我有一个很小的时间窗口，当用户键入他们的凭据时，浏览器基本上是空闲的。我想利用这段时间下载这个大库，以便抢先加载下一页。我可以通过在后台下载文件来补充浏览器的缓存，但是在浏览器接收到库并解析/执行文件后，CPU 会出现 700 毫秒的峰值。我想避免登录页面上出现这种 CPU 峰值。

您可以在此 WPT 屏幕截图的右下方看到 CPU 峰值： 在此处输入图像描述

4

1 回答 1

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

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

于 2015-01-23T21:02:19.517 回答