结合YSlow推荐的JavaScript文件 - 最佳尺寸？ [英] Combining JavaScript files as recommended by YSlow - optimal size?

问题描述

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

We have about 30 external JavaScripts on our page. Each is already minified.

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

To reduce HTTP requests and page load time, we are considering combining them to a single file. This was recommended by the YSlow tool.

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

Is this wise, or is it better to combine them into, say, two files with 15 scripts each?

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

Is there an optimal size for the combined JavaScript files?

推荐答案

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

The fewer the HTTP requests, the better. If you want your page to work on Mobile devices as well, then keep the total size of each script node under 1MB (See http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/)

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

You might also want to check whether any of your scripts can be deferred to after onload fires. You could then make two combined files, one that's loaded in the page, and the other that's loaded after page load.

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

The main reason we ask people to reduce HTTP requests is because you pay the price of latency on each request. This is a problem if those requests are run sequentially. If you can make multiple requests in parallel, then this is a much better use of your bandwidth[*], and you pay the price of latency only once. Loading scripts asynchronously is a good way to do this.

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

To load a script after page load, do something like this:

// 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来完成。

This is called from onload, and sets a timeout for 50ms later at which point it will add a new script node to the document's body. The script will start downloading after that. Now since javascript is single threaded, the timeout will only fire after onload has completed even if onload takes more than 50ms to complete.

现在没有名为<的全局变量code> script_url ，您可以在文档的顶部放置脚本节点，但使用无法识别的内容类型，如下所示：

Now instead of having a global variable named script_url, you could have script nodes at the top of your document but with unrecognised content-types like this:

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

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

Then in your function, you just need to get all script nodes with this content type and load their srcs.

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

Note that some browsers also support a defer attribute for script nodes that will do all this automatically.

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

[*] Due to TCP window size limits, you won't actually use all the bandwidth that you have available on a single download. Multiple parallel downloads can make better use of your bandwidth.

这篇关于结合YSlow推荐的JavaScript文件 - 最佳尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！