当前位置：首页 > news >正文

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

news 2026/7/22 4:46:44

文章目录

- 和 prepareForPageLoad 的区别
- 流程图
- 基础用法：预获取 GET 请求
- 预获取 POST 请求
- 在 Ability onCreate 里预获取
- 清除预取缓存
- 使用建议

预连接只是建好"管道"，但页面数据还没取回来。prefetchResource更进一步——提前把目标页面的数据下载好放进缓存，用户打开时直接从缓存读，体验接近秒开。

和 prepareForPageLoad 的区别

API	做了什么	节省的时间
`prepareForPageLoad`	DNS + TCP 建连	连接建立耗时（200~300ms）
`prefetchResource`	提前下载资源内容放入缓存	连接耗时 + 数据传输耗时

prefetchResource包含了prepareForPageLoad的所有效果，还多了"数据已下载"这一步。

流程图

基础用法：预获取 GET 请求

import{webview}from'@kit.ArkWeb';@Entry@Componentstruct PrefetchGetPage{webviewController:webview.WebviewController=newwebview.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}from'@kit.ArkWeb';@Entry@Componentstruct PrefetchPostPage{webviewController:webview.WebviewController=newwebview.WebviewController();build(){Column(){Web({src:'https://www.example.com/',controller:this.webviewController}).onPageEnd(()=>{webview.WebviewController.prefetchResource({url:'https://www.example1.com/post?e=f&g=h',method:'POST',formData:'a=x&b=y',// POST body},[{headerKey:'c',headerValue:'z'},// 自定义请求头],'KeyX',// 缓存 key500);}).width('100%').height('100%')}}}

在 Ability onCreate 里预获取

App 启动时就预判用户要看什么，提前预取：

// EntryAbility.etsimport{AbilityConstant,UIAbility,Want}from'@kit.AbilityKit';import{webview}from'@kit.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:'version=2.0',},[{headerKey:'Authorization',headerValue:'Bearer token123'}],'ConfigCache',3000);}}

清除预取缓存

用户退出登录等场景需要手动清除：

import{webview}from'@kit.ArkWeb';import{BusinessError}from'@kit.BasicServicesKit';try{webview.WebviewController.clearPrefetchedResource(['HomeCache','ConfigCache']);console.info('预取缓存已清除');}catch(error){console.error(`清除失败:${(errorasBusinessError).message}`);}