3

我们的页面上有大约 30 个外部 JavaScript。每个都已经缩小了。

为了减少 HTTP 请求和页面加载时间，我们正在考虑将它们合并到一个文件中。这是 YSlow 工具推荐的。

这是明智的，还是将它们组合成两个文件，每个文件有 15 个脚本更好？

组合的 JavaScript 文件是否有最佳大小？

4

2 回答 2

9

HTTP 请求越少越好。如果您希望您的页面也可以在移动设备上运行，则将每个脚本节点的总大小保持在 1MB 以下（参见http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-限制重新访问/）

您可能还想检查在 onload 触发后是否可以推迟任何脚本。然后，您可以制作两个组合文件，一个在页面中加载，另一个在页面加载后加载。

我们要求人们减少 HTTP 请求的主要原因是您为每个请求付出了延迟的代价。如果这些请求按顺序运行，则会出现问题。如果您可以并行发出多个请求，那么这将更好地利用您的带宽[*]，并且您只需支付一次延迟的代价。异步加载脚本是一个很好的方法。

要在页面加载后加载脚本，请执行以下操作：

// This function should be attached to your onload handler
// it assumes a variable named script_url exists.  You could easily
// extend it to use an array of scripts or figure it out some other
// way (see note late)
function lazy_load() {
    setTimeout(function() {
            var s = document.createElement("script");
            s.src=script_url;
            document.body.appendChild(s);
        }, 50);
}

这是从 onload 调用的，并在 50 毫秒后设置超时，此时它将向文档的正文添加一个新的脚本节点。之后脚本将开始下载。现在由于 javascript 是单线程的，超时只会在 onload 完成后触发，即使 onload 需要超过 50 毫秒才能完成。

script_url现在，您可以在文档顶部放置脚本节点，但可以使用无法识别的内容类型，而不是使用名为 的全局变量：

<script type="text/x-javascript-deferred" src="...">

然后在您的函数中，您只需要获取具有此内容类型的所有脚本节点并加载它们的 src。

请注意，某些浏览器还支持defer脚本节点的属性，该属性将自动完成所有这些操作。

[*] 由于 TCP 窗口大小限制，您实际上不会在一次下载中使用所有可用带宽。多个并行下载可以更好地利用您的带宽。

于 2010-07-21T06:46:08.057 回答
2

浏览器在将它们全部组合成一个单一文件时必须解释与文件被分解时一样多的javascript，所以我想说这对于解释和执行性能根本不重要。

对于网络性能，HTTP 请求越少越好。

于 2010-07-20T15:38:21.183 回答