display: none 仅隐藏渲染但不阻止资源加载和JS执行，导致 autoplay 触发、图片预加载及CPU消耗；应优先用 hidden 属性或服务端剔除HTML，配合JS实例销毁。
为什么 display: none 会让焦点图“消失但没完全消失”
很多开发者直接给首页轮播容器加 display: none，以为这样就彻底隐藏了。结果发现：页面加载时仍会触发 autoplay、图片预加载照常进行、甚至某些浏览器（如 Safari）还会报 Failed to load resource 警告——因为 DOM 还在，只是不可见。
-
display: none不阻止资源加载和 JS 执行，只影响渲染层 - 若焦点图使用了
IntersectionObserver或requestAnimationFrame自动轮播，隐藏后仍可能持续消耗 CPU - SEO 友好性未受影响，但对首屏性能无实质优化
用 hidden 属性替代 CSS 隐藏更干净
hidden 是 HTML5 原生布尔属性，语义明确且浏览器会主动暂停相关资源加载与脚本活动（取决于实现，但比 display: none 更可靠）。
@@##@@ @@##@@
- 支持所有现代浏览器（Chrome 8+、Firefox 23+、Safari 7+、Edge 13+）
- 可配合 JS 动态控制：
document.getElementById('hero-slider').hidden = true - 比
visibility: hidden更彻底——不占布局空间，且多数轮播库（如 Swiper、Owl Carousel）会检测该属性并自动停用实例
真正要隐藏，得从初始化源头掐断
如果首页焦点图由 JS 库驱动（比如 Swiper），光隐藏 DOM 不够，必须跳过初始化逻辑。否则即使 DOM 不可见，JS 实例仍在内存中运行。
- 检查入口 JS 是否无条件执行：
new Swiper('.hero-slider', {...})→ 改为按需初始化 - 推荐判断方式：
if (document.querySelector('.hero-slider') && !document.querySelector('.hero-slider').hasAttribute('hidden')) { ... } - 更稳妥的做法是服务端控制：模板渲染时根本不出焦点图 HTML，而非前端“藏起来”
- 若用 Webpack/Vite，可通过环境变量（如
import.meta.env.VITE_HIDE_HERO）在构建时剔除相关模块
移动端适配时容易忽略的焦点图残留行为
iOS Safari 在页面进入后台（切到其他 App）时，不会自动暂停 setInterval 或 requestAnimationFrame，导致隐藏后的焦点图仍在偷偷轮播。
立即学习“前端免费学习笔记（深入）”；
- 监听
visibilitychange事件，在document.hidden === true时手动调用轮播实例的swiper.stopAutoplay() - 部分旧版轮播库（如 bxSlider）不提供暂停 API，此时应销毁实例：
swiper.destroy(true, true) - 检查是否有内联
autoplay的或标签嵌在焦点图里——它们不受hidden影响，需单独pause()
hidden + 主动销毁 JS 实例；靠 CSS “假装看不见”，往往留下一堆后台心跳。
