众所周知2021/12/20JSdelivr掉北岸,我们痛失一枚国内外同时加速的利器。
国内的zhimg、bdstatic、elemecdn对海外支持并不佳,因此,寻找一种全球加速的cdn几乎成为了奢望。
【提前声明一下,并行请求这一思想确实是从FreeCDN学习过来的,但是代码内容和实现方式完全不一样,欢迎指正】
刚好手头有ServiceWorker这一誉为“浏览器中的服务器”这一利器,不发挥一下余热怎么能行呢。
核心代码promise.any并行请求
- const PauseProgress = async (res) => {
return new Response(await (res).arrayBuffer(), { headers: res.headers });
};
let results = Promise.any(urls.map(urls => fetch(urls, {
signal: controller.signal
}).then(PauseProgress).then(res => {
controller.abort();
return res
})));
对于同一个网址,sw将会同时请求四家CDN,并且只要有一个cdn响应,其余请求自动打断【即只取反应速度最快的】。
例如,请求
- https://cdn.jsdelivr.net/npm/chenyfan-happypic/1.jpg
,将会同时请求:
- https://cdn.jsdelivr.net/npm/chenyfan-happypic/1.jpg
https://unpkg.com/chenyfan-happypic/1.jpg
https://unpkg.zhimg.com/chenyfan-happypic/1.jpg
https://npm.elemecdn.com/chenyfan-happypic/1.jpg
https://code.bdstatic.com/npm/chenyfan-happypic/1.jpg
这种流量换速度的方式除了并发对浏览器压力比较大,其流量几乎没有多余的浪费【反应慢的还没请求完就直接打断】,用这种方法,一张7M的图片几乎只要700ms即可加载完成。
关于绕备
sw附带功能,移花接木**,看得懂的自然看得懂,我就不过多阐述了。
服务器在广州,ZeroSSL IP证书,非标准端口
博客就是用sw加速和绕备的,有兴趣可以看看
博客:https://blog.cyfan.top
热议
2楼 wchunh 昨天21:01
技术菜,看不懂
3楼 MoeWang 昨天21:03
优势很大,访客几乎无感知,但国内浏览器对workers支持完整么
4楼 AaronYYDS 昨天21:03
可以的
5楼 ChenYFan 昨天21:04
优势很大,访客几乎无感知,但国内浏览器对workers支持完整么
Chromium套壳的只要不是44古董都可以吧
6楼 笑花落半世琉璃 昨天21:05
先插个眼 改天再看看
7楼 ChenYFan 昨天21:06
优势很大,访客几乎无感知,但国内浏览器对workers支持完整么
不如说Promise.any这种用法兼容性确实很差,移动端基本全线覆灭,只能循环测试取最小值
8楼 生为何故 昨天21:06
技术菜,看不懂
大佬的游戏能白**一个吗。。。
9楼 wchunh 昨天22:00
大佬的游戏能白**一个吗。。。
里面有好几个免费的
10楼 ChenYFan 半小时前
fetch的promise返回的是状态,那我如何判断它已经下载完成了?
我用的是走一波arraybuffer强制读body,是不是性能不太好?
12楼 ncnc 半小时前
13楼 2019-nCoV 23分钟前
合肥移动,ttfb有点大啊~
14楼 ChenYFan 16分钟前
合肥移动,ttfb有点大啊~
不是首次访问,我指的是serviceworker安装后的体验
15楼 feixiang 5分钟前
没怎么看懂
申明:本文内容由网友收集分享,仅供学习参考使用。如文中内容侵犯到您的利益,请在文章下方留言,本站会第一时间进行处理。