使用 CDN 提供的 JavaScript 函式庫

現在的 Internet 應用程式往往會用到多套 JavaScript 函式庫,例如 jQuery、jQuery UI、Modernizr、Knockout 等等。這些檔案如果放在自家主機,當用戶遍及全球且數量龐大時,不僅占用頻寬,對主機的效能也會形成一些負擔。目前已經有幾家廠商的 CDN(Content Delivery Network)有提供常用的 JavaScript,若能善加利用,將有助於提升 Internet 應用程式的效能。

Microsoft Ajax CDN

微軟的 Ajax CDN 有提供幾套常用的 JavaScript 函式庫,包括 jQueryjQuery UIKnockoutModernizr 等等。

服用前最好確認一下版本,例如 Micrsoft Ajax CDN 和 CDNJS 提供的 Modernizr 都是開發版

Google CDN

Google CDN 也有提供同樣的服務,完整的函式庫清單可以到 Google Hosted Libraries 查看。

以 jQuery 為例,Google CDN 的連結是:

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

把網址當中的 1.8.3 改成你要使用的版本,如果 Google 主機上有提供那個版本,瀏覽器就會顯示那個 .js 的內容或問你是否要儲存檔案。若不存在,就會顯示 HTTP 404 錯誤。

其他

特定 JavaScript 函式庫的網站可能也會整理相關的 CDN 網址,例如 jQueryUI:http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/

如果你需要的 JavaScript 或 .css,上述 CDN 都沒有提供,也可以到 cdnjs.com 找找看。

萬一 CDN 失效...

也許你會擔心,萬一這些 CDN 服務哪天突然暫時失效了怎麼辦?

有個解決方法是在程式中判斷,如果 JavaScript 函式庫載入失敗,就退而求其次,改用自家主機的檔案。實際的寫法可參考這篇:jquery ui - how to use google CDN

Note:僅供企業內部(Intranet)使用的 web 應用程式並不是那麼需要使用 CDN,除非主機的負荷真的很重或傳輸速度很慢。

延伸閱讀
Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor