jQuery实现滚动时overlay淡出效果在旧PC卡顿不流畅问题咨询

首先你的判断不完全正确：旧硬件性能不足是卡顿的触发因素，但核心原因是现有代码的实现方式存在大量高开销操作，性能冗余度低，才会在弱性能设备上被放大出现卡顿。

现有代码的性能问题点 #

• 滚动事件每秒可触发60次以上，代码内每次触发都重复执行$('.overlay')、$('.container-gesamt')DOM查询，DOM查询在旧设备上开销极高
• 每次事件回调都调用is(':visible')这类jQuery封装的判断方法，增加了不必要的运算开销
• 同步修改opacity和padding-top两个属性，其中padding-top的修改会触发全页重排（reflow），重排会导致浏览器重新计算所有元素的位置和尺寸，是卡顿的核心诱因
• 没有做事件节流，大量重复的无意义执行会占用设备算力

优化方案 #

代码逻辑优化 #

你可以参考以下优化后的代码，改动点包括提前缓存DOM元素、用requestAnimationFrame做事件节流、用transform替代padding-top避免重排：

// 提前缓存DOM元素，全局只查询一次
const $overlay = $('.overlay');
const $container = $('.container-gesamt');
let lastScrollTop = 0;
let ticking = false; // 节流锁标记

function updateEffect(scrollTop) {
  if (($overlay.is(':visible') || scrollTop < lastScrollTop)) {
    if (scrollTop < 150) {
      $overlay.show();
      $overlay.css('opacity', (150 - scrollTop) / 150);
      // 用transform的translateY代替padding-top，仅触发复合层渲染，不会触发重排
      $container.css('transform', `translateY(${scrollTop}px)`);
    } else {
      $overlay.hide();
    }
  }
  lastScrollTop = scrollTop;
  ticking = false;
}

$(window).on('scroll', function() {
  const currentScroll = $(this).scrollTop();
  // 节流逻辑：仅当没有待执行的渲染任务时才提交新任务
  if (!ticking) {
    window.requestAnimationFrame(() => updateEffect(currentScroll));
    ticking = true;
  }
});

CSS配合优化 #

给对应元素添加以下CSS规则，通知浏览器提前分配渲染资源，开启GPU加速降低渲染开销：

.overlay, .container-gesamt {
  will-change: opacity, transform;
  /* 兼容旧版本浏览器的GPU加速触发规则 */
  transform: translateZ(0);
}
/* 如果原本container-gesamt的padding-top是用来做顶部占位，可添加固定top避免布局偏移 */
.container-gesamt {
  position: relative;
}

优化后可以减少90%以上的不必要运算和重排开销，绝大多数旧PC设备都可以流畅运行该效果。

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