轮播图应避免 setinterval，改用 requestanimationframe + visibilitystate 或 settimeout 实现精准切换；预加载图片并用 opacity/transform 替代 display:none；ios 需设 touch-action 防手势冲突。
轮播图用 setInterval 自动切换，但页面切到后台就失控
浏览器标签页切走后，setInterval 依然在跑，等切回来可能连播几帧、定时器错乱、甚至触发多次回调。这不是 bug，是标准行为。
- 改用
requestAnimationFrame+ 时间戳判断是否“该切了”，它会随页面可见性自动暂停 - 监听
document.visibilityState，在visibilitychange事件里手动暂停/恢复定时逻辑 - 更简单稳妥的做法：用
setTimeout替代setInterval，每次切完再设下一次——这样能自然中断链式调用
图片切换时闪一下，或出现白屏空隙
本质是 DOM 更新和图片加载不同步。常见于直接换 src 或用 display: none 切换元素。
- 所有图片提前加载：用
new Image().src = url预加载，或把loading="eager"加到<img alt="轮播图怎么制作html_html轮播图代码实现【详解】" >标签 - 切换时用 CSS
opacity+transition，配合visibility: hidden控制占位，避免重排 - 别用
display: none隐藏待显示项——它会清空渲染树，图片得重新 layout + paint
用 transform: translateX() 做滑动，但手指拖拽卡顿
纯 CSS 过渡在拖拽场景下不响应实时位移，必须靠 JS 控制样式。但频繁写内联 style.transform 会强制同步布局（Layout Thrashing）。
- 只在
touchmove/mousemove里更新一个状态变量（如offsetX），不操作 DOM - 用
requestAnimationFrame统一在下一帧读取状态、批量更新transform - 加
will-change: transform提前告诉浏览器这个元素要动，触发 GPU 加速（但别滥用，每个元素都加反而拖慢）
轮播图在 iOS Safari 上手势冲突、无法滑动
iOS Safari 默认把横向 touchmove 当作页面滚动处理，会吞掉你的拖拽事件。
立即学习“前端免费学习笔记（深入）”；
- 给轮播容器加
touch-action: pan-y，明确禁止横向滚动，保留竖向滚动（比如轮播图里有长文案需上下滑） - 如果完全不需要页面滚动，用
touch-action: none，但务必自己实现回弹/边界限制，否则体验生硬 - 别忘了在
touchstart里调用event.preventDefault()—— 仅当你要接管整个手势时才用，否则可能影响可访问性
