JS脚本在Mac正常运行但Windows下崩溃问题求助

我来帮你排查这个在Windows Chrome里崩溃的滚动表头同步脚本问题。首先看你贴的代码还没写完，结合场景分析，这类跨系统的滚动同步崩溃，大概率是滚动事件触发频率过高导致的性能过载——Windows Chrome的滚动事件触发机制和Mac上略有差异，短时间内会疯狂触发scroll事件，引发栈溢出或者页面卡死。

核心问题点 #

• 缺少防抖处理：滚动过程中scroll事件会连续触发，Windows系统下浏览器的事件触发密度更高，直接在事件回调里执行DOM操作会导致大量重绘重排，最终拖垮页面。
• 可能存在重复绑定事件：如果多次调用scrollingDiv函数，会重复绑定scroll事件，导致事件处理函数叠加，越滚越卡直到崩溃。

修复后的完整脚本 #

给你补全并优化后的代码，加入防抖和事件解绑逻辑：

// 防抖函数，控制事件触发频率，平衡流畅度与性能
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

function scrollingDiv(scroll, reaction, direction) {
  // 先解绑原有事件，避免重复绑定导致的事件叠加
  $(scroll).off('scroll');
  
  // 用防抖包装滚动处理函数，降低触发频率
  const handleScroll = debounce(function(e) {
    if (direction === 'horizontal') {
      $(reaction).scrollLeft($(this).scrollLeft());
    } else {
      $(reaction).scrollTop($(this).scrollTop());
    }
  }, 10); // 10ms延迟，可根据实际流畅度调整
  
  $(scroll).on('scroll', handleScroll);
}

额外优化建议 #

• 提前缓存DOM元素，避免每次事件触发都重新查询DOM：

function scrollingDiv(scrollSelector, reactionSelector, direction) {
  const $scroll = $(scrollSelector);
  const $reaction = $(reactionSelector);
  if (!$scroll.length || !$reaction.length) return; // 跳过无效元素的处理
  
  $scroll.off('scroll');
  
  const handleScroll = debounce(function() {
    if (direction === 'horizontal') {
      $reaction.scrollLeft($scroll.scrollLeft());
    } else {
      $reaction.scrollTop($scroll.scrollTop());
    }
  }, 10);
  
  $scroll.on('scroll', handleScroll);
}

• 检查HTML结构，确保scroll和reaction对应的元素没有嵌套关系，嵌套的滚动元素可能会引发事件冒泡，导致循环触发滚动事件。

为什么Mac Chrome没问题？ #

Mac系统的Chrome自带平滑滚动优化，事件触发频率相对更低，加上系统本身的渲染线程调度更宽松，所以没触发崩溃；而Windows Chrome的滚动事件触发更密集，没有防抖的话很快就会占满浏览器主线程，导致页面无响应甚至崩溃。

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