關於 cdn 在項目中的使用

當我們在項目中引入公共 cdn 時,想要考慮一些東西,現在我把他描寫一下

公共 cdn 的選擇

這里只討論免費的 cdn

1. BootCDN
   https://www.bootcdn.cn/

   • 庫同步於 cdnjs
   • 支持海外節點,但是較慢
   • http/2
   • 國內大部分地區都可訪問(部分地區可能緩慢)

2. 又拍雲
   http://jscdn.upai.com/

   • 需要登錄注冊,申請
   • http/3
   • 支持海外節點
   • 國內與國外速度都是較快

3. CDNJS
   https://cdnjs.com/

   • 國內部分區域無法訪問
   • 國外速度較快
   • http/2

4. jsDelivr
   https://www.jsdelivr.com/

   • 國內大部分地區較快
   • 國外速度穩定,較好
   • http/2
   • 支持 UNPKG 的功能, 從 NPM 獲得文件

5. UNPKG
   https://unpkg.com/

   • 國內速度較慢, 國外速度較快
   • 從 NPM 獲得文件
   • HTTP2

6. 七牛
   http://staticfile.org/

   • 國內大部分地區速度穩定,快速
   • 國外速度也很快
   • 庫同步於 cdnjs
   • 暫不支持 HTTP2

7. 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 並且體積也少了(因為要在項目一開始加載)
使用哪個庫,看自己的需要
說下原理:

1. 通過監聽 error 事件, 來獲取事件實例, 再判斷是否是 script 的加載錯誤
2. 如果是 script 的錯誤, 則在已定義的規則中匹配
3. 匹配通過, 則使用替換的地址
4. 重新加載替換 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/video.js@7.10.22/dist/': 'https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/' }
    }) 
 </script> 
 <script src="https://cdn.jsdelivr.net/npm/video.js@7.10.22/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