移动端视频滚动卡顿本质是渲染线程被抢占，解决关键是隔离视频与滚动：启用硬件加速滚动、规范内联播放、提升合成层、节流JS执行。
移动端网页视频播放时页面滚动卡顿，本质是浏览器渲染线程被视频解码、JS逻辑或CSS动画抢占，导致 touchmove 事件响应延迟或丢帧。解决关键不是“让页面更顺”，而是“让视频和滚动互不干扰”。
确保视频容器支持硬件加速滚动
原生 在部分安卓机型或 Safari 中会触发 layout thrashing，尤其当父容器有 transform 或 fixed 定位时。必须显式启用 iOS/Android 的硬件加速滚动支持：
- 给视频外层容器（如 ）添加：
style="-webkit-overflow-scrolling: touch; overflow-scrolling: touch;"- 确认该容器的
height或max-height是明确值（非auto），否则 Safari 可能无法正确计算可滚动区域- 避免在视频父级上使用
will-change: transform或频繁修改top/left，这类操作会强制重绘整个图层限制视频内联行为与事件干扰
很多卡顿实际来自视频控件或内联播放逻辑劫持了 touch 事件。例如点击播放按钮后，某些 JS 会监听
touchstart并调用preventDefault()，连带阻断了页面滚动。- 检查是否误写了全局
document.addEventListener('touchmove', e => e.preventDefault())，尤其在播放器初始化后未移除 - 为
添加标准内联属性：playsinline webkit-playsinline x5-playsinline，并移除controls或改用自定义控件，减少系统控件对 touch 流的干扰 - 若使用 X5 内核（如微信内置浏览器），需额外加
x5-video-player-type="h5"，防止其自动全屏覆盖导致布局重排
分离视频渲染与页面滚动层级
当视频区域参与页面正常文档流时，滚动过程中频繁的 repaint 和 compositing 会拖慢帧率。应将其提升为独立合成层：
- 给视频元素添加：
style="transform: translateZ(0); -webkit-transform: translateZ(0);" - 避免视频父容器设置
overflow: hidden且内部有绝对定位元素——这会禁用 GPU 加速，退回到 CPU 渲染 - 如果页面顶部有吸顶导航栏，确保它用
position: sticky而非fixed，后者易与视频图层产生混合冲突
精简播放过程中的 JS 执行负担
视频加载、元数据解析、时间更新等回调若绑定在主线程且未节流，会直接挤占滚动所需的 16ms 帧预算。
- 将
timeupdate事件监听改为 requestAnimationFrame 节流（每帧最多更新一次进度条） - 暂停非必要逻辑：如播放中禁用实时字幕解析、弹幕渲染、自定义水印 canvas 绘制
- 用
IntersectionObserver替代 scroll 事件监听来判断视频是否进入视口，避免滚动中持续计算
- 确认该容器的
