当前位置：文江博客话题详情

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

发布于 2024-09-10 23:55:27 字数 189 浏览 7 评论 0原文

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

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

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

合并的 JavaScript 文件是否存在最佳大小？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沐歌 2024-09-17 23:55:27

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 窗口大小限制，您实际上不会在一次下载中使用所有可用带宽。多个并行下载可以更好地利用您的带宽。

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

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.

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

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.

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="...">

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

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

[*] 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.

回复收藏 0 原文