javascript - 按照 YSlow 的建议组合 JavaScript 文件 - 最佳大小？

Question

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

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

这是否明智，或者将它们组合成两个文件(每个文件包含 15 个脚本)是否更好？

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

Answer 1

HTTP 请求越少越好。如果您希望您的页面也能在移动设备上运行，请将每个脚本节点的总大小保持在 1MB 以下(参见 http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/)

您可能还想检查您的任何脚本是否可以延迟到 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 窗口大小限制，您实际上不会在单次下载中使用所有可用带宽。多个并行下载可以更好地利用您的带宽。