Cam*_*mel 6 javascript jquery jquery-ui
虽然从谷歌的CDN服务jQuery更好jQuery UI是一个不同的野兽.我的本地修改版本重量为60kb,而谷歌的CDN约为200kb.
Google的jquery UI CDN重达51 Kb:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
在HTML5样板使用jQuery的装载回退:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
你可以将它应用于jquery ui:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/jquery-ui-1.8.16.min.js">\x3C/script>')</script>
您加载CDN版本然后检查是否存在jquery ui(您不能保证任何CDN的100%正常运行时间).如果jquery ui不存在,请回到当地.通过这种方式,如果他们已经在缓存中,你就可以了.如果他们不这样做,并且因任何原因无法检索CDN,那么你最好还是和当地人一起去.安全失败.
在这里来晚会,但允许gzip压缩,你基本上比较了从谷歌的CDN(197.14k内容变为51.30k在线)的~51k的下载与从你自己的服务器的~15.5k的下载(假设您的60k文件gzips与完整的jQuery UI文件的比例相同,并且您启用了gzip压缩).这将我们带入了一个复杂的领域:
你的问题的答案是一个很大的问题:它取决于,尝试每个问题,并在现实世界的情景中衡量结果.
如果您网站的首次访问者以前曾使用Google的CDN中的jQuery UI访问某个网站并且仍然在其缓存中,则会获胜.完全停止.无需进一步思考.谷歌使用适当的缓存标题,浏览器甚至不必将请求发送到服务器,只要您链接到完全指定版本的jQuery UI(不是"任何版本的1.8.x很好"的URL之一) -如果你要求jQuery UI 1.8.16,谷歌将返回一个可以缓存长达一年的资源,但是如果你要求jQuery UI 1.8.x [例如,任何点数为1.8],那资源只是好的一个小时).
但是我们假设他们没有......
延迟是设置与服务器的连接所需的时间,传输时间是实际传输资源所花费的时间.使用我的DSL连接(我不是非常接近我的交换,所以我通常在下载时获得大约4Mbit的吞吐量;例如,它是一个好的连接,但没有像Londoners那样,或者美国的那些幸运的FiOS人员),重复实验下载谷歌的jQuery UI副本我通常花费大约50毫秒等待连接(延迟)然后73毫秒进行数据传输(SSL会改变该配置文件,但我假设这里有一个非SSL站点).与下载谷歌jQuery本身的副本(89.52k gzip压缩到31.74k)相比,它具有相同的~50ms延迟,然后下载约45ms.请注意下载时间与资源大小成正比(31.74k/51.30k = 0.61871345,当然,73ms x 0.61871345 = 45ms),但延迟是恒定的.所以假设你的副本是15.5k,你可以期待(对我来说)50ms延迟加上大约22ms的实际下载.所有其他条件相同,通过托管自己的60k副本与谷歌的200k副本,你将节省我高达52毫秒.我们只是说我不会注意到差异.
然而,一切都不平等.谷歌的CDN经过高度优化,具有位置感知能力,而且速度非常快.例如,让我们比较从Heroku.com下载jQuery.我选择它们是因为他们是运行重要托管业务的聪明人(目前正在使用AWS堆栈),因此您可以预期他们至少花了一些时间来优化他们的静态内容交付 - 并且他们使用本地副本jQuery为他们的网站; 他们在美国(你会在一瞬间看到原因).如果我从它们下载jQuery(令人震惊的是,它们似乎没有启用gzip!),延迟始终在135ms范围内(偶尔会有异常值).这一点一直是谷歌CDN延迟的2.7倍(而且我的吞吐量也慢,大约是速度的一半;也许他们只在美国使用AWS实例,而且因为我在英国我离得更远从他们).
这里的重点是延迟可能会消除您从较小文件大小中获得的任何好处.
如果您要在本地托管任何 JavaScript文件,那么您的用户仍然需要获取这些文件.假设您的网站拥有100k自己的脚本.如果您使用Google的CDN,您的用户必须从Google获得20k的jQuery UI,并从您那里获得100k的脚本.浏览器可以并行放置这些请求(除非您使用async或defer在您的script标签上,浏览器必须按严格的文档顺序执行脚本,但这并不意味着它不能并行下载它们).或者它可能不会.
正如我们已经确定的那样,对于非移动用户来说,在这些大小的实际数据传输时间并不重要,您可能会发现采用本地jQuery UI文件并将其与您自己的脚本相结合,因此只需要一个即使谷歌CDN的优点,下载而不是两个,可能会更有效.
这是旧的"最多一个HTML文件,一个CSS文件和一个JavaScript文件"规则.最小化HTTP请求是一件好事TM.同样,如果您可以使用精灵而不是单个图像来处理各种事物,这有助于降低图像请求.
如果您正在托管自己的脚本,那么您将完全确定它是可缓存的,这意味着要注意缓存标头.Google的CDN基本上不信任HTTP/1.0缓存(它将Expires标头设置为当前日期/时间),但确实信任HTTP/1.1缓存 - 绝大多数 - 因为它发送一个max-age标头(一年的完整指定资源) ).我猜他们有理由这样做,你可能会考虑跟风.
由于您有时想要更改自己的脚本,因此您需要在其上添加版本号,例如"my-nifty-script-1.js",然后是"my-nifty-script-2.js"等.这样你可以设置长max-age标题,但是知道当你更新你的脚本时,你的用户将得到新的标题.(这也适用于CSS文件.)不要使用查询字符串进行版本控制,将数字实际放在资源名称中.
由于您的HTML可能会定期更改,因此您可能希望简短的过期,但当然这完全取决于您的内容.
这取决于.如果您不想将脚本与jQuery UI的本地副本相结合,那么最好将Google用于jQuery UI.如果你很乐意将它们结合起来,你就会想要做出真实世界的实验来做出自己的决定.完全有可能其他因素会将其清除,这并不重要.如果你还没有,那么值得回顾雅虎和谷歌的网站速度建议页面: