如何在不增加 http 请求的情况下包含多个外部 javascript 文件

Posted 2023-02-16

【中文标题】如何在不增加 http 请求的情况下包含多个外部 javascript 文件

【英文标题】：How do you include multiple external javascript files without increasing http requests

【发布时间】：2015-05-18 20:31:56

【问题描述】：

我的网站有多个外部 javascript 文件，我想减少这些以提高性能。

一些外部脚本包括 typekit、google analytics、linkedin js api、twitter api 等。对于这些第三方外部 javascript 文件，在不增加 HTTP 请求的情况下包含它们的最佳方法是什么，请记住其中一些库喜欢加载到 head 标记 ( typekit ) 中。

我已尝试在本地下载、连接和托管它们，但它们似乎与我的缩小版 javascript 或其他供应商的 javascript 不兼容。有没有解决这个问题的具体方法。

我已经研究过 requirejs 之类的库，但我不确定这是否能解决这个问题。

【问题讨论】：

你可以defer许多脚本（如 GA、twitter 等），这将提供与使用 yepnope/requireJS/whatever 之类的相同的“加速”。

【参考方案1】：

不要聚合它们！

实际上，即使您有更多的 HTTP 请求，内容也会添加到浏览器缓存中并保留在那里，因为它们永远不会改变。

此外，即使您第一次访问该网站，该文件也可能已经在缓存中，因为它可能是从另一个网站加载的。

最后，请记住，每次发布新版本时，您自己的脚本都会发生变化，因此您需要从浏览器缓存中删除脚本。每次发布新版本时，外部脚本都不会更改，因此您会将它们保存在浏览器缓存中，这可能只是它们没有与您自己的脚本聚合。

【讨论】：

不错的观点，但在网络性能这样复杂的事情上过于教条。每个外部源都可能需要一个 DNS，这比等待 xfer 更能减慢加载速度。当 gzip 消耗更大的文件时，它也倾向于工作得更强大。最重要的是，我们应该严防 SPOF（尤其是头脚本），它们会阻止我们的整个站点出现，或者在外部 CDN 上等待 28 秒超时。简而言之，虽然我倾向于同意你的观点，但性能并不像你想象的那样片面，需要测试和作业才能最大限度地发挥作用。

好吧，我同意你的观点：“最佳实践”需要受到现实世界性能测试的挑战。我仍然坚信这些测试必须考虑最常见的情况：已经缓存了这些脚本的页面。现在客户端缓存还不够，我同意。

嗯。使用performance.getEntries() 查看访问者到达给定站点时确实预缓存了多少cdn 脚本会很有趣。我并不是说它不会是大多数，但是关于“缓存命中率”的真实数据会很有趣。

绝对是一个强有力的论据，我已经能够将这些脚本合并并缩小为一个包含我自己的脚本，不包括仅 typekit，但它确实增加了加载时间，我预计这是由于这个新的大型版本不是被缓存。