大家好，我是【小奇腾】。

上一篇文章我们通过 Performance 面板验证了 transform 带来的极致性能。很多同学写到这里可能觉得任务已经完成了：既有了性能，又有了动画，完美！

但作为一个追求极致的前端，我们不能止步于此。

在实际生产环境中，我发现了一个致命的隐患：当用户把页面切换到后台（比如切了标签页去回消息），过一会再切回来时，轮播图竟然滑到了空白区域，或者出现了诡异的倒退动画。

今天我们就来通过“无缝循环”的实现，顺便把这个浏览器机制导致的“隐形 Bug”给彻底解决掉。

本期详细的视频教程bilibili：《轮播图性能优化（续）：基于 Transform 的无缝循环与“隐形”Bug 排查》

一、 核心原理：给 DOM 加个“影分身”

为什么会有“倒退”感？ 因为我们的图片结构是 [1] -> [2] -> [3]。当滚到 3 之后，为了回到 1，必须把位移（TranslateY）归零。浏览器会忠实地播放这个“从底回到顶”的动画，这就是倒退感的来源。

怎么解决？欺骗眼睛。

我们需要利用**“克隆大法”**，在列表的最后，偷偷补一张和第一张一模一样的图片。 结构变成：[1] -> [2] -> [3] -> [1'] （注意：1' 是克隆体）。

新的动画剧本如下：

1. 正常播放：1 → 2 → 3 → 1'。
2. 视觉欺骗：当滚到 1' 时，用户以为回到了开头。
3. 偷天换日：在 1' 播放结束的瞬间，我们瞬间（关掉动画）把位置切回真正的 1。
4. 无限循环：由于 1' 和 1 长得一样且位置重合，用户根本察觉不到这次“瞬移”。

二、 致命隐患：浏览器的“偷懒”与“罢工”

按照理想剧本，我们通常会监听 transitionend 事件来重置位置。但实际运行时，我发现了一个致命的隐患：

浏览器的渲染引擎非常“聪明”，但有时候聪明反被聪明误。它有两个特性如果不注意，就会导致严重的 Bug。

1. 特性一：后台“罢工”导致的空白灾难

当页面处于后台时（比如用户切了标签页），浏览器为了省电，会**“罢工” ：它会极度降低定时器的频率，甚至完全暂停**渲染相关的事件（如 transitionend）。

灾难推演：

1. 代码运行到了 Index 3 (克隆图) 。
2. 此时用户切到了后台。
3. transitionend 事件没触发（因为浏览器在后台不渲染动画），导致 currentIndex 没有被重置回 0。
4. 定时器还在缓慢运行（JS 引擎还在半睡半醒地干活），下一次执行时，currentIndex 变成了 4，然后是 5...
5. 当用户切回前台时，translateY 已经是负几千像素了，那边没有图片，只有一片空白。

2. 特性二：前台“偷懒”导致的动画穿帮

即使在前台，浏览器还有一个“坏毛病”：合并批处理（Batch Processing） 。我们可以把浏览器想象成一个**“爱偷懒的粉刷匠”**。

假如我们写了这样的代码想让图片瞬间复位：

JavaScript

// 指令 A: 瞬间归位
wrapper.style.transition = 'none';      
wrapper.style.transform = 'translateY(0px)';

// 指令 B: 播放下一张
wrapper.style.transition = 'transform 0.5s'; 
wrapper.style.transform = 'translateY(-200px)'; 

浏览器的内心戏是这样的：

“主人说话太快了！刚才说‘关动画、移到 0’，几微秒后马上又说‘开动画、移到 -200’... 既然这么快，中间那个‘移到 0’我就省略了吧！ 我直接带着动画，从当前位置滑到 -200px 好了。”

结果： “瞬间归零”的动作被吞掉了，用户看到了错误的倒退动画。

3. 如何治好浏览器的“偷懒”？—— 强制重排

为了让浏览器乖乖听话，我们需要在两条指令中间，强行插入一行读取高度的代码：

JavaScript

// 指令 A
wrapper.style.transition = 'none';
wrapper.style.transform = 'translateY(0px)';

// 🔥 关键代码：wraper.offsetHeight; 
// 就像对粉刷匠喊：“停！现在拿尺子给我量一下墙有多高？”

// 指令 B
wrapper.style.transition = 'transform 0.5s';
...

这一行的作用（强制刷新渲染队列）： 当你要读取 offsetHeight 时，浏览器为了给你一个百分之百正确的高度数据，它必须立刻、马上把刚才积压的样式修改（指令 A）全部执行完，重新计算布局（Reflow），才能量出高度。

通过这个操作，我们强迫浏览器**“把墙先漆白（归位），再去漆蓝（下一张）”**，从而实现了逻辑的严格执行。

三、 最终完美版代码（生产环境可用）

这是结合了克隆节点、防切后台空白、强制重排的最终代码。

1. HTML 结构

手动在最后复制第一张图。

<div class="viewport">
    <div class="wraper">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide slide-clone">1</div>
    </div>
</div>

2. JS 逻辑实现

const wraper = document.querySelector('.wraper');
const slideHeight = 200; 
const realSlidesCount = 3; // 真实的图片数量
let currentIndex = 0;

function runScroll() {
    // --- 🔥 第一道防线：防切后台导致索引越界 ---
    // 如果当前已经在最后一张（克隆图），说明上一次动画结束后的重置可能因为切后台没触发
    // 这时候必须强制手动归位，这是一种“自愈”机制
    if (currentIndex >= realSlidesCount) {
        currentIndex = 0;
        wraper.style.transition = 'none'; // 关动画
        wraper.style.transform = `translateY(0px)`; // 回零
        
        // --- 🔥 第二道防线：强制重排 (Reflow) ---
        // 读取 offsetHeight 会强迫浏览器立刻执行上面的样式修改
        // 确保“瞬间归位”真的在这一刻完成，而不是被合并到下一帧
        wraper.offsetHeight; 
    }
    // ------------------------------------

    currentIndex++;
    // 开启过渡动画
    wraper.style.transition = 'transform 0.5s ease-in-out';
    const offset = -(currentIndex * slideHeight);
    wraper.style.transform = `translateY(${offset}px)`;
}

// 监听动画结束：处理正常的无缝衔接
wraper.addEventListener('transitionend', () => {
    // 如果滚到了克隆的那张图
    if (currentIndex === realSlidesCount) {
        // 1. 瞬间关闭动画
        wraper.style.transition = 'none';
        // 2. 瞬间移动回起点 (真正的第一张)
        currentIndex = 0;
        wraper.style.transform = `translateY(0px)`;
        
        // 3. 同样需要强制重排，防止浏览器偷懒
        wraper.offsetHeight; 
    }
});

setInterval(runScroll, 2000);

四、 总结

通过实现这个看似简单的轮播图，我们其实解决了一系列深度的前端问题：

1. 性能层：用 Transform 替代 Margin 避开重排重绘。
2. 逻辑层：用 克隆节点 实现无缝循环。
3. 原理层：用 强制重排 (offsetHeight) 解决浏览器的合并渲染策略。
4. 工程层：用 防卫式编程 解决切后台导致的事件丢失隐患。

现在的轮播图已经非常稳健了。但是，如果我们要渲染的不是 3 张图，而是 10,000 张图 呢？ 直接操作这么多 DOM 节点，用 offsetHeight 也会有性能压力。

下一篇文章，我们将挑战前端性能优化的终极 BOSS ——《虚拟列表（Virtual List）原理与实现》，教你如何只用极少的 DOM 节点，渲染海量数据！

喜欢这篇专栏的小伙伴，记得点赞+关注【小奇腾】 ，我们下期见！