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

HarmonyOS ArkWeb 系列之页面预连接与 DNS 预解析：prepareForPageLoad 加速首屏

news 2026/7/23 5:44:36

文章目录

- 大白话讲原理
- 流程图
- API 说明
- 完整示例
- - 方案一：组件出现时预热
  - 方案二：上一页加载完后预热下一页（列表→详情场景）
  - 方案三：Ability onCreate 里预热（App 启动即预热）
- preconnect 参数怎么选？
- 注意事项

内嵌 Web 页面首屏慢，十有八九是网络耗时占大头。DNS 解析 + TCP 握手 + TLS 握手，加起来轻松超过 300ms。prepareForPageLoad让你在用户点击之前就把这些事提前做完。

大白话讲原理

正常流程：用户点击 → DNS 解析 → TCP 连接 → TLS 握手 → 发送请求 → 收到响应 → 渲染

用了预连接：App 启动或上一页加载完 →提前做 DNS + 建连→ 用户点击 → 直接发请求 → 渲染

省掉的那几百毫秒，用户感受非常明显。

流程图

API 说明

webview.WebviewController.prepareForPageLoad(url:string,// 要预热的目标 URLpreconnect:boolean,// true = DNS+TCP建连；false = 仅 DNS 解析numSockets:number// 预建连接数，最多 6 个):void

这是静态方法，不需要 Web 组件已经存在，可以在 Ability 的onCreate里就调用。

完整示例

方案一：组件出现时预热

import{webview}from'@kit.ArkWeb';@Entry@Componentstruct PreconnectPage{webviewController:webview.WebviewController=newwebview.WebviewController();privatetargetUrl:string='https://www.example.com';build(){Column(){Button('后退').onClick(()=>{if(this.webviewController.accessBackward()){this.webviewController.backward();}})Web({src:this.targetUrl,controller:this.webviewController}).onAppear(()=>{// 组件出现时立刻预连接目标 URL// 第二个参数 true = DNS 解析 + TCP 建连// 第三个参数 2 = 预建 2 个 socket（HTTP/2 下够用）webview.WebviewController.prepareForPageLoad(this.targetUrl,true,2);}).width('100%').layoutWeight(1)}.width('100%').height('100%')}}

方案二：上一页加载完后预热下一页（列表→详情场景）

import{webview}from'@kit.ArkWeb';@Entry@Componentstruct ListToDetailPage{listController:webview.WebviewController=newwebview.WebviewController();privatedetailUrl:string='https://www.example.com/detail/123';build(){Column(){Web({src:'https://www.example.com/list',controller:this.listController}).onPageEnd(()=>{// 列表页加载完后，提前预热详情页// 用户从列表点进详情时，连接早就建好了webview.WebviewController.prepareForPageLoad(this.detailUrl,true,3);console.info('详情页预连接已发起');}).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();// 只做 DNS 预解析（false），不建 TCP 连接，开销最小webview.WebviewController.prepareForPageLoad('https://www.example.com',false,1);}}