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

Question

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

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

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

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

Answer 1

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

您可能还想检查是否可以在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窗口大小限制,您实际上不会使用单次下载时可用的所有带宽.多个并行下载可以更好地利用您的带宽.