HarmonyOS ArkWeb 系列之资源预获取：prefetchResource 让页面秒开

文章目录和 prepareForPageLoad 的区别流程图基础用法预获取 GET 请求预获取 POST 请求在 Ability onCreate 里预获取清除预取缓存使用建议预连接只是建好管道但页面数据还没取回来。prefetchResource更进一步——提前把目标页面的数据下载好放进缓存用户打开时直接从缓存读体验接近秒开。和 prepareForPageLoad 的区别API做了什么节省的时间prepareForPageLoadDNS TCP 建连连接建立耗时200~300msprefetchResource提前下载资源内容放入缓存连接耗时 数据传输耗时prefetchResource包含了prepareForPageLoad的所有效果还多了数据已下载这一步。流程图基础用法预获取 GET 请求import{webview}fromkit.ArkWeb;EntryComponentstruct PrefetchGetPage{webviewController:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Web({src:https://www.example.com/,controller:this.webviewController}).onPageEnd((){// 当前页加载完预获取下一页资源webview.WebviewController.prefetchResource({url:https://www.example.com/next-page},[],// 额外请求头不需要可传空数组CacheKey1,// 缓存标识 key用于后续清除500// 缓存有效期毫秒);}).width(100%).height(100%)}}}预获取 POST 请求很多接口是 POST同样支持import{webview}fromkit.ArkWeb;EntryComponentstruct PrefetchPostPage{webviewController:webview.WebviewControllernewwebview.WebviewController();build(){Column(){Web({src:https://www.example.com/,controller:this.webviewController}).onPageEnd((){webview.WebviewController.prefetchResource({url:https://www.example1.com/post?efgh,method:POST,formData:axby,// POST body},[{headerKey:c,headerValue:z},// 自定义请求头],KeyX,// 缓存 key500);}).width(100%).height(100%)}}}在 Ability onCreate 里预获取App 启动时就预判用户要看什么提前预取// EntryAbility.etsimport{AbilityConstant,UIAbility,Want}fromkit.AbilityKit;import{webview}fromkit.ArkWeb;exportdefaultclassEntryAbilityextendsUIAbility{onCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{// 必须先初始化 Web 内核webview.WebviewController.initializeWebEngine();// 预获取首页数据webview.WebviewController.prefetchResource({url:https://www.example.com/home},[],HomeCache,2000// 2 秒有效期足够用户打开页面);// 预获取常用 API 数据webview.WebviewController.prefetchResource({url:https://www.example.com/api/config,method:POST,formData:version2.0,},[{headerKey:Authorization,headerValue:Bearer token123}],ConfigCache,3000);}}清除预取缓存用户退出登录等场景需要手动清除import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;try{webview.WebviewController.clearPrefetchedResource([HomeCache,ConfigCache]);console.info(预取缓存已清除);}catch(error){console.error(清除失败:${(errorasBusinessError).message});}使用建议TTL 设置合理建议 500ms~3000ms太短没用太长数据可能过时只预取高概率资源不要滥用会消耗流量和内存POST 请求用不同 key同一接口不同参数用不同 key方便精准清除配合 prefetchPage 使用prefetchResource预取 API 数据prefetchPage预热整个页面