Question

我可以说明情况之前的一些统计数据，

total JS code = 122 MB
minified = 36 MB
minified and gzip = 4 MB

我想一次性下载整个4 MB（页面上有加载进度指示器），解压缩它们，但还没解析它们。我们不希望代码在浏览器内存中扩展，此时可能不需要很多代码。当遇到具有相应js文件名的脚本标记时，应该进行解析。

意图：快速一次性下载js文件，但从浏览器角度保持行为不变。

是否存在任何此类解决方案？我甚至认为理智吗？如果是的话，我知道如何获取gzip，我想知道如何将它们保存在浏览器缓存中，这样当遇到脚本标记时，浏览器不再为它激发XMLHttpRequest。

Answer 1

诀窍是利用HTTP缓存指令。对于初学者，请查看this。您应该只需要获取一次JS代码，因为您可以安全地设置缓存指令，以指示浏览器无限期地保留JS文件（受空间限制）。在这种情况下无限期通常意味着2035年。

当您准备使用新版本的JS文件更新所有浏览器端缓存时，只需使用缓存清除查询字符串。任何序列号或时间和日期都可以，或者是简单的版本号，例如;

<script src="/js/myfile.js?v2.1"></script>

一些缩小框架会为您处理缓存破坏。例如，一个好的技术是那些MD5内容并将其用作缓存破坏者查询字符串的技术。这样，只要您的源JS更改，浏览器就会请求新版本（因为QS嵌入在您的HTML脚本标记中），然后再次缓存。

XMLHttpRequest将遵循您设置的缓存原则。

在你问题的另一部分，我相信你所问的是你是否可以下载一个组合的脚本文件，然后只在页面上用单独的脚本标签引用它的一部分。不 - 我不相信你能做到这一点。如果要引用单个文件，则需要为要分别使用的每个GZIPped内容提供HTTP URL和缓存指令。但是，根据您可以实现的并行化程度，您可能会发现这与一个大文件一样多，甚至可能更高效。

这里的一个巧妙的技巧是预先加载你需要的很多东西。 Google多年来一直在主页上这样做。基本上，他们预先加载了一堆资源（图像当然，但也可能是JS）。因此，当您考虑要输入的搜索查询时，他们已经在后续页面上加载了您想要的内容。

因此，您可以在需要之前使用XMLHttpRequest来获取JS文件（无需解析它们）。然后，当您的<script/>标记引用它们时，它们已经被下载，您只需要解析它们。

Answer 2

除了卷云关于使用HTTP缓存的观点之外，您还可以打破那个仍然非常大的4mb文件，只在需要该功能时加载它们。

这是更多的HTTP请求，但4MB是一次性的大打击。

建议在需要时将require.js加载到相应的文件中： http://requirejs.org/docs/start.html

个人JS文件XMLHttpRequest vs组合gzip下载

2 个答案: