滚动卡顿主因是 overflow: scroll 未触发硬件加速，需加 -webkit-overflow-scrolling: touch 和 transform: translateZ(0)；安卓 WebView 需启用 hardware layer；touchmove 必须设 passive: true；图片字体加载需异步优化。
滚动卡顿是因为 overflow: scroll 没触发硬件加速
移动端 Web 页面里，overflow: scroll 或 overflow-y: auto 容器拖动卡顿，根本原因不是 JS 太多，而是浏览器没把它当“可滚动图层”处理——默认走软件合成，帧率掉到 20–30fps。必须手动告诉浏览器：“这个区域要独立成层，用 GPU 渲染”。
实操上最稳的写法是加这两行：
scroll-container {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
transform: translateZ(0);
}
-webkit-overflow-scrolling: touch 是 iOS Safari 的开关，不加它连惯性滚动都没有；transform: translateZ(0) 强制创建合成层，激活 GPU 加速。注意：只加 translateZ(0) 不够，iOS 下仍可能卡顿。
- 别用
will-change: scroll-position替代——它在 iOS 15+ 才稳定，旧版无效 - 避免对整个
加overflow: scroll，应限定在具体容器（如<div class="list-wrapper">） <li>如果容器高度靠 JS 动态计算，确保样式生效时高度已确定，否则合成层可能被降级</li> <h3>安卓 WebView 滚动卡顿得关掉 <code>android:layerType软件渲染原生 Android App 里嵌的 WebView，即使 CSS 写对了，滚动还是卡，大概率是 Activity 或 WebView 自身启用了软件渲染层。尤其在低配机上，
layerType="software"会直接禁用所有 GPU 加速，CSS 合成层失效。立即学习“前端免费学习笔记（深入）”；
检查并修改对应 WebView 的初始化代码：
// Java webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
或者在 XML 布局中删掉
android:layerType="software"，不写默认就是hardware。- 某些旧版 Cordova/ Capacitor 插件会自动设为 software，需查插件配置或 patch 其源码
- Android 9+ 上若开启
WebView.enableSlowWholeDocumentDraw()，也会退化为软件绘制，禁用它 - 别依赖
chrome://flags里的实验选项——上线环境不可控
touchmove事件监听器导致滚动中断只要给滚动容器绑了
touchmove监听器，哪怕里面只写console.log()，iOS 和部分安卓 WebView 就会禁用原生滚动优化，变成逐帧 JS 驱动，一卡一卡的。真正需要监听拖动距离或方向时，用更轻量的方式：
- 优先用
CSS @media (pointer: coarse)+scroll事件做节流响应，避开 touch 事件 - 必须用
touchmove时，加上{ passive: true }—— 这能告诉浏览器“我不会调preventDefault()”，从而保留原生滚动 - 绝对不要在
touchmove里做 DOM 修改、重排或requestAnimationFrame循环
错误示范：
element.addEventListener('touchmove', handleDrag)（没传passive）；正确写法：element.addEventListener('touchmove', handleDrag, { passive: true })。滚动容器内图片或字体加载引发的掉帧
滚动过程中突然卡一下，往往不是滚动逻辑问题，而是图片解码或字体回退（fallback）触发了主线程阻塞。特别是
background-image或<img alt="HTML5移动端滚动卡顿_HTML5overflowscrolling触控优化与硬件加速设置【攻略】" >在滚动进视口时才加载，解码耗时直接吃掉一帧。关键控制点：
- 用
loading="lazy"时，确保父容器有明确高度，否则懒加载可能误判位置，滚到一半才触发 - WebFont 用
font-display: swap，避免文本渲染阻塞滚动 - 大图强制加
decoding="async"属性，让浏览器异步解码 - 避免在滚动容器里用
box-shadow或filter: blur()—— 这些属性会让合成层频繁重绘
一个容易被忽略的细节：
transform: translateZ(0)虽然启用了 GPU，但如果容器内有未优化的 PNG 或未压缩的 WebP，GPU 纹理上传阶段仍会卡住主线程。
