图片加载慢的根源是WebView未预加载资源且缓存配置不当。应使用link rel="preload"提前加载首屏图片，启用WebView磁盘缓存并设置正确HTTP缓存头，首屏图片设loading="eager"避免懒加载干扰，且需在真机HTTPS环境验证。
图片加载慢是因为 HTML5 容器没预加载资源
WebView（比如 Cordova、Capacitor、Tauri 或原生 WebView）加载 HTML5 页面时，默认行为是按需加载图片：<img> 标签解析到才发起请求，网络延迟 + 解析顺序 + 缺少缓存策略，导致首屏图片“卡顿”。这不是 HTML5 本身慢，而是容器没主动干预资源调度。
用 link rel="preload" 提前抓取关键图片
在 <head> 中显式声明首屏必现图片，让 WebView 在 HTML 解析早期就发起请求：
<link rel="preload" as="image" href="logo.png"> <link rel="preload" as="image" href="banner.webp" fetchpriority="high">
-
fetchpriority="high"在 Chromium 112+ 有效，提升请求优先级；旧版可忽略，但rel="preload"本身仍生效 - 只对绝对路径或同域相对路径可靠；跨域需确保服务端返回
Access-Control-Allow-Origin - 不要滥用：预加载非首屏图会抢占带宽，反而拖慢整体渲染
WebView 层启用磁盘缓存并配好响应头
HTML5 转 APP 的瓶颈常卡在 WebView 缓存未启用或服务端没设缓存头。即使加了 preload，没缓存也会重复下载。
- Android WebView 需调用
WebSettings.setAppCacheEnabled(true)（已弃用但部分机型仍依赖），更可靠的是开启setCacheMode(WebSettings.LOAD_DEFAULT)并确保服务端返回Cache-Control: public, max-age=31536000 - iOS WKWebView 默认启用磁盘缓存，但若资源响应头含
Cache-Control: no-store或Expires: 0，缓存直接失效 - 本地资源（
file://协议）不走 HTTP 缓存逻辑，此时应改用blob:URL 或预解码为 base64 内联（仅限小图）
首屏图片用 loading="eager" 避免懒加载干扰
很多 H5 框架或 UI 库默认给 <img> 加 loading="lazy"，在 WebView 中可能因滚动检测失效或触发过晚，导致首屏图空白几帧。
立即学习“前端免费学习笔记（深入）”；
- 对 banner、logo、按钮图标等首屏强依赖图片，显式写
<img src="..." loading="eager"> - 如使用
IntersectionObserver自实现懒加载，请确认 WebView 版本支持（iOS 12.2+、Android Chrome 74+），否则降级为eager - 避免在
document.write或动态innerHTML中插入带loading="lazy"的图——解析时机不可控，极易漏载
真正起效的预加载不是堆技巧，而是分清「哪些图必须立刻出现」「哪些图能缓一拍」，再配合 WebView 底层缓存能力和服务端响应头。最容易被忽略的是：本地调试时用 file:// 协议，上线却走 https://，缓存策略和跨域行为完全不同，务必在真机 HTTPS 环境下验证。
