同域名并发加载

基础概念

同域名并发加载指的是在同一域名下，浏览器同时发起多个请求来加载资源（如HTML、CSS、JavaScript文件、图片等）。由于浏览器的同源策略，同一域名下的并发请求是有限制的，这是为了防止服务器过载和保护用户隐私。

类型

并发请求限制：浏览器对同一域名的并发请求有一定的限制，不同浏览器的限制不同，通常在6-8个之间。
DNS查询：浏览器会缓存DNS查询结果，减少DNS查询时间。
TCP连接复用：HTTP/1.1协议下，同一域名下的请求可以复用同一个TCP连接，减少连接建立的开销。

应用场景

静态资源加载：网站中的图片、CSS、JavaScript文件等静态资源可以通过同一域名并发加载，提高页面加载速度。
API请求：前后端分离的应用中，前端可以通过同一域名并发请求后端API，获取数据并渲染页面。
CDN加速：使用内容分发网络（CDN）时，同一域名下的资源可以通过多个CDN节点并发加载，提高访问速度。

常见问题及解决方法

1. 浏览器并发请求限制

问题描述：浏览器对同一域名的并发请求有限制，当请求超过限制时，后续请求会被阻塞，导致页面加载缓慢。

解决方法：

使用多个子域名：将静态资源放在不同的子域名下，增加并发请求的数量。例如，将图片放在img.example.com，CSS文件放在css.example.com。
使用HTTP/2：HTTP/2协议支持多路复用，可以在同一TCP连接上同时处理多个请求，不受并发请求限制。

2. DNS查询延迟

问题描述：DNS查询时间较长会影响页面加载速度。

解决方法：

使用DNS预解析：在HTML文件中使用<link rel="dns-prefetch" href="//example.com">预解析域名，减少DNS查询时间。
使用本地DNS缓存：配置本地DNS服务器或使用DNS缓存软件，减少DNS查询次数。

3. TCP连接复用问题

问题描述：在HTTP/1.1协议下，同一域名下的请求虽然可以复用同一个TCP连接，但仍然存在队头阻塞问题，影响并发性能。

解决方法：

升级到HTTP/2：HTTP/2协议支持多路复用，可以在同一TCP连接上同时处理多个请求，避免队头阻塞问题。
使用HTTP/3：HTTP/3协议基于QUIC协议，进一步优化了连接建立和数据传输过程，提高并发性能。

示例代码

以下是一个简单的HTML示例，展示了如何通过多个子域名并发加载静态资源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并发加载示例</title>
    <link rel="stylesheet" href="https://css.example.com/styles.css">
    <link rel="dns-prefetch" href="//img.example.com">
</head>
<body>
    <img src="https://img.example.com/image1.jpg" alt="Image 1">
    <img src="https://img.example.com/image2.jpg" alt="Image 2">
    <script src="https://js.example.com/script.js"></script>
</body>
</html>