首图必须同步加载，非首图用loading="lazy"+decoding="async"；用IntersectionObserver预加载下一张图；轮播动画只用transform+opacity；DOM节点应虚拟化至≤3个。
轮播图图片没加载完就自动播放？用 loading="lazy" 反而更慢
浏览器原生懒加载对轮播图第一张图无效，且可能阻塞 DOMContentLoaded。轮播图首屏必须立即可见，loading="lazy" 会延迟首图解码，造成白屏或闪动。
- 首图务必用
loading属性 - 非首图（第2张起）可设
loading="lazy"，但需配合decoding="async"避免主线程阻塞解码 - 所有轮播图
width和height属性，防止布局偏移（CLS）
用 IntersectionObserver 替代定时器预加载下一张图
传统 setInterval 轮播在页面不可见时仍消耗 CPU，且无法感知用户是否真正在看。改用 IntersectionObserver + 显式预加载，只在轮播容器进入视口前 200px 就触发下一张图的 fetch() 或 new Image().src。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const nextIndex = (currentIndex + 1) % slides.length;
const nextImg = slides[nextIndex].querySelector('img');
if (nextImg && !nextImg.complete) {
const preload = new Image();
preload.src = nextImg.dataset.src || nextImg.src;
}
}
});
}, { rootMargin: '200px' });
observer.observe(carouselContainer);
CSS 动画卡顿？禁用 transform: translateX() 的 layout 触发
轮播图位移若依赖 left/top 或未声明 will-change，每次动画都会触发重排（reflow），尤其在低端安卓机上明显掉帧。
- 只用
transform: translateX()+opacity，二者均为合成属性（compositor-only） - 给轮播容器加
will-change: transform（仅在动画进行中动态添加，结束后移除） - 避免在轮播元素上设置
box-shadow、filter等强制重绘（repaint）属性
HTML 结构臃肿？轮播图 DOM 节点数超过 5 张就该做虚拟化
10 张图全塞进 HTML，不仅初始体积大，还导致 JS 遍历 querySelectorAll('.slide') 变慢，CSS 选择器匹配也变重。真实项目中，超过 5 张图应只渲染当前、前一张、后一张共 3 个 ，其余用数据驱动。
立即学习“前端免费学习笔记（深入）”；
- DOM 节点始终 ≤ 3 个，通过
data-index和 JS 控制显示逻辑 - 图片地址存在 JS 数组里，不写死在 HTML 中，减少首屏 HTML 大小
- 切换时用
replaceChild()或innerHTML替换内容，而非display: none切换——后者仍参与渲染树构建
