域名分片后图片加载反而变慢了怎么办？

这个问题确实很典型，域名分片在现代网络环境下并不总是优化的银弹。你提到的现象表明，DNS查询和连接建立的时间成为了瓶颈。咱们一步步分析问题的原因，并给出解决方案。

首先，域名分片的核心目的是绕过浏览器对单个域名的并发连接限制（通常是6个）。但在你的场景中，主域名的图片加载并没有因为这个限制而成为瓶颈，反而因为额外的DNS查询和TCP握手时间拖慢了整体性能。这是一个典型的“过度优化”案例。

1. DNS查询开销
每个子域名都需要独立的DNS解析，这会增加额外的延迟。你提到两个子域名的DNS查询总时间多了150ms，这说明DNS解析已经成为主要的性能瓶颈之一。需要注意的是，DNS解析时间受多个因素影响，比如用户的ISP、DNS服务器的响应速度以及是否启用了DNS缓存。

解决方法：
- 确保你的DNS服务器支持EDNS0扩展协议，并且配置了合理的TTL值（比如300秒到3600秒之间）。过短的TTL会导致频繁的DNS查询，过长的TTL则会影响更新的及时性。
- 如果可能，启用HTTPDNS服务，绕过运营商的公共DNS，直接使用IP地址解析。这样可以显著减少DNS解析时间。

2. 连接建立的开销
即使DNS解析完成，每个子域名仍然需要单独的TCP连接建立过程。在没有启用HTTP/2的情况下，每个连接都需要进行三次握手，再加上TLS握手（如果用HTTPS），这个过程会进一步放大延迟。

解决方法：
- 升级服务器到支持HTTP/2。HTTP/2的一个重要特性是多路复用，允许在一个连接上同时传输多个资源，从而完全避免了域名分片的需求。实际上，HTTP/2的设计初衷就是为了解决域名分片带来的副作用。
- 如果暂时无法升级到HTTP/2，可以通过启用持久连接（Keep-Alive）来减少连接建立的开销。确保服务器配置了合理的Keep-Alive Timeout值（比如30秒到60秒），以复用已有的TCP连接。

3. CDN配置的影响
你提到子域名可能需要特别的CDN配置，这一点非常重要。如果子域名没有正确接入CDN，或者CDN节点分布不合理，会导致用户访问图片时绕过了最佳路径，增加了网络延迟。

解决方法：
- 确保static1.example.com和static2.example.com都正确配置了CDN，并且CDN节点覆盖了目标用户的地理区域。
- 在CDN配置中启用HTTP/2支持，并检查是否有针对图片资源的压缩和缓存优化策略。例如，可以开启Brotli压缩，以及设置较长的缓存时间（比如一年）。

4. 回归单一域名的可行性
既然你在测试中发现单一域名的表现更好，那么可以考虑放弃域名分片，改为通过其他方式提升并发能力。比如：

- 使用雪碧图（CSS Sprites）合并小图片，减少HTTP请求数量。
- 启用懒加载（Lazy Loading），但要注意loading="lazy"的兼容性问题。某些老旧浏览器可能不支持这个属性，建议搭配Intersection Observer API实现更可靠的懒加载。

以下是一个基于Intersection Observer的懒加载实现示例：

// 检查浏览器是否支持原生懒加载

if ('loading' in HTMLImageElement.prototype) {

    console.log('浏览器支持原生懒加载');

} else {

    // 使用Intersection Observer实现懒加载

    document.addEventListener("DOMContentLoaded", function() {

        var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

        if ("IntersectionObserver" in window) {

            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

                entries.forEach(function(entry) {

                    if (entry.isIntersecting) {

                        let lazyImage = entry.target;

                        lazyImage.src = lazyImage.dataset.src;

                        lazyImage.classList.remove("lazy");

                        lazyImageObserver.unobserve(lazyImage);

                    }

                });

            });

            lazyImages.forEach(function(lazyImage) {

                lazyImageObserver.observe(lazyImage);

            });

        } else {

            // 兼容不支持Intersection Observer的浏览器

            lazyImages.forEach(function(lazyImage) {

                lazyImage.src = lazyImage.dataset.src;

            });

        }

    });

}

这段代码会优先使用原生懒加载，如果不支持，则回退到Intersection Observer实现。这样可以最大限度地提升兼容性和性能。

总结
你的问题主要是由于DNS查询和连接建立的开销超过了域名分片带来的并发优势。短期来看，可以通过优化DNS解析、启用持久连接和调整CDN配置来缓解问题。但从长期来看，升级到HTTP/2是最彻底的解决方案，它不仅能消除域名分片的需求，还能大幅提升资源加载效率。如果你决定回归单一域名，记得结合懒加载和其他前端优化手段，确保整体性能不会受到影响。

最后提醒一句，优化不是越复杂越好，有时候简单直接的方式反而更有效。希望这些建议能帮到你！