DNS预加载没生效？怎么设置dns-prefetch才能让图片加载更快？

dns-prefetch 要生效得看浏览器实际行为，不是写了就一定立刻预解析。你这个情况大概率是浏览器根本没触发预解析，或者资源加载时机压根没对上。

先说问题：CSS 里的 background-image 引用的图片，属于延迟加载资源，浏览器只有在元素渲染时才会去取图，这时候 DNS 才真正被用上。就算你加了 dns-prefetch，如果页面结构导致轮播区域没马上进入视口，浏览器可能直接跳过预解析阶段。

解决办法如下：

1. 确保 dns-prefetch 标签写对位置和格式：

<link rel="dns-prefetch" href="//img.example.com">

注意 href 要带双斜杠 //，不要写 http 或 https，避免协议不匹配导致无效。

2. 加个预连接更靠谱，dns-prefetch 只做 DNS 解析，而 preload 才真能提前建立连接。建议换成：

<link rel="preconnect" href="//img.example.com">

或者更强一点：

<link rel="preload" as="image" href="//img.example.com/banner1.jpg">

3. 如果你是 JS 控制的轮播，最好在脚本里主动触发图片预加载，比如：

const img = new Image();

img.src = '//img.example.com/banner1.jpg';

这样不管 CSS 渲染多晚，图片都会提前开始加载，DNS、TCP、SSL 都会提前走一遍。

最后别忘了测试的时候开无痕模式，不然缓存干扰太大。代码放这了，先用 preconnect + preload 组合试试，基本都能看到 DNS 时间降到 0。