使用transform和requestAnimationFrame的动画滚动卡顿排查

你的代码存在4个明显的性能问题，共同导致滚动时动画卡顿：

• 无意义的永久rAF空耗：当前requestAnimationFrame递归是无限执行的，哪怕页面完全静止、没有任何滚动操作，每帧都会执行读取window.scrollY、遍历元素、设置transform的逻辑。就算滚动偏移量和上一帧完全一致，重复设置相同的样式值也会触发浏览器样式重计算，持续占用主线程资源，真正触发滚动时主线程资源不足，自然出现掉帧卡顿。
• 动画元素未启用合成层加速：仅使用transform不代表动画一定会走硬件加速，你没有告知浏览器该元素会有持续变换，浏览器默认不会把它分配到独立合成层，transform的更新仍然会走主线程绘制流程，和页面滚动的主线程任务互相抢占资源。
• 实时DOM集合的额外开销：document.getElementsByClassName返回的是实时更新的HTMLCollection，每次访问集合内的元素时，浏览器都会重新扫描整个DOM树确认集合内容是否变化，即使页面上只有一个目标元素，也会产生不必要的性能损耗。
• 滚动监听未做优化：你完全脱离滚动事件自主调度帧任务，一方面时序上无法和浏览器原生滚动节奏对齐，另一方面没有声明滚动事件为被动模式，浏览器会等待JS执行确认是否阻止默认滚动，直接阻塞滚动响应。

JavaScript 部分 #

// 初始化时直接缓存单个目标元素，避免实时集合的遍历开销
const floatingEl = document.querySelector('.floating');
let lastScrollOffset = null;
let scheduledRaf = null;

function updateFloatingPos() {
    const currentOffset = window.scrollY;
    // 滚动偏移和上一次一致时跳过更新，避免无意义的样式计算
    if (currentOffset === lastScrollOffset) {
        scheduledRaf = null;
        return;
    }
    lastScrollOffset = currentOffset;
    // 用translate3d触发硬件加速，直接走合成层更新
    floatingEl.style.transform = `translate3d(0, ${currentOffset}px, 0)`;
    scheduledRaf = null;
}

// 滚动触发时再调度帧更新，无滚动时完全不占用JS线程
window.addEventListener('scroll', () => {
    if (!scheduledRaf) {
        scheduledRaf = requestAnimationFrame(updateFloatingPos);
    }
}, { passive: true }); // passive标记告知浏览器不会阻止默认滚动，大幅提升滚动响应速度

CSS 部分 #

仅需要给.floating类增加合成层提示即可，其余样式不变：

.floating {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    left: 0;
    right: 0;
    text-align: center;
    /* 提前告知浏览器该元素会有transform变化，提升到独立合成层 */
    will-change: transform;
    /* 兼容不支持will-change的旧浏览器时，可打开下面这行替代 */
    /* transform: translateZ(0); */
}

优化后只有滚动发生时才会执行动画更新逻辑，且transform更新完全在合成线程执行，不会阻塞主线程滚动，卡顿问题会完全消失。

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