先聊聊滚动卡顿的“第一层”——别让事件炸毛

说实话，滚动卡顿Zui常见的根源就是把所有事儿dou塞进 scroll 回调里。

你一滑页面JS 那叫一个“嗖嗖”地跑，频率Neng高到每秒几百次。

Ru果回调里还有 DOM 读取、样式写入，那可就直接把帧率逼到个位数。

先把 passive: true 加上，告诉浏览器我不拦截默认行为。

window.addEventListener;

再配合节流或 requestAnimationFrame 把geng新压到下一帧：

let ticking = false;
window.addEventListener => {
  if  {
    requestAnimationFrame => {
      // 只在这里Zuo必要的计算
      updateUI;
      ticking = false;
    });
    ticking = true;
  }
}, { passive: true });

这个层次啊，我常说是“先读后写”。

比如你要根据滚动距离改按钮透明度，还想顺便算个位置：

// ❌ 错误写法：读写交替触发 Layout
function badUpdate {
  const top = btn.offsetTop;        // 读
  btn.style.opacity = scrollY> 100 ? 1 : 0; // 写
  const newBottom = btn.offsetTop + btn.offsetHeight; // 再读 → 强制 Layout
  btn.style.bottom = `${newBottom}px`; // 再写
}

改成先批量读取，再统一写入：

// ✅ 正确写法：批量读 → 批量写
function goodUpdate {
  const scrollPos = document.documentElement.scrollTop;
  const rect = btn.getBoundingClientRect; // 一次读
  const opacity = scrollPos> 100 ? '1' : '0';
  const bottom = rect.bottom + window.innerHeight - rect.height + 'px';
  btn.style.opacity = opacity;   // 写
  btn.style.bottom = bottom;     // 写
}

这一步有点像给元素装了个滑板，让它在 GPU 上飞。

核心技巧是使用 transform: translateZ 或者 will-change: transform 把元素提升为独立合成层。

.sticky-header {
  position: sticky;
  top: 0;
  will-change: transform;
}

一旦变成合成层，滚动时浏览器只需要移动这张“贴纸”，不必重新算布局和绘制。

当页面里有千百甚至上万条数据时你真的想一次性把它们全挂到 DOM 上吗？哈哈，那画面太恐怖了。

思路hen简单：只保留可视区里的几行 DOM，滚动时复用这些节点。

// 简易虚拟滚动示例
const container = document.querySelector;
const itemHeight = 50; // 假设每项高度固定
function render {
  const scrollTop = container.scrollTop;
  const startIdx = Math.floor;
  const endIdx   = startIdx + Math.ceil + 5; // buffer
  container.innerHTML = '';
  for  {
    const div = document.createElement;
    div.className = 'item';
    div.style.transform = `translateY`;
    div.textContent = `第 ${i+1} 条数据`;
    container.appendChild;
}
}
container.addEventListener => requestAnimationFrame);
render;

Ru果数据高度不固定，Ke以用浏览器原生的 content-visibility: auto 或者geng高级的 ResizeObserver 来懒加载。

有时候单纯的前端技巧Yi经帮不了忙，这时候就该考虑 Web Worker。

Lodash 的节流、FastDOM 的批处理dou只Neng在主线程里跑。真正想让 UI 不被阻塞，就把数据过滤、排序、聚合这些 CPU 密集型任务扔给 Worker。

// 主线程
const worker = new Worker;
worker.postMessage;
worker.onmessage = e => {
   renderList; // 收到过滤好的结果再渲染
};
// filter-worker.js
self.onmessage = e => {
   const filtered = e.data.filter;
   self.postMessage;
};

其实原因蛮多，Zui常见的就是页面渲染太慢、内容是 JS 动态生成而没有 SSR，导致爬虫拿不到有效文本。还有就是 robots.txt 把路径屏蔽了或者 meta 标签里加了 noindex。咱们这里讲滚动卡顿，也顺带提醒一句：Ru果页面卡得像蜗牛爬，你的网站搜索引擎友好度也会大打折扣哦！哈哈。

P1：给 scroll 加 passive、节流或 rAF；

P2：读写分离，避免 Layout Thrashing；

P3：提升关键元素到合成层，用 will-change；

P4：采用虚拟滚动或 content‑visibility，只渲染视口内内容；

P5：把重计算搬到 Web Worker，让主线程保持轻盈。

CJ说这套方案不是一次性全开，而是根据实际情况逐步叠加。先从Zui容易实现的第一层下手，感受一下帧率回升，然后再往上爬。别忘了打开 Chrome DevTools 的 Performance 面板，kan那红红的长任务到底是哪块代码在拖后腿。

说实话，我自己也曾因为一个不经意的 .offsetHeight循环把页面搞得卡死，那种感觉真是“哎呦我去”。后来摸索出这五层套路后我家项目从掉帧十几毫秒直接稳在两三毫秒左右。现在每次kan到同事抱怨卡顿，我就笑：“兄弟，你这还没上第二层呢”。哈哈，希望你kan完这篇文章，也Neng在自己的项目里踩出一条丝滑之路。懂得的话，就赶紧去试试吧！祝编码愉快~