JavaScript中使用setInterval会拖慢网站吗？多页面使用有影响吗？

我开发了一个网站，希望通过JavaScript的Fetch API加载数据，实现页面无刷新更新数据。我采用的实现方式如下：

function GetData(){
    fetch('/post_data',{
        method : 'GET'
    })
    .then((response)=>{
        return response.json()
    })
    .then((data)=>{
        console.log(data)
        //Code
    })
}

window.onload = setInterval(GetData, 1000);

请问如果在多个网页中大量使用setInterval，会导致网站变慢吗？

会的，甚至可能引发比“变慢”更严重的问题，核心原因和具体影响如下：

• 请求堆积阻塞资源：setInterval是固定时间触发，完全不管上一次请求是否完成。如果某次请求因为网络波动、后端响应慢卡住了，下一次请求会准时发起，短时间内就会堆积大量未完成的请求。而浏览器对同一域名的并发请求有数量限制（一般是6个），后续请求会排队等待，不仅接口响应变慢，连页面的静态资源加载也会受影响，直接导致页面卡顿。

• 过度消耗浏览器资源：每个fetch请求都会占用网络线程、内存，多个页面同时高频发起请求，会让浏览器的CPU、内存占用飙升，轻则页面操作延迟、掉帧，重则浏览器直接出现无响应的情况。

• 无效请求恶性循环：如果后端数据没有更新，每1秒一次的请求完全是浪费带宽和服务器资源。服务器压力大了，响应速度会进一步变慢，反过来又会加剧前端的请求堆积，形成恶性循环。

优化建议 #

1. 用递归setTimeout替代setInterval：等上一次请求彻底完成（成功或失败）后，再安排下一次请求，从根源避免请求堆积：

function GetData() {
    fetch('/post_data', { method: 'GET' })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            // 处理数据的业务逻辑
        })
        .catch(err => {
            console.error('请求失败:', err);
        })
        .finally(() => {
            // 请求结束后，间隔1秒再发起下一次
            setTimeout(GetData, 1000);
        });
}

window.onload = () => {
    GetData();
};

2. 减少无效请求：让后端返回数据时带上最后更新的时间戳或版本号，前端对比本地缓存的标识，只有当数据真的更新时才处理页面；甚至可以在数据无更新时，适当延长下一次请求的间隔，降低请求频率。

3. 适配页面状态：利用document.visibilityState判断页面是否处于前台，当页面被切换到后台时暂停请求，切回前台再恢复，减少后台页面的资源消耗。

内容的提问来源于stack exchange，提问作者USER2022