如何用jQuery定时局部刷新HTML内容且不影响页面性能

首先，咱们拆解下你遇到的核心问题：频繁用load()请求整个页面并替换DOM元素，加上不合理的定时器使用，导致页面阻塞；同时大量绑定onClick的按钮，因为DOM元素被替换后事件丢失或者重复绑定，影响性能。下面给你一步步的解决方案：

1. 先修正代码里的语法错误 #

你的reload()函数多了一个多余的闭合花括号，先把这个基础问题解决，避免不必要的报错：

<script type="text/javascript">
function reload(){
  $( "#id_1" ).load(window.location.href + " #id_1" );
  $( "#id_2" ).load(window.location.href + " #id_2" );
}
</script>

2. 优化数据请求：别请求整个页面 #

你现在用load()请求整个页面再提取部分内容，这会造成大量不必要的数据传输，是性能瓶颈的核心之一。建议后端提供一个专门的接口（比如/update-content），只返回id_1和id_2的HTML片段，这样每次请求的数据量会大幅减少，示例代码如下：

function reload(){
  $.get('/update-content', function(data) {
    $('#id_1').html(data.id1Content);
    $('#id_2').html(data.id2Content);
  });
}

如果暂时没法修改后端，至少要确保load()请求时只提取需要的部分（你当前已经做了这一步，但整个页面的请求体量还是过重）。

3. 用「递归式setTimeout」代替setInterval #

setInterval的致命问题在于：不管前一次load()请求是否完成，到时间就会发起新的请求，很容易造成请求堆积，导致页面卡顿甚至无响应。换成递归的setTimeout，每次请求完成后再设置下一次的定时器，就能彻底避免这个问题：

function autoReload() {
  reload().then(function() {
    // 请求完成后，10秒后再执行下一次
    setTimeout(autoReload, 10000);
  });
}

// 修正reload函数，让它返回Promise，方便后续链式调用
function reload(){
  return Promise.all([
    $('#id_1').load(window.location.href + " #id_1"),
    $('#id_2').load(window.location.href + " #id_2")
  ]);
}

// 页面加载完成后启动定时任务
$(document).ready(function() {
  autoReload();
});

4. 用事件委托保证按钮的事件性能 #

因为你要频繁替换id_1或id_2里的内容，如果按钮是在这些容器内，直接给按钮绑定onClick会导致元素被替换后事件丢失，而且给大量按钮逐个绑定事件本身就会消耗性能。事件委托是最优解：把事件绑定在父级（比如document或者更接近的静态父容器）上，这样不管子元素怎么刷新，事件都能正常触发，而且只需要绑定一次：

// 假设按钮的类是action-btn，用事件委托绑定点击事件
$(document).on('click', '.action-btn', function() {
  // 你的按钮点击逻辑
  console.log('按钮被点击了');
});

这种方式比给每个按钮单独绑定onClick性能好太多，尤其是按钮数量多的时候，能大大减少内存占用和事件绑定的开销。

5. 额外优化：减少DOM重绘 #

如果可以的话，你可以先对比新内容和旧内容，只有当内容真正变化时才更新DOM，避免不必要的重绘重排：

function reload(){
  return $.get(window.location.href, function(fullPage) {
    const newId1Content = $(fullPage).find('#id_1').html();
    const currentId1Content = $('#id_1').html();
    if (newId1Content !== currentId1Content) {
      $('#id_1').html(newId1Content);
    }

    const newId2Content = $(fullPage).find('#id_2').html();
    const currentId2Content = $('#id_2').html();
    if (newId2Content !== currentId2Content) {
      $('#id_2').html(newId2Content);
    }
  });
}

按照上面的方案调整后，页面的性能应该会有明显提升，不会再出现无响应的情况，同时按钮的点击事件也能稳定且高效地工作。

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