網站優化:引用CDN公共JS庫

什麼是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;https://cdnjs.com;

這些都是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的方法

發佈了44 篇原創文章 · 獲贊 68 · 訪問量 32萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章