javascript - 为 jQuery(或其他静态文件/脚本)使用 CDN 真的是个好主意吗？

Question

它说到处都可以使用 CDN，例如 Google 或 Microsoft 的 AJAX CDN 来加载静态脚本库，例如我的 jQuery。

我不明白这对提高我的网站速度有何帮助。在 firebug 中，当我加载 jQuery 时，Google 和 Microsoft AJAX 服务器的时间都在 300 毫秒左右，而在 Chrome 中，我的时间大约为 100 毫秒(不知道是什么造成了差异，没有进行下载，都尝试了几次，但无论如何这不是重点)，我的站点在部署时估计平均响应时间为 30 到 40 毫秒。 CDN 加载文件对我的网站有什么好处？这会让一切变得更糟!

我知道当我使用来自 Google CDN 的 jQuery 访问许多网站时，它必须在很长一段时间内只“下载”一次脚本，但我的浏览器仍会尝试连接到 Google 的服务器，并且请求脚本文件，然后收到 304 not modified 状态码。在这个 200 毫秒的往返行程中(Chrome 和 FF 的平均值)，我等待。但如果我自己托管脚本文件，那么它将(下载)加载速度更快，大约五倍，这是用户体验的一个重要因素。也许 200 毫秒不是一个很大的交易，但它仍然是一个区别，我想知道为什么建议使用 CDN 而不是我们自己托管文件。最后，在一次性加载后，浏览器也会为我的网站缓存脚本，如果我使用 CDN，浏览器会向 CDN 请求脚本，这会滞后我的网站。

更新:我来自土耳其，这可能是往返次数较多的主要原因。我的大部分访问者都来自这里，所以我想问的是，这对托管在土耳其服务器上的我的网站以及同样位于土耳其，使用 CDN。绝对不适合往返，但也许我错过了一些东西。

Answer 1

两部分答案:

• 你不应该看到 304
• 但这是个好主意吗？

你不应该看到 304

I understand that when I visit many sites using, say, jQuery from Google's CDN, it will have to "download" the script only once for a very long time, but my browser still tries to connect to the Google's server, and ask for the script file, and then receive 304 not modified status code.

它不应该，如果它尊重 Cache-Control header 则不应该:

Cache-Control:public, max-age=31536000

...which says from the date on the resource, the browser can cache it for up to a year. No need for any HTTP request at all (and that's what I see in Chrome unless I force it, no request at all, just a note saying "from cache"; fired up Firefox and made sure Firebug was on for all pages, came to StackOverflow for the first time in a long time with Firefox [which I only use for testing], and sure enough, it didn't issue any request for jquery at all).

E.g., maybe it takes 200ms for a 304 response, but if your browser is caching correctly, it'll be 0ms for a load-from-cache.

The full set of relevant headers I see on a forced request are:

Cache-Control:public, max-age=31536000Date:Wed, 17 Aug 2011 21:56:52 GMTExpires:Thu, 16 Aug 2012 21:56:52 GMTLast-Modified:Fri, 01 Apr 2011 21:23:55 GMT

...so my browser shouldn't have to request that path again for nearly a year.

See @Dave Ward's comment below: To get max caching results, use the full release number, e.g.:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<!--                               very specific ---^^^^^                      -->

而不是

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<!--                               very generic ----^                      -->

好的，但这是个好主意吗？

这完全取决于您。即使有这样的回退:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script>
if (typeof jQuery === "undefined") {
    document.write("<scr" + "ipt src='/my/local/jquery.js'></scr" + "ipt>");
}
</script>

...或类似的，如果 CDN 出现故障，用户体验将糟糕。浏览器将尝试连接它很长时间。这种回退只有在 CDN 快速回复失败时才有用，而这是不太可能的。

这意味着如果 Google 的 CDN 出现故障，您将不得不快速调整您所提供的服务以使用本地副本。因此，通过服务器级别的故障转移来开始使用本地路径提供页面服务，从而防御这种情况成为(谷歌服务器的监控事件；不要过度，否则他们会不高兴)。 (或者微软的路径，理论上谷歌和微软可能不会共享底层 CDN 技术，因为他们相处得很好。)

对我来说，大多数网站的答案可能是:继续使用 CDN，当 Google 的图书馆 CDN 出现故障时使用react。另一方面是:如果您对从您的服务器加载它的整体页面加载性能感到满意，那么这样做没有什么害处，直到或除非流量足够高以至于您希望从事物中获得最后一点性能。但是很多(很多很多)网站都依赖于 Google 的 CDN，如果它出现故障，您的网站将远非唯一失败的...