应避免在 DOMContentLoaded 中执行重排重绘密集操作，改用 requestAnimationFrame、classList.toggle、DocumentFragment 等优化手段，并节流事件、延迟非关键脚本、慎用硬件加速，重视交互反馈时机。
避免在 DOMContentLoaded 里执行重排重绘密集操作
页面 DOM 就绪后立刻遍历所有 .card 元素并批量设置 style.transform，看似合理，实则极易触发同步布局抖动。浏览器必须回溯计算样式、布局、绘制，尤其当节点数超 50 时，主线程卡顿明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame包裹样式变更，让浏览器把更新合并到下一帧 - 优先用
classList.toggle()切换预定义 CSS 类，而非直接写element.style.xxx - 对列表类交互（如筛选、排序），改用
DocumentFragment批量插入，避免逐个appendChild
节流 scroll 和 resize 事件回调函数
监听 window.onscroll 并实时读取 scrollTop + 调用 getBoundingClientRect() 是常见性能杀手。移动端每秒可能触发 60+ 次，而每次读取布局属性都会强制同步计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
lodash.throttle或原生setTimeout+ 标志位实现 100ms 内最多执行一次 - 改用
IntersectionObserver替代滚动监听做懒加载或视区判断——它不触发重排，且由浏览器异步调度 - 若必须响应 resize，只监听
orientationchange或用 CSS@media配合matchMedia查询，避开高频 resize
减少第三方脚本对首屏渲染的阻塞
analytics.js、chat-widget.min.js 等未加管控的 <script> 标签，常以 blocking 方式加载，拖慢 DOMContentLoaded 达数百毫秒，尤其弱网下更明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 非关键脚本一律加
defer；确认无 DOM 依赖的（如埋点）加async - 用
rel="preconnect"提前建立 CDN 域名连接，例如：<link rel="preconnect" href="https://cdn.example.com"> - 对广告、客服等可延迟加载的组件，用
loading="lazy"的<iframe>或动态import()加载其包裹容器
用 will-change 和 transform: translateZ(0) 慎重开启硬件加速
很多教程盲目推荐给所有动画元素加 will-change: transform，结果导致内存占用飙升、纹理缓存失效频繁，反而降低帧率。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅对真正需要频繁动画的元素（如轮播图
.carousel-item）在动画开始前 1 帧设置will-change，动画结束后立即移除 - 避免在伪类（如
:hover）中声明will-change，浏览器无法及时回收资源 -
translateZ(0)在 iOS Safari 15.4 以下有兼容性问题，应配合@supports (transform: translateZ(0))使用
