网站优化:引用CDN公共库

时间:2023-03-08 16:49:54
网站优化:引用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(http://lib.sinaapp.com)和百度BAE(http://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="http://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的方法

文章链接:http://blog.gimhoy.com/archives/speed-up-your-website-js-libs.html