cdn挂了，前端如何动态切换cdn链接呢？

最新推荐文章于 2024-08-21 23:47:15 发布

乐辞

最新推荐文章于 2024-08-21 23:47:15 发布

阅读量1.2k

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45503196/article/details/125502220

版权

本文介绍了如何利用CDN提升网站访问速度和安全性，同时提供了一种智能解决方案：当主CDN服务出现问题时，通过监听script标签的onerror事件，自动从备用CDN链接列表中切换，确保服务的连续性和可靠性。示例代码展示了如何实现这一功能。

摘要由CSDN通过智能技术生成

为了提高项目的访问速度，使用cdn提升访问速度是非常有效的方案，同时提高网站稳定性、安全性，并且无需修改现有的业务逻辑。采用免费的cdn提供商，还能降低网站流量成本，

但是cdn服务也不是无限运行的，如果挂了我们应该怎么办，手动更换cdn提供商？不，我们将采取一种更加智能的解决方案，通过监听script标签的onerror事件，从候选cdn链接中进行切换。

以下代码可以应对一些应用场景

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script>
   function loadResource(links, fnSuccess, fnError) {
     var script = document.createElement('script');
     script.onerror = function () {
       document.head.removeChild(script);
       fnError();
     };
     script.onload = fnSuccess
     script.src = links.shift();
     document.head.appendChild(script);
   }

   function autoSwitch(resourceList) {
     if (!resourceList.length) return
     var resource = resourceList.shift();
     loadResource([resource], function (success) {
       console.log('loaded');
     }, function (err) {
       console.log('load error')
       autoSwitch(resourceList);
     });
   }
 </script>
</head>

<body>
 <script>
   // cdn 链接列表
   var resourceList = [
     'http://demo1.cdnxx.cn/assets/app.js',
     'http://demo2.cdnxx.cn/assets/app.js',
     'assets/app.js',
   ];

   autoSwitch(resourceList);
 </script>
</body>

</html>