乐趣区

关于javascript:关于-cdn-在项目中的使用

jiezi

当咱们在我的项目中引入公共 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/as…
能够监听 cdn, css , 图片 (包含 css 背景图) 的加载失败, 并且失败后找到事后设置的替代品
通过我批改的库:
https://github.com/Grewer/ass…
只针对 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/JsD…

退出移动版