sw黑科技绕过北岸&智能CDN前端切换

ChenYFan

众所周知2021/12/20JSdelivr掉北岸，我们痛失一枚国内外同时加速的利器。

国内的zhimg、bdstatic、elemecdn对海外支持并不佳，因此，寻找一种全球加速的cdn几乎成为了奢望。

【提前声明一下，并行请求这一思想确实是从FreeCDN学习过来的，但是代码内容和实现方式完全不一样，欢迎指正】

刚好手头有ServiceWorker这一誉为“浏览器中的服务器”这一利器，不发挥一下余热怎么能行呢。

核心代码promise.any并行请求

1. const PauseProgress = async (res) => {
   
2.             return new Response(await (res).arrayBuffer(), { headers: res.headers });
   
3.         };
   
4.         let results = Promise.any(urls.map(urls => fetch(urls, {
   
5.             signal: controller.signal
   
6.         }).then(PauseProgress).then(res => {
   
7.             controller.abort();
   
8.             return res
   
9.         })));

复制代码

对于同一个网址，sw将会同时请求四家CDN，并且只要有一个cdn响应，其余请求自动打断【即只取反应速度最快的】。

例如，请求

1. https://cdn.jsdelivr.net/npm/chenyfan-happypic/1.jpg

复制代码

,将会同时请求:

1. https://cdn.jsdelivr.net/npm/chenyfan-happypic/1.jpg
   
2. https://unpkg.com/chenyfan-happypic/1.jpg
   
3. https://unpkg.zhimg.com/chenyfan-happypic/1.jpg
   
4. https://npm.elemecdn.com/chenyfan-happypic/1.jpg
   
5. https://code.bdstatic.com/npm/chenyfan-happypic/1.jpg

复制代码

这种流量换速度的方式除了并发对浏览器压力比较大，其流量几乎没有多余的浪费【反应慢的还没请求完就直接打断】，用这种方法，一张7M的图片几乎只要700ms即可加载完成。

关于绕备

sw附带功能，移花接木**，看得懂的自然看得懂，我就不过多阐述了。

服务器在广州，ZeroSSL IP证书，非标准端口


博客就是用sw加速和绕备的，有兴趣可以看看
博客：https://blog.cyfan.top

wchunh

技术菜，看不懂

MoeWang

优势很大，访客几乎无感知，但国内浏览器对workers支持完整么

AaronYYDS

可以的

ChenYFan

MoeWang 发表于 2022-1-6 21:03
优势很大，访客几乎无感知，但国内浏览器对workers支持完整么

Chromium套壳的只要不是44古董都可以吧

笑花落半世琉璃

先插个眼 改天再看看

ChenYFan

MoeWang 发表于 2022-1-6 21:03
优势很大，访客几乎无感知，但国内浏览器对workers支持完整么

不如说Promise.any这种用法兼容性确实很差，移动端基本全线覆灭，只能循环测试取最小值

生为何故

wchunh 发表于 2022-1-6 21:01
技术菜，看不懂

大佬的游戏能白**一个吗。。。

wchunh

生为何故 发表于 2022-1-6 21:06
大佬的游戏能白**一个吗。。。

里面有好几个免费的

ChenYFan

fetch的promise返回的是状态，那我如何判断它已经下载完成了？
我用的是走一波arraybuffer强制读body，是不是性能不太好？