Chrome HTML5耗电快主因是CPU/GPU高负载及页面未节能，需禁用chrome://flags中GPU光栅化、硬解视频、零拷贝光栅器，启用电池省电模式降requestAnimationFrame帧率，关闭硬件加速并清GPU缓存，限制后台标签页活动。
Chrome 浏览器运行 HTML5 应用（尤其是视频、Canvas 动画、WebGL、音频可视化等）时耗电快，本质是 CPU/GPU 持续高负载 + 页面未进入节能状态所致，并非 HTML5 本身“费电”，而是浏览器未合理调度资源。关键在控制渲染节奏、关闭冗余加速、限制后台活动。
chrome://flags 中禁用高功耗实验性 GPU 特性
Chrome 默认启用多项 GPU 加速实验功能，但在 macOS（尤其 M 系列芯片早期驱动）、老旧 Intel 核显或 Windows 驱动不匹配设备上，GPU rasterization、Hardware-accelerated video decode 等反而引发解码卡顿与持续 GPU 占用，导致发热+耗电双升。
- 地址栏输入
chrome://flags→ 搜索gpu - 将以下三项设为
Disabled：
–GPU rasterization
–Hardware-accelerated video decode
–Zero-copy rasterizer - 点击页面底部
Relaunch重启生效
⚠️ 注意：禁用后视频解码会回落至 CPU 软解，对 1080p 以下内容影响极小；但若你常看 4K HDR 视频且设备散热良好，可只关前两项，保留最后一项测试。
强制 HTML5 动画进入节能帧率（requestAnimationFrame 降频）
很多 HTML5 游戏、数据仪表盘、轮播图滥用 requestAnimationFrame，即使页面不可见也保持 60fps 渲染，CPU 持续满转。Chrome 本身不自动限帧，需靠设置干预。
立即学习“前端免费学习笔记（深入）”；
- 开启内存节能模式：
chrome://settings/performance→ 开启内存节省程序（它会自动暂停后台标签页的raf） - 手动触发节电：访问
chrome://flags/#battery-saver-mode→ 设为Enabled→ 重启
（该标志启用后，前台页面中不可见区域的raf会被系统强制降至 1–2fps） - 开发者可配合
document.hidden主动暂停动画逻辑，比依赖浏览器更可靠
✅ 示例（前端自查）：
if (document.hidden) {
cancelAnimationFrame(animationId);
} else {
animationId = requestAnimationFrame(render);
}
关闭硬件加速 + 清理 GPU 缓存（针对视频/Canvas 卡顿+发热）
硬件加速本意是省电，但当 GPU 驱动异常或缓存损坏时，Chrome 会陷入“反复尝试硬解→失败→重试”循环，GPU 占用率长期 90%+，电池温度飙升。
- 设置路径：
chrome://settings/system→ 关闭使用硬件加速模式(如果可用)→ 点击重新启动 - 彻底清理 GPU 缓存（必须完全退出 Chrome 后操作）：
– macOS：~/Library/Caches/Google/Chrome/Default/GPUCache和~/Library/Application Support/Google/Chrome/ShaderCache全删
– Windows：%LOCALAPPDATA%\Google\Chrome\User Data\Default\GPUCache和ShaderCache文件夹 - 重启后首次加载 HTML5 页面会稍慢（重建缓存），但后续稳定性显著提升
? 补充：若关闭硬件加速后视频播放变卡，说明你的设备更适合软解——此时应同步关闭所有广告拦截扩展（它们常注入大量 JS 干扰解码流程），再测试。
限制后台标签页活动（防 HTML5 音频/定时器偷跑）
HTML5 <audio> 自动播放、setInterval、Service Worker 后台同步等，在标签页切走后仍可能持续运行，尤其 WebRTC 或音乐网站常见。
- 确保
chrome://settings/performance中在后台暂停标签页已启用（默认开） - 白名单管理：点击
内存节省程序设置→ 将可信站点（如会议系统、音乐平台）加入例外，避免误冻 - 验证是否生效：按
Shift + Esc打开 Chrome 任务管理器 → 切换到后台标签页 → 观察其CPU是否降为 0% 或Idle
⚠️ 容易被忽略：某些 PWA 应用（如 Notion、Figma）启用 Background Sync API 后，即使关闭标签页，也会通过 Service Worker 唤醒进程——此时需进 chrome://serviceworker-internals 手动停止对应 worker。
