javascript - 改善 Javascript 加载时间 - 串联与多个 + 缓存

Question

我想知道以下哪一项会为加载大量 javascript(jQuery + jQuery UI + 各种其他 javascript 文件)的页面带来更好的性能。我已经浏览了大部分 YSlow 和 Google Page Speed 内容，但我对一个特定的细节感到好奇。

对我来说，关键的一点是我正在工作的网站不在公共(public)网络上；这是一个企业对企业的平台，几乎所有用户都是重复访问者(因此有数据缓存，YSlow 认为对于大量访问者来说不会出现这种情况)。

首先，YSlow 等工具推荐的标准方法是将其连接、压缩，然后将其提供在页面末尾加载的单个文件中。这种方法听起来相当有效，但我认为这里推理的关键部分是提高没有缓存数据的用户的性能。

我目前的系统是这样的

• 所有 JavaScript 文件都被压缩并加载到页面底部
• 所有 JavaScript 文件都具有遥远的缓存到期日期，因此(对于大多数用户)将在缓存中保留很长时间
• 页面仅加载它们需要的 JavaScript 文件，而不是加载一个整体文件，其中大部分文件都不需要

现在，我的理解是，如果 JavaScript 文件的缓存过期日期尚未到达，则立即使用缓存版本；根本没有向服务器发送 HTTP 请求。如果这是正确的，我会认为拥有多个标签不会导致任何性能损失，因为我在大多数页面上仍然没有任何额外的请求(从上面回想一下，几乎所有用户都填充了缓存)。

除此之外，不加载 JS 意味着浏览器不必解释或执行所有这些它不需要的额外代码；作为一个 B2B 应用程序，不幸的是，我们的大多数用户都被 IE6 及其慢得令人痛苦的 JS 引擎所困扰。

另一个好处是，当代码更改时，只需要再次获取受影响的文件，而不是整个文件集(当然，只需要获取一次，所以这并不是什么好处)。

我也在考虑使用LabJS允许在未缓存 JS 时并行加载 JS。

具体问题

• 如果有很多标签，但所有文件都从本地缓存加载，并且总体加载的 javascript 较少，这是否会比也从缓存加载但包含所有文件的一个标签更快？网站上任何地方都需要 javascript，而不是适当的子集？
• 还有其他理由选择其中一种而不是另一种吗？
• 类似的想法也适用于 CSS 吗？ (我目前正在使用更加单一的 CSS 方法)

Answer 1

2021 年编辑:
由于这个答案最近得到了一些支持，请注意，随着 http 2.0 的出现，情况发生了很大变化。由于现在通过单个 TCP 连接进行多路复用，因此您不会获得每个请求的命中。您还可以获得服务器推送。虽然大多数答案仍然有效，但请务必将其视为以前的做法。

<小时/>

我想说，最重要的是要关注对速度的感知。

首先要考虑的事情是，不存在双赢公式，只有一个阈值，其中 JavaScript 文件会增长到可以(并且应该)被分割的大小。

GWT uses this他们称之为DFN(暂时失效)代码。这里没有太多魔法。您只需手动定义何时需要一段新代码，并且如果用户需要它，只需调用该文件即可。

您如何、何时、何地需要它？
基准。 Chrome 有一个很棒的基准测试工具。广泛使用它。看看只有一个小的 javascript 文件是否会大大改善该特定页面的加载。如果确实如此，请务必开始对代码进行 DFN 处理。

除此之外，一切都与感知有关。

不要让内容跳跃!
如果您的页面有图像，请预先设置它们的宽度和高度。由于页面将加载位于其应有位置的元素，因此不会有内容适合，并且调整用户对速度的感知会增加。

推迟 JavaScript!
所有主要库都可以在执行 javascript 之前等待页面加载。用它。 jQuery 的运行方式类似于 $(document).ready(function(){ ... })。它不会等待解析代码，而是让解析的代码在应该的时候触发。页面加载之后、图像加载之前。

需要考虑的重要事项:

1. 确保 js 文件被客户端缓存(所有其他的都比这个短)
2. 使用 Closure Compiler 编译您的代码
3. Deflate your code ;它比 Gzip 压缩(两端)更快

Apache 缓存示例:

// Set up caching on media files for 1 month
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
    ExpiresDefault A2629744
    Header append Cache-Control "public, proxy-revalidate"
    Header append Vary "Accept-Encoding: *"
</FilesMatch>

Apache 放气示例:

// compresses all files for faster transfer
LoadModule deflate_module modules/mod_deflate.so
AddOutputFilterByType DEFLATE text/html text/plain text/xml font/opentype font/truetype font/woff
<FilesMatch "\.(js|css|html|htm|php|xml)$">
   SetOutputFilter DEFLATE
</FilesMatch>

最后，也许也是最不重要的一点，从无 cookie 的域中为您的 Javascript 提供服务。

为了集中您的问题，请记住，当您拥有 DFN 代码时，您将拥有几个较小的 javascript 文件，这些文件正是为了被分割而不会具有闭包可以为您提供的压缩级别。在这种情况下，部分之和并不等于整体。

希望对你有帮助!