【第二部分】滚动时固定多元素的Vanilla JavaScript性能优化咨询

之前看到你在原生ES6环境下实现了滚动固定区块的功能，现在碰到性能瓶颈了对吧？别担心，我给你几个实战过的优化方案，都是原生环境下就能用的，不用依赖任何框架：

1. 优先用CSS原生方案：position: sticky #

如果你的场景符合条件（父容器没有设置overflow: hidden/scroll、固定位置是相对于父容器视口），直接用CSS的position: sticky是性能最优的选择——这是浏览器原生实现的，完全不需要JS参与，不会有任何JS层面的性能损耗。

示例代码：

.project {
  /* 当元素滚动到距离视口顶部20px时固定 */
  position: sticky;
  top: 20px;
}

如果这个方案能满足你的需求，直接用它就完事了，这是最省心的优化。

2. 用Intersection Observer替代scroll事件监听 #

如果必须用JS实现（比如sticky满足不了复杂的固定逻辑），别再监听scroll事件了！试试浏览器原生的Intersection Observer API——它是异步运行的，不会在滚动时频繁阻塞主线程，性能比scroll监听好太多。

核心思路是：给每个需要固定的区块设置一个观察器，当元素滚动到触发位置时，自动添加/移除固定类。

示例代码：

// 提前缓存所有需要处理的区块
const projectSections = document.querySelectorAll('.project');

// 创建观察器实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当元素顶部距离视口顶部小于等于0时，添加固定类
    if (entry.boundingClientRect.top <= 0) {
      entry.target.classList.add('fixed');
    } else {
      entry.target.classList.remove('fixed');
    }
  });
}, {
  // 调整触发时机，比如当元素顶部进入视口上方10px时触发
  rootMargin: '0px 0px -10px 0px',
  threshold: 0
});

// 开始观察所有区块
projectSections.forEach(section => observer.observe(section));

3. 给scroll事件加节流（Throttle） #

如果实在离不开scroll事件监听，一定要给回调函数加节流——限制回调的执行频率（比如每100ms执行一次），避免每秒几十次的触发导致主线程过载。

示例代码：

// 节流函数实现
function throttle(func, delay = 100) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 缓存DOM元素，避免每次滚动都重新查询
const header = document.querySelector('.forewords');
const projects = document.querySelectorAll('.project');
const headerHeight = header.offsetHeight;

// 节流后的滚动处理函数
const handleScroll = throttle(() => {
  const scrollTop = window.scrollY;
  
  projects.forEach(project => {
    if (scrollTop >= project.offsetTop - headerHeight) {
      project.classList.add('fixed');
    } else {
      project.classList.remove('fixed');
    }
  });
}, 100);

// 添加监听
window.addEventListener('scroll', handleScroll);

4. 减少重排重绘的额外优化 #

不管用哪种方案，这些细节能进一步提升性能：

• 提前缓存DOM引用和布局值：比如offsetTop、offsetHeight这些属性，不要在滚动回调里反复读取，提前存好变量。
• 用GPU加速减少重排：给固定元素添加will-change: position或者transform: translateZ(0)（注意不要滥用，只给需要固定的元素加），让浏览器把元素放到GPU层渲染，避免触发全局重排。
• 避免强制同步布局：不要在滚动回调里先读取布局属性（比如scrollTop、offsetTop），立刻又修改元素样式，这样会导致浏览器强制重新计算布局，拖慢性能。

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