HarmonyOS 鸿蒙Next中url加载

【背景知识】

加速Web页面的访问：当Web页面加载缓慢时，可以使用预连接、预加载和预获取post请求的能力加速Web页面的访问。

【问题定位】

对于Web组件加载缓慢优化的思路：

1. 可以使用预连接、预加载、预获取post请求的能力和预编译生成编译缓存加速Web页面的访问。
2. 可以通过模板快载来优化加载速度。

【分析结论】

1. 可以使用预连接、预加载、预获取post请求的能力和预编译生成编译缓存加速Web页面的访问。
2. 可以通过模板快载来优化加载速度。

【修改建议】

• 预解析和预连接

可以通过prepareForPageLoad()来预解析或者预连接将要加载的页面，Ability的onCreate中提前初始化Web内核并对首页进行预连接，示例代码如下：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    console.info("EntryAbility onCreate");
    webview.WebviewController.initializeWebEngine();
    // 预连接时，需要將'https://www.example.com'替换成真实要访问的网站地址。
    webview.WebviewController.prepareForPageLoad("https://www.example.com/", true, 2);
    AppStorage.setOrCreate("abilityWant", want);
    console.info("EntryAbility onCreate done");
  }
}

• 预加载

能够预测到Web组件将要加载的页面或者即将要跳转的页面。可以通过prefetchPage()来预加载即将要加载的页面。预加载会提前下载页面所需的资源，包括主资源、子资源，但不会执行网页JavaScript代码。预加载是WebviewController的实例方法，需要一个已经关联好Web组件的WebviewController实例。在下面的示例中，在onPageEnd的时候触发下一个要访问的页面的预加载：

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com/', controller: this.webviewController })
        .onPageEnd(() => {
          // 预加载https://www.example.com/
          this.webviewController.prefetchPage('https://www.example.com/');
        })
    }
  }
}

• 预获取post请求

可以通过prefetchResource()预获取将要加载页面中的post请求。在页面加载结束时，可以通过clearPrefetchedResource清除后续不再使用的预获取资源缓存。以下示例，在Web组件onAppear中，对要加载页面中的post请求进行预获取。在onPageEnd中，可以清除预获取的post请求缓存：

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();
   
  build() {
    Column() {
      Web({ src: "https://www.example.com/", controller: this.webviewController})
        .onAppear(() => {
          // 预获取时，需要將"https://www.example1.com/post?e=f&g=h"替换成真实要访问的网站地址。
          webview.WebviewController.prefetchResource(
            {url:"https://www.example1.com/post?e=f&g=h",
              method:"POST",
              formData:"a=x&b=y",},
            [{headerKey:"c",
              headerValue:"z",},],
            "KeyX", 500);
        })
        .onPageEnd(() => {
          // 清除后续不再使用的预获取资源缓存。
          webview.WebviewController.clearPrefetchedResource(["KeyX",]);
        })
    }
  }
}

• 预编译生成编译缓存

可以通过precompileJavaScript()在页面加载前提前生成脚本文件的编译缓存。推荐配合动态组件使用，使用离线的Web组件用于生成字节码缓存，并在适当的时机加载业务用Web组件使用这些字节码缓存。

参考代码如下：

// 载体Ability
// EntryAbility.ets
import { createNWeb } from "../pages/common"

onWindowStageCreate(windowStage:window.WindowStage):
void {
   windowStage.loadContent('pages/Index',(err,data)=>{
   // 创建Web动态组件（需传入UIContext），loadContent之后的任意时机均可创建
   createNWeb
   (
   "https://www.example.com",
   windowStage.getMainWindowSync().getUIContext());
   if(err.code){
   return;
   }
  }
 );
}

// 使用NodeController的Page页
// Index.ets
import { getNWeb } from "./common"

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // NodeContainer用于与NodeController节点绑定，rebuild会触发makeNode
        // Page页通过NodeContainer接口绑定NodeController，实现动态组件页面显示
        NodeContainer(getNWeb("https://www.example.com"))
          .height("90%")
          .width("100%")
      }
      .width('100%')
    }
    .height('100%')
  }
}

注意： 后台启动的Web实例不建议超过200个。