轮播卡顿主因是浏览器后台节流、图片加载失败、移动端延迟及兼容性问题；应改用 requestanimationframe、预检图片、禁用双击缩放、设置 touch-action、scroll-snap-type 降级处理，并严控边界条件。
轮播用 setInterval 自动切换，但页面切到后台就卡顿甚至错帧
浏览器对非活跃标签页会限制 setInterval 最低间隔（通常 ≥1000ms），导致轮播节奏失准、跳图、甚至停在某张不动。这不是代码写错了，是浏览器策略。
- 用
requestAnimationFrame替代setInterval：它随页面可见性自动启停，更省资源，也更准时 - 监听
document.visibilityState，在visibilitychange事件里手动重置计时器或暂停动画 - 别只靠 CSS
transition+ class 切换：DOM 渲染延迟叠加 JS 调度偏差，容易出现“两张图叠在一起闪一下”
图片加载失败时轮播直接崩掉或白屏
img 元素的 onerror 不会冒泡，且默认不阻止后续逻辑执行——如果某张图 404，currentIdx 还在递增，下一轮就可能取到 undefined，触发 Cannot read property 'src' of undefined 错误。
- 给每张
img加onerror="this.style.display='none'"，隐藏坏图但保留下标连续性 - 初始化时预检查
img.complete && img.naturalWidth，过滤掉加载失败的项再生成轮播列表 - 轮播逻辑里加兜底判断：
if (!slides[currentIdx]) { currentIdx = 0; return; }
移动端 touch 滑动卡顿、响应慢
原生 touchstart/touchmove 默认带 300ms 延迟（为双击缩放留余地），且频繁触发 touchmove 会导致重排重绘压力大。
- 在
<meta>里加viewport：<meta name="viewport" content="width=device-width, user-scalable=no">，禁用双击缩放，消除延迟 - 给轮播容器加
touch-action: pan-x，告诉浏览器只处理水平滑动，避免和默认行为冲突 -
touchmove回调里用event.preventDefault()，但必须配合{ passive: false }选项注册，否则会被浏览器忽略
用 scroll-snap-type 实现轮播，但 Safari 旧版本不兼容
CSS scroll-snap-type: x mandatory 写起来简洁，但 iOS 12.2 以下、Safari 12.0 以下完全不支持，会退化成可任意滚动的长列表，失去“一图一停”效果。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (scroll-snap-type: x mandatory)包裹 CSS 轮播规则，不支持时 fallback 到 JS 控制的transform: translateX()方案 - 别依赖
scroll-behavior: smooth做切换动画：它不可控、不触发回调，无法同步指示器状态 - 检测是否支持时，别只查
'scrollSnapType' in document.documentElement.style，要实际创建元素测试渲染行为
轮播真正的麻烦不在“怎么动”，而在“什么时候不该动”——页面不可见、图片没加载完、手指还没抬、滚动还没停稳……这些边界条件漏一个，用户就感知为“卡”或“错”。
