从 CDN (Google) 流式传输 jquery(JS 文件)答案

【问题标题】：Streaming jquery(JS files) from a CDN (Google)从 CDN (Google) 流式传输 jquery(JS 文件)
【发布时间】：2010-09-23 17:26:34
【问题描述】：

这是一个没有做功课的案例。:-)

除了动态加载优势之外，当我可以从我的服务器将其加载为由 19kb jQuery zip 文件 + 附加文件组成的单个文件时，从 Google 服务器包含一个 JavaScript 库（在我的情况下为 jQuery）是否有意义我编写的 JavaScript 代码 - 全部使用 JS 压缩器压缩并提供 HTTP 压缩。

使用 Google 服务器，我将进行 2 次（并行）HTTP 往返。一个获取 jquery 文件，另一个获取站点 JavaScript 代码。一个 19kb，另一个说 20-25kb。在正常情况下，从我的网站下载一次 30-35kb。

【问题讨论】：

标签： javascript jquery performance http

【解决方案1】：

这是一个真正的问题吗？只需确保您的 HTTP 标头中的 Cache-Control 配置正确，最终用户的客户端只会拉一次。这绝对是微不足道的数据量。

【讨论】：

即使使用缓存控制 + ET 标签，新用户也必须下载 30kb 的数据。
Charian，仅此页就有 27.61kb。除非您希望用户使用一到两次页面查看，否则每个呈现的页面很快就会超过您的 jslib 的大小。无论哪种方式，即使有 10000 个用户，也就是 30 MEGS。如果您的服务器无法提供该服务，请换一个新的。
这应该是 1000 个用户而不是 10000 个。对我的零键有点满意。

【解决方案2】：

考虑从 google CDN 下载的 jQuery 脚本很可能已经缓存在访问者的浏览器上，因为无论从哪里下载它都有一致的标题和缓存控制。因此，平均而言，大多数用户只需要下载特定于站点的 javascript 脚本。此外，CDN 通常比单个服务器具有更快的响应时间，因为它们从离您最近的服务器响应。

您的问题没有简单明了的答案，因为这两种方法在现代连接上都提供了良好的性能。您应该在胁迫下分析您的系统，看看哪种解决方案能提供最佳结果（以及是否需要这种优化）。

【讨论】：

【解决方案3】：

您确定将并行下载脚本吗？ This example from Cuzillion 好像是说只有 IE8 才能做到。

还值得了解的是，您的网页浏览量中有多少是首次访问者，以及有多少人之前访问过该网站，以帮助您确定多少缓存会影响下载时间。如果您有大量的首次访问者，则可能值得将其偏向于他们，以尽可能快地进行首次体验。

【讨论】：

+1 用于查找您的访客资料。用户体验研究表明，许多用户根据搜索结果进出网站，而不是浏览各个网站。首次访问您网站的访问者的首页呈现速度对于他们是否坚持更多或放弃并返回搜索引擎有很大的影响。

【解决方案4】：

httpwatch 对来自 google 的 js 文件进行的基准测试。

http://blog.httpwatch.com/2008/11/27/google-adds-https-support-to-the-ajax-libraries-api/

【讨论】：

【解决方案5】：

在我看来，使用知名的jQuery CDN（例如 Google 的）并没有任何真正的缺点，并且有一些潜在的好处，所以我个人更倾向于采用 CDN 方法。如果不出意外，作为我的源代码树的一部分，我需要担心和维护的文件少了一个。

我发现使用 CDN 与使用单个胖 JavaScript 存档相比有几个优势：

减少检索未缓存资源的延迟，因为这些资产是从边缘位置提供的
对于第 3 方脚本，用户的浏览器可能已经将它们缓存起来，无需为您的网站再次下载它们。
通过将资产分布到多个主机名来解决并行请求的每个主机浏览器限制（当然，这也可以通过您自己的服务器使用简单的子域技巧来完成）。
减少主服务器上的总体负载，尤其是。在使用高峰期或 YC/Slashdot “攻击”期间很重要。

何时关心 HTML 页面资源的下载时间：

当您有大量首次访问者（来自搜索引擎和/或社交媒体）时。研究表明，现在人们不是很有耐心，所以你真的需要不遗余力地给人留下良好的第一印象。（另请参阅 Jakob Nielsen 关于 Page Abandonment、Answer Engines 和 Response Times 的文章。）
适用于使用移动设备的访客。移动数据网络通常很慢和/或拥塞。
适用于实行持续交付并导致资产频繁流失的商店（更常见于全新网站和应用程序）

附言- Aaron Hopkins 在optimizing page load time 上写过我见过的最好的文章之一。有点过时了，但仍然很相关。

P.S.S. - 您可能想看看 Zepto，它是 jQuery 的轻量级（24K 与 100K）、api 兼容替代品。

【讨论】：