WebView后台高耗电主因是硬件加速、JS定时器未销毁、DPR不适配图片及缓存策略不当；需禁用硬件加速、显式清理监听器、按DPR加载资源、分层缓存并改用indexedDB替代localStorage。
WebView 初始化时禁用硬件加速
HTML5 转 APP 多数依赖系统 WebView（Android）或 WKWebView（iOS），默认开启硬件加速后，即使页面静态不动，GPU 也会持续轮询渲染，导致后台 CPU 占用高、发热明显。
实操建议：
- Android：在
WebView创建后、加载前调用setLayerType(View.LAYER_TYPE_SOFTWARE, null)，强制回退到软件渲染；仅对动画/Canvas 等必要场景按需临时启用 - iOS：在
WKWebViewConfiguration中设requiresActionForJavaScriptAlerts = false并关闭allowsInlineMediaPlayback，减少后台视频解码线程唤醒 - 避免在
WebView外层套ScrollView或嵌套ViewGroup，防止重绘区域扩大引发额外合成开销
JS 定时器与事件监听必须显式销毁
单页应用（SPA）中常见 setInterval、requestAnimationFrame、addEventListener('scroll') 等长期驻留逻辑，APP 切后台后若未清理，JS 引擎仍持续执行，CPU 无法进入休眠。
关键处理点：
立即学习“前端免费学习笔记（深入）”；
- 监听页面可见性：监听
document.visibilityState，在visibilitychange事件中暂停所有定时器和轮询请求 - Vue/React 项目务必在组件
beforeUnmount或useEffect cleanup中清除setTimeout、EventSource、WebSocket连接 - 禁止在
mounted/componentDidMount中直接写setInterval(fn, 1000)—— 必须赋值给变量并在销毁时clearInterval
图片与字体资源必须按设备像素比加载
未适配 DPR 的高清图（如 3x 图在 2x 屏上渲染）会触发系统自动缩放，大幅增加 GPU 纹理上传和重采样计算，是发热主因之一。
具体做法：
- HTML 中用
srcset+sizes替代固定src，例如：<img srcset="a-1x.jpg 1x, a-2x.jpg 2x" sizes="100vw" alt="HTML5转APP怎样省电不发热_优化运行表现实用指南【说明】" > - CSS 中避免
background-image: url(big.png)，改用@media (-webkit-min-device-pixel-ratio: 2)加载对应尺寸雪碧图或 SVG - 字体文件禁用未压缩的
.ttf，优先使用子集化 + WOFF2 格式，并通过font-display: swap防止 FOIT 导致的强制重排
离线缓存策略要区分静态资源与动态数据
全量用 Service Worker 缓存 HTML/JS/CSS 看似省流量，但会导致每次启动都校验哈希、触发冗余 fetch，反而抬高首屏 CPU 峰值。
更稳妥的分层缓存方案：
- 静态资源（JS/CSS/字体/图标）走
Cache API，设置强缓存max-age=31536000，版本变更靠文件名哈希（如app.a1b2c3.js） - API 数据用
IndexedDB存储，配合时间戳判断是否过期；禁止对/api/user类接口做无条件 cache-first - Android 上禁用
WebView.getSettings().setAppCacheEnabled(true)（已废弃且不可控），统一收口到 Service Worker
最易被忽略的是：iOS WKWebView 不支持 localStorage 在后台持久写入，大量同步 localStorage.setItem 会阻塞主线程 —— 必须改用异步 indexedDB 或封装成队列延迟提交。
