文章目录
- 和 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}`);}使用建议
- TTL 设置合理：建议 500ms~3000ms，太短没用，太长数据可能过时
- 只预取高概率资源：不要滥用，会消耗流量和内存
- POST 请求用不同 key：同一接口不同参数用不同 key，方便精准清除
- 配合 prefetchPage 使用：
prefetchResource预取 API 数据，prefetchPage预热整个页面