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

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

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

这是明智的做法，还是最好将它们组合成两个文件，每个文件包含15个脚本

---

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

当所有JavaScript组合成一个整体文件时，浏览器必须解释的JavaScript量与文件分解时的JavaScript量一样多，因此我认为这对解释和执行性能没有任何影响

---

就网络性能而言，HTTP请求越少越好。

HTTP请求越少越好。如果希望页面也能在移动设备上工作，请将每个脚本节点的总大小保持在1MB以下（请参阅）

您可能还想检查是否有脚本可以在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);
}

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

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

现在，您可以在文档顶部设置脚本节点，而不是名为

script\u url

的全局变量，但其内容类型无法识别，如下所示：

// 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);
}

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

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

请注意，一些浏览器还支持脚本节点的

defer

属性，该属性将自动执行所有这些操作

---

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

您是否需要每个请求中的所有30个文件？是的，假设“[*]由于..”注释需要所有文件+1。人们通常不会注意到这一点。加载页面后如何加载脚本？