低性能设备上网页动画视频卡顿，适配分辨率后仍未解决求帮助

一、修复动态加载视频的代码逻辑 #

你的动态添加source标签后未触发视频加载流程，这是当前代码无效的核心原因。同时优化分辨率匹配逻辑，避免加载超出窗口尺寸的视频增加解码压力：

var resolution_list = [1280, 1408, 1536, 1664, 1792, 1920, 2560];

var resolution_dict = {
  1280: "videos/render_animation_1280.mp4",
  1408: "videos/render_animation_1408.mp4",
  1536: "videos/render_animation_1536.mp4",
  1664: "videos/render_animation_1664.mp4",
  1792: "videos/render_animation_1792.mp4",
  1920: "videos/render_animation_1920.mp4",
  2560: "videos/render_animation_2560.mp4",
};

// 选择不超过窗口宽度的最优分辨率，降低解码负载
var resolution_goal = window.innerWidth;
var closest_resolution = resolution_list.reduce(function(prev, curr) {
  if (curr > resolution_goal) return prev;
  return Math.abs(curr - resolution_goal) < Math.abs(prev - resolution_goal) ? curr : prev;
}, resolution_list[0]);

const video_url = resolution_dict[closest_resolution];
const videoElement = document.getElementById("animation-video");

// 清空原有source，避免多源冲突
videoElement.innerHTML = "";

var source = document.createElement("source");
source.setAttribute("src", video_url);
source.setAttribute("type", "video/mp4");

videoElement.appendChild(source);
// 关键：触发视频加载流程
videoElement.load();

同时修改video标签的preload属性，明确指定预加载策略：

<video id="animation-video" class="video_first" style="opacity: 0;" controls preload="auto"></video>

二、优化视频编码（核心性能提升点） #

YouTube的流畅性源于高效编码，你的视频即使体积小，编码参数不合理也会导致解码卡顿。按以下参数重新编码：

• 编码格式：优先使用H.264 Baseline/Main Profile（兼容性最好，解码开销低），现代浏览器可尝试VP9/AV1（压缩率更高）
• 关键帧间隔：设置为1秒（如30fps视频设为30），确保视频可快速分段解码
• 码率控制：采用CRF恒定质量模式，H.264设为CRF 22-25，平衡画质与解码压力
• 帧率：匹配设备刷新率（30fps或60fps，避免非标准帧率）
• 像素格式：使用YUV420P，这是所有浏览器支持的最低解码开销格式

三、优化视频渲染性能 #

• 简化视频元素CSS：移除filter、复杂3D变换等可能强制软件渲染的属性，保留transform: translateZ(0)可触发硬件加速
• 坚持canplaythrough事件触发后再显示视频：缓存足够后设置opacity: 1，避免播放时边加载边解码
• 移除不必要控件：如果不需要用户交互，删除controls属性，减少浏览器渲染开销

四、排查缓存问题 #

浏览器可能缓存了旧版卡顿视频，测试时可：

• 打开开发者工具（F12），在Network面板勾选「Disable cache」后刷新页面
• 给视频URL添加版本参数，如videos/render_animation_1280.mp4?v=1，强制加载新文件

内容的提问来源于stack exchange，提问作者Julius Olsson