當我們在項目中引入公共 cdn 時,想要考慮一些東西,現在我把他描寫一下
公共 cdn 的選擇
這裏只討論免費的 cdn
-
BootCDN
https://www.bootcdn.cn/- 庫同步於 cdnjs
- 支持海外節點,但是較慢
- http/2
- 國內大部分地區都可訪問(部分地區可能緩慢)
-
- 需要登錄註冊,申請
- http/3
- 支持海外節點
- 國內與國外速度都是較快
-
CDNJS
https://cdnjs.com/- 國內部分區域無法訪問
- 國外速度較快
- http/2
-
jsDelivr
https://www.jsdelivr.com/- 國內大部分地區較快
- 國外速度穩定,較好
- http/2
- 支持 UNPKG 的功能, 從 NPM 獲得文件
-
UNPKG
https://unpkg.com/- 國內速度較慢, 國外速度較快
- 從 NPM 獲得文件
- HTTP2
-
- 國內大部分地區速度穩定,快速
- 國外速度也很快
- 庫同步於 cdnjs
- 暫不支持 HTTP2
-
75cdn
https://cdn.baomitu.com/- 有國外節點可用,但是稍慢
- 國內速度較穩定
- 支持 HTTP2
- 有 Google 字體庫
較好用的,比較穩定的基本上就上述這些, 如果有問題可用此網站實時測試:
https://www.17ce.com/
cdn 選擇總結
如果項目一直運行在國內, 可以選擇 BootCDN, 又拍雲,jsDelivr,七牛,75cdn
如果是海外項目, 可以選擇: UNPKG,jsDelivr, CDNJS, 七牛
如果想要兼容海內外,可以選擇: jsDelivr, 七牛
cdn 容錯處理
cdn 雖然好,但是當我們引入 cdn 時,就將我們的生命週期綁定在一起,
一旦出現了什麼問題,我們的那一段代碼就無法使用了
所以我們對於公共的 cdn 就要加上容錯處理:
方案 1
<script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js">
<script>window.jQuery || document.write('<script src="/jquery.min.js">')</script>
在 cdn 的 script 後加入一句容錯處理
這樣的寫法,如果不借用插件會顯示比較麻煩, 如果 cdn 只有1,2 個的話還好, 如果有異步 cdn 引入就顯得更麻煩了
document.write('<script src="/jquery.min.js">') 可以使用本地的數據, 也可以使用另一個 cdn
方案 2
使用庫來解決這個問題:
原庫:
https://github.com/Nikaple/assets-retry
可以監聽 cdn, css , 圖片(包括 css 背景圖)的加載失敗, 並且失敗後找到預先設置的替代品
經過我修改的庫:
https://github.com/Grewer/assets-retry
只針對 js cdn 的加載失敗進行監聽
雖然減少了功能,但是去除的都是用處較少的功能, 這樣專精於 js cdn 並且體積也少了(因爲要在項目一開始加載)
使用哪個庫,看自己的需要
說下原理:
- 通過監聽 error 事件, 來獲取事件實例, 再判斷是否是 script 的加載錯誤
- 如果是 script 的錯誤, 則在已定義的規則中匹配
- 匹配通過, 則使用替換的地址
- 重新加載替換 cdn 地址
使用起來也較爲方便, 如果項目裏有 html 或者 ejs 文件可以直接複製代碼到 script 裏面
如果沒有也可以通過插件來插入代碼
最簡單的使用例子:
<script type="text/javascript">
var assetsRetry=function(){"use strict"; // 代碼的引用省略}(); </script>
<script type="text/javascript">
var assetsRetryStatistics = window.assetsRetry({
domain: { 'https://cdn.jsdelivr.net/npm/[email protected]/dist/': 'https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/' }
})
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.js"></script>
在 jsdelivr 中我使用了 不存在的版本, 所以這一定不會被加載, 但我們檢測到之後, 會使用 https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/ 來替換, 使得加載可以成功
總結
在 web或者 h5 項目中, 使用 cdn 確實能加快首屏渲染並且減少網站流量
並且通過這些方案可以有效減少出問題的概率, 十分值得推廣
例子地址: https://github.com/Grewer/JsDemo/tree/master/CDNRetry