Question

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

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

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

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

Answer 1

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

您可能还想检查是否可以在onload fires之后将任何脚本推迟到。然后，您可以创建两个组合文件，一个在页面中加载，另一个在页面加载后加载。

我们要求人们减少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调用的，并在50ms之后设置超时，此时它将向文档的正文添加一个新的脚本节点。之后脚本将开始下载。现在因为javascript是单线程的，所以只有onload完成后才会触发超时，即使onload需要超过50ms才能完成。

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

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

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

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

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

Answer 2

当浏览器全部合并到一个单片文件中时，浏览器必须解释同样多的javascript，就像文件被分解时一样，所以我认为它对解释和执行性能无关紧要。

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

结合YSlow推荐的JavaScript文件 - 最佳尺寸？

2 个答案: