Gimhoy's Blog

优化网站配置,提升访问速度之引用CDN公共JS库

本文最后更新于2013年6月13日,已超过三年没有更新,如果文章内容失效,请反馈给我们,谢谢!

在上一篇文章《优化网站配置,提升访问速度之设置HTTP缓存》中,我们介绍了如何通过设置HTTP缓存来提升网站的访问速度。但是这样只对用户第二次访问时有效,对于首次打开网站的用户来说(对于小型网站来说,大部分的用户就是这样的新用户),HTTP缓存并没有效果。如果你的主机是在国外,或者在国内但是因为南北互通问题打开速度不理想,又或者本身带宽很小打开速度不快时,我们就需要在其他方面做些优化,以提升网站访问速度。今天就将介绍其中一个方法:引用公共CDN库。

 

什么是CDN公共库?

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。一般的CDN公共库都会包含全球所有最流行的开源JavaScript库。

 

为什么要引用CDN公共库?

1.减少等待时间

CDN-Content Delivery Network(内容分发网络),通过各种各样的服务途径把你的一些静态内容分散开来,当用户的浏览器提交这些文件的链接请求,他们便会自动下载网络上最近的可用的文件。这样任何使用你的服务的用户从JS库下载都将获得比从你自己的服务器上下载更快的速度。

2.增加网页的同时载入速度

为了避免服务的过载,浏览器限制了同时连接的数目,依据不同的浏览器,这个限制可能是每个机房仅仅两个之少。
使用CDN公共库加载JS,使你本地服务器上更多服务可以同时进行。

3.更好的缓存

使用CDN公共库的最大好处是你的用户可能根本不需要下载jQuery.不论你的缓存多么强大,如果你用自己的服务器提供jQuery,那么你的用户至少要下载一次它,某个用户很有可能在他们浏览器的缓存区里下载了许多完全相同的jQuery.min.js的拷贝版本,但是当他们第一次访问你的网站的时候,这些拷贝版本会被忽略。

而当浏览器检测到同样版本的指向CDN公共库的链接,它就会知道这是下载同一个文件,不仅是CDN公共库的服务器会返回一个304(不需要修改文件的指令,即服务器上的文件未改动过)来回复一个重复的请求,而且会命令浏览器的缓存该文件长达一年的时间。

这意味着即使一些人访问了数百的使用CDN公共库的网站,他们只需要下载一次就够了。

 

目前有哪些CDN公共库?

最出名的莫过于Google CDN 的 jQuery 库,不过虽然其加载速度挺快,但由于众所周知的原因,不是特别稳定。

国内提供同样服务的有新浪SAE(https://lib.sinaapp.com)和百度BAE(https://developer.baidu.com/wiki/index.php?title=docs/cplat/libs)。

其他公共库:https://developers.google.com/speed/libraries/devguide?hl=zh-CN#jquery

这些都是CDN加速过的JS库,全国加载速度都不差。

 

如何引用CDN公共库?

以百度为例,要加载jQuery,将如下所示的代码嵌入到你的网页中即可。

<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

如果你想引用Google的CDN公共库,而又担心Google不稳定,那么将代码修改成下面这样就可以了:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">!window.jQuery && document.write('<SCRIPT src="jquery-1.8.2.min.js"></SCRIPT>');</script>

这段代码的意义是这样的:首先去加载谷歌的jquery库文件,如果加载失败,那么就直接加载自己服务器上的jquery库文件。
 

引用公共库之后,还需要禁止加载自带的jQuery.js,方法请见:WordPress禁止加载自带的jQuery.js的方法
 

关于通过引用CDN公共库来提升网站访问速度就介绍到这里,明天将介绍通过云存储服务优化网站打开速度,敬请关注。

 

系列文章:

1.优化网站配置,提升访问速度之设置HTTP缓存

2.优化网站配置,提升访问速度之引用CDN公共JS库

3.优化网站配置,提升访问速度之使用云存储

4.优化网站配置,提升访问速度之广告代码优化



免费获得每月10G空间+10G免费流量
  • Comment (6)
  • Trackback (5)
  • 过客小站 Internet Explorer Windows 2013/08/18 01:07 @Ta

    http://jscdn.upai.com/ 又拍云的公共库。lib.sinaapp.com不敢用,没说它是公共库吧……

    #25
  • babytomas Safari  Android 4.0.3 M032 Build/IML74K 2013/04/17 10:57 @Ta

    现在百度云也有公用库咯~

    #24
    • Gimhoy Google Chrome Windows 2013/04/17 21:31 @Ta

      嗯呐,而且现在速度还不错~

Leave a Reply

*

*