移动端视频滚动卡顿本质是渲染线程被抢占，解决关键是隔离视频与滚动：启用硬件加速滚动、规范内联播放、提升合成层、节流JS执行。

移动端网页视频播放时页面滚动卡顿，本质是浏览器渲染线程被视频解码、JS逻辑或CSS动画抢占，导致 touchmove 事件响应延迟或丢帧。解决关键不是“让页面更顺”，而是“让视频和滚动互不干扰”。

确保视频容器支持硬件加速滚动

原生 <video></video> 在部分安卓机型或 Safari 中会触发 layout thrashing，尤其当父容器有 transform 或 fixed 定位时。必须显式启用 iOS/Android 的硬件加速滚动支持：

• 给视频外层容器（如 <div class="video-wrap">）添加：<br><code>style="-webkit-overflow-scrolling: touch; overflow-scrolling: touch;"
• 确认该容器的 height 或 max-height 是明确值（非 auto），否则 Safari 可能无法正确计算可滚动区域
• 避免在视频父级上使用 will-change: transform 或频繁修改 top/left，这类操作会强制重绘整个图层

限制视频内联行为与事件干扰

很多卡顿实际来自视频控件或内联播放逻辑劫持了 touch 事件。例如点击播放按钮后，某些 JS 会监听 touchstart 并调用 preventDefault()，连带阻断了页面滚动。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 检查是否误写了全局 document.addEventListener('touchmove', e => e.preventDefault())，尤其在播放器初始化后未移除
• 为 <video></video> 添加标准内联属性：
  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 事件监听来判断视频是否进入视口，避免滚动中持续计算