前端多cdn自动测速核心是用fetch发起head请求测真实耗时，禁用缓存、设超时、abortcontroller中断，取最快节点动态替换资源url或重写请求，配合localstorage缓存与源站降级兜底。
前端实现多 CDN 节点自动测速与最优选择，核心不是“嗅探”，而是用 fetch 主动发起轻量请求、测量真实网络耗时，并基于结果动态加载资源。它不依赖 DNS 或服务端调度，完全在浏览器内完成，对用户无感、兼容性好、部署零成本。
为什么 fetch 比 ping 或 xhr 更适合前端测速
fetch 是现代浏览器原生支持的 Promise 接口，可精确控制超时、忽略缓存、复用连接，并天然支持 AbortController 中断慢请求。相比传统 xhr，它更简洁；相比 ping（无法在浏览器调用），它能真实反映资源加载路径（含 TLS 握手、HTTP 头处理等）。关键点：
- 必须使用空响应体（如
HEAD或返回极小204）避免下载开销 - 需禁用缓存（
cache: 'no-store'），否则测的是本地缓存而非节点响应 - 单次测速建议设
timeout为 1500–3000ms，避免阻塞主流程
多 CDN 测速脚本的核心逻辑
以三个静态资源域名为例：cdn-a.example.com、cdn-b.example.com、cdn-c.example.com，目标是选出最快的一个用于后续图片或 JS 加载：
- 并发发起
fetch(url, { method: 'HEAD', cache: 'no-store', signal }) - 每个请求绑定独立
AbortController，超时即中止 - 记录
start到response的真实耗时（非timeEnd，因 fetch 不暴露底层 timing） - 取前 1–2 名作为“当前最优”，写入内存或 localStorage 缓存 5–15 分钟，减少重复测速
示例片段（无第三方依赖）：
const cdns = ['https://cdn-a.example.com/health', 'https://cdn-b.example.com/health', 'https://cdn-c.example.com/health'];<br>async function measureSpeed() {<br> const controllers = cdns.map(() => new AbortController());<br> const promises = cdns.map((url, i) => {<br> const start = performance.now();<br> return fetch(url, { method: 'HEAD', cache: 'no-store', signal: controllers[i].signal })<br> .then(res => ({ url, time: performance.now() - start }))<br> .catch(() => ({ url, time: Infinity }));<br> });<br> return Promise.race(promises);<br>}
如何把最优 CDN 应用到真实资源加载
测速只是第一步，关键在于让后续资源真正走最优节点。常见做法有两类：
-
动态拼接资源 URL：测速完成后，将图片、CSS、JS 的域名替换为最优 CDN 域名，例如：
<img src="https://[best-cdn]/logo.png?x-oss-process=image/resize,p_40"> -
拦截并重写请求：配合
document.createElement('script')或CSSStyleSheet.insertRule，在插入前修改源地址；对已存在的<link rel="stylesheet">可先移除再重建
注意：不要在 中直接写死 CDN 域名，应留白或用占位符（如 data-cdn-src），待测速完成再注入，确保首屏仍可 fallback 到默认源站。
实际部署中的关键细节
真实场景下需考虑稳定性与兜底：
- 首次访问无缓存时必测速；已有缓存且未过期（如 localStorage 存了 10 分钟前的结果）可跳过，但要加随机抖动（±20% 时间）防雪崩
- 若所有 CDN 都超时或失败，立即降级回源站域名，保证功能可用
- 健康检查要持续：可每 5 分钟用
setTimeout触发一次轻量探测，发现劣化自动切换 - 避免跨域问题：所有 CDN 域名需配置
Access-Control-Allow-Origin: *，否则fetch会因 CORS 拒绝，无法读取响应头或耗时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
