使用jQuery动态设置CSS实现表头吸顶时滚动卡顿如何优化

优先推荐：用CSS原生position: sticky实现（性能最优） #

这是卡顿最少、实现最简单的方案，完全不需要JS控制滚动逻辑，浏览器原生做了渲染优化，帧率可以稳定在60帧。
你只需要给表头添加如下CSS样式即可：

#idHeader tr th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 必须设置背景，否则滚动时下方内容会透到表头上方 */
  z-index: 10; /* 保证表头层级高于表格内容 */
}

注意：该属性兼容性覆盖绝大多数现代浏览器，只要你的业务不需要兼容IE11及以下版本都可以直接使用。 #

如果必须使用JS实现，按以下步骤优化原有代码 #

你原有代码的卡顿核心来自这几个问题：频繁DOM查询、无意义的显隐操作触发全表重排、修改top属性触发高频重排、防抖参数设置不合理等于没有防抖。
优化步骤如下：

• 页面初始化阶段就缓存所有需要操作的DOM元素，不要每次滚动触发时都重复查询DOM
• 缓存容器的固定偏移值，仅在窗口大小变化时重新计算，不需要每次滚动都重复获取
• 删除完全没必要的tbody显隐切换逻辑，这步操作会触发整个表格的重排，是卡顿的核心诱因之一
• 用transform: translateY()代替直接修改top属性，transform属于合成层属性，修改时只会触发重绘不会触发重排，渲染开销低一个数量级，还可以调用GPU加速
• 用requestAnimationFrame代替1ms的防抖，保证每帧仅执行一次更新逻辑，匹配浏览器的渲染节奏
  优化后的代码示例：

// 初始化阶段缓存DOM元素和固定偏移值
const $div1 = $("#div1");
const $headerTh = $("#idHeader tr th");
let div1OffsetTop = $div1.offset() ? $div1.offset().top : 0;

// 仅在窗口尺寸变化时重新计算偏移值
$(window).resize(() => {
  div1OffsetTop = $div1.offset() ? $div1.offset().top : 0;
});

updateValue = () => {
  const scrollTop = $(window).scrollTop();
  const translateY = scrollTop >= div1OffsetTop ? scrollTop - div1OffsetTop - 10 : 0;
  $headerTh.css("transform", `translateY(${translateY}px)`);
};

handleScroll = () => {
  window.requestAnimationFrame(updateValue);
};

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