域名分片真的还能提升图片加载速度吗？

设计师文斌提问于 2026-03-05 12:36:24 阅读 28

优化

我最近在优化一个老项目，听说以前用域名分片能绕过浏览器并发限制，就试着把静态资源拆到 cdn1、cdn2 两个子域下。但实际测下来发现首屏图片加载反而更慢了，是不是现在 HTTP/2 普及后这招已经失效了？

我写了个简单的轮询分配逻辑，代码如下：

const CDNS = ['https://cdn1.example.com', 'https://cdn2.example.com'];
let index = 0;
function getCDN() {
  return CDNS[index++ % CDNS.length];
}
// 使用时：img.src = getCDN() + '/images/photo.jpg';

现在 Chrome DevTools 里看到很多 DNS 查询和 TCP 握手开销，感觉得不偿失。到底该不该继续用域名分片啊？

域名分片网络优化

我来解答赞 4 收藏

反馈

1 条解答

Dev · 豫栋 Lv1

这个问题我也踩过坑，现在确实不推荐用域名分片了，特别是HTTP/2环境下。说几点关键发现：

1. HTTP/2的多路复用让域名分片失去优势，反而会因为额外的DNS查询和TCP握手拖慢速度。你的测试结果很准确，DevTools里那些额外开销就是证据。

2. 你那套轮询分配逻辑虽然能用，但更好的写法是用单域名配合HTTP/2。如果坚持要用多CDN，至少改成这样：

const CDNS = Object.freeze([

  'https://cdn1.example.com',

  'https://cdn2.example.com'

]);



let index = 0;

function getCDN(path) {

  return ${CDNS[index++ % CDNS.length]}${path};

}

3. 现代优化建议：
- 合并小图片成雪碧图或转base64
- 开启CDN的HTTP/2和Brotli压缩
- 用提前加载关键图片
- 考虑渐进式图片加载或WebP格式

我现在做性能优化都是先看HTTP/2支持情况，老套路该扔就扔。前两天刚把一个分片方案改成单域名，首屏直接快了200ms。

2026-03-05 13:19