Ajax是前端开发中常用的数据交互技术，正常情况下异步Ajax请求不会阻塞浏览器主线程，但在一些特殊场景下，Ajax请求会导致浏览器出现卡顿、无响应等阻塞现象，影响用户正常使用。
Ajax请求阻塞浏览器的常见原因
1. 使用同步Ajax请求
同步Ajax请求会阻塞浏览器的主线程，在请求返回结果之前，浏览器无法执行其他操作，包括页面渲染、用户交互事件处理等。这是最常见的阻塞原因，很多开发者在初期使用Ajax时容易误用同步模式。
2. 同时发起大量并发请求
浏览器对同一个域名的并发请求数量有限制，比如Chrome浏览器对同一域名的最大并发请求数通常是6个。如果同时发起超过限制的Ajax请求，剩余的请求会被挂起等待，大量请求堆积会占用过多资源，间接导致浏览器卡顿。
3. 请求处理逻辑占用主线程
即使使用异步Ajax请求，如果请求返回后的回调函数中有大量复杂的计算逻辑、DOM操作，这些操作会在主线程中执行，长时间占用主线程也会导致浏览器无法及时响应用户操作，看起来像是被阻塞了。
4. 请求响应时间过长
如果后端接口响应速度很慢，大量异步请求处于pending状态，虽然没有阻塞主线程，但会占用网络资源和内存，当pending的请求数量过多时，也会影响浏览器的整体性能。
对应的解决方案
1. 避免使用同步Ajax请求
优先使用异步Ajax请求，将需要依赖请求结果的逻辑放在回调函数中，或者使用Promise、async/await处理异步流程，避免阻塞主线程。以下是使用fetch发起异步请求的示例：
// 使用fetch发起异步Ajax请求
fetch('https://ipipp.com/api/getData')
.then(response => {
// 检查响应状态
if (!response.ok) {
throw new Error('请求失败');
}
return response.json();
})
.then(data => {
// 处理返回的数据，避免在这里做大量复杂计算
console.log('请求到的数据：', data);
})
.catch(error => {
console.error('请求出错：', error);
});
2. 控制并发请求数量
可以通过请求队列的方式控制同时发起的Ajax请求数量，超过限制的请求先放入队列等待，等有请求完成后再从队列中取出发起。以下是一个简单的并发控制示例：
class RequestQueue {
constructor(maxConcurrency) {
// 最大并发数
this.maxConcurrency = maxConcurrency;
// 当前正在进行的请求数量
this.currentCount = 0;
// 等待队列
this.queue = [];
}
// 添加请求到队列
addRequest(requestFn) {
return new Promise((resolve, reject) => {
// 将请求和对应的resolve、reject存入队列
this.queue.push({ requestFn, resolve, reject });
this.runNext();
});
}
// 执行下一个请求
runNext() {
// 如果当前并发数达到上限或者队列为空，直接返回
if (this.currentCount >= this.maxConcurrency || this.queue.length === 0) {
return;
}
// 取出队列第一个请求
const { requestFn, resolve, reject } = this.queue.shift();
this.currentCount++;
// 执行请求
requestFn()
.then(resolve)
.catch(reject)
.finally(() => {
this.currentCount--;
// 请求完成后执行下一个
this.runNext();
});
}
}
// 使用示例，最大并发数为3
const queue = new RequestQueue(3);
// 模拟多个请求
for (let i = 0; i < 10; i++) {
queue.addRequest(() =>
fetch(`https://ipipp.com/api/data?id=${i}`).then(res => res.json())
).then(data => {
console.log(`请求${i}完成，数据：`, data);
});
}
3. 优化请求回调逻辑
对于请求返回后的处理逻辑，尽量避免大量复杂的计算和频繁的DOM操作。如果有大量计算，可以将其放入Web Worker中执行，避免占用主线程。如果是DOM操作，可以合并操作后再统一更新，减少重排重绘的次数。
使用Web Worker处理复杂计算的示例：
// 主线程代码
const worker = new Worker('worker.js');
// 发起Ajax请求
fetch('https://ipipp.com/api/bigData')
.then(res => res.json())
.then(data => {
// 将数据发送给Worker处理
worker.postMessage(data);
});
// 接收Worker返回的处理结果
worker.onmessage = function(event) {
console.log('复杂计算后的结果：', event.data);
// 这里再做DOM更新操作
};
// worker.js 中的代码
self.onmessage = function(event) {
const data = event.data;
// 执行复杂计算，不占用主线程
let result = 0;
for (let i = 0; i < data.length; i++) {
result += data[i].value;
}
// 将结果发送回主线程
self.postMessage(result);
};
4. 优化接口响应速度并增加超时处理
后端可以优化接口逻辑，减少响应时间，同时前端可以给Ajax请求增加超时处理，避免请求长时间pending占用资源。以下是给fetch请求增加超时处理的示例：
// 带超时处理的fetch请求
function fetchWithTimeout(url, timeout = 5000) {
return new Promise((resolve, reject) => {
// 设置超时定时器
const timer = setTimeout(() => {
reject(new Error('请求超时'));
}, timeout);
fetch(url)
.then(response => {
clearTimeout(timer);
resolve(response);
})
.catch(error => {
clearTimeout(timer);
reject(error);
});
});
}
// 使用带超时的请求
fetchWithTimeout('https://ipipp.com/api/slowApi', 3000)
.then(res => res.json())
.then(data => console.log('请求成功：', data))
.catch(err => console.error('请求出错：', err));
总结
Ajax请求阻塞浏览器的核心原因大多和主线程占用、并发控制不当有关，开发者在实际开发中要避免使用同步Ajax请求，合理控制并发请求数量，优化回调逻辑，同时做好超时处理，就能有效避免这类阻塞问题，提升页面的使用体验。