低端机滚动掉帧主因是浏览器每帧被迫同步计算：dom过多触发重排、scroll未设passive: true阻塞渲染、css未激活gpu合成层；真机fps低于40即可锁定这三类问题。
为什么低端机一滚动就掉帧
根本不是“JS太慢”，而是浏览器在每帧里被迫做大量同步计算：DOM节点太多触发重排、scroll事件没设passive: true阻塞渲染线程、CSS没激活GPU合成层。真机测出FPS低于40，基本能锁定这三类问题。
DOM结构和滚动容器必须收敛
移动端滚动性能对DOM深度和容器范围极度敏感。超过6层嵌套的div会拉长touchstart冒泡路径；给body加overflow: scroll会让整个页面参与合成，内存暴涨。
- 用Chrome DevTools → Elements面板右键任意元素 →
Show DOM properties查depth值，超6就拆 - 滚动区域必须限定在具体容器（如
.list-wrapper），别碰body或html - 避免为样式或JS选择器套无意义
div，改用display: contents抹除包裹层（Safari 15.4+支持） - 长列表项超200条？虚拟滚动是唯一解法，
react-window或手写IntersectionObserver方案都比硬扛强
scroll事件监听必须带passive: true
不加这个参数，iOS和安卓WebView默认把scroll当可能调用preventDefault()的事件，强制等JS执行完才滚动——肉眼可见延迟，控制台还会报Unable to preventDefault inside passive event listener。
- 写法必须是：
window.addEventListener('scroll', handler, { passive: true }) - 真需要阻止滚动（如下拉刷新），改用
touchstart+touchmove，且只在必要时设passive: false - 别在回调里读
getBoundingClientRect()或写el.style.top，这会触发强制同步布局 - 位置读取优先用
el.scrollTop，它比window.scrollY轻量
CSS合成层必须手动激活
光写transform: translateY()不够，元素没被提升到独立图层，GPU加速就无效。iOS尤其依赖-webkit-overflow-scrolling: touch开启惯性滚动，但这个属性本身有兼容陷阱。
- 滚动容器样式必须含：
overflow-y: scroll+-webkit-overflow-scrolling: touch+transform: translateZ(0) - 禁用
will-change: scroll-position——iOS 15前基本无效，还可能炸内存 - 安卓WebView要检查原生层设置：
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)，别被旧插件默认设成software -
-webkit-overflow-scrolling: touch在Safari上偶发卡死，若出现“点一下能滑、再点不动”，立刻降级为auto并切回requestAnimationFrame驱动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
