鸿蒙开发进阶（HarmonyOS ）加速Web页面的访问

惊雷无声  论坛元老 | 2024-12-25 20:50:50 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1006|帖子 1006|积分 3018

 鸿蒙NEXT开发实战往期必看文章：
一分钟相识”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常详细的” 鸿蒙HarmonyOS Next应用开发学习门路！（从零底子入门到精通）
HarmonyOS NEXT应用开发案例实践总结合（持续更新......）
HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）
当Web页面加载缓慢时，可以利用预连接、预加载和预获取post请求的本事加速Web页面的访问。
预分析和预连接

可以通过prepareForPageLoad()来预分析大概预连接将要加载的页面。
在下面的示例中，在Web组件的onAppear中对要加载的页面举行预连接。
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: webview.WebviewController = new webview.WebviewController();
  9.   build() {
  10.     Column() {
  11.       Button('loadData')
  12.         .onClick(() => {
  13.           if (this.webviewController.accessBackward()) {
  14.             this.webviewController.backward();
  15.           }
  16.         })
  17.       Web({ src: 'https://www.example.com/', controller: this.webviewController })
  18.         .onAppear(() => {
  19.           // 指定第二个参数为true，代表要进行预连接，如果为false该接口只会对网址进行dns预解析
  20.           // 第三个参数为要预连接socket的个数。最多允许6个。
  21.           webview.WebviewController.prepareForPageLoad('https://www.example.com/', true, 2);
  22.         })
  23.     }
  24.   }
  25. }
复制代码
也可以通过initializeBrowserEngine()来提前初始化内核，然后在初始化内核后调用
prepareForPageLoad()对即将要加载的页面举行预分析、预连接。这种方式适合提前对首页举行
预分析、预连接。
在下面的示例中，Ability的onCreate中提前初始化Web内核并对首页举行预连接。
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
  5. export default class EntryAbility extends UIAbility {
  6.   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
  7.     console.log("EntryAbility onCreate");
  8.     webview.WebviewController.initializeWebEngine();
  9.     // 预连接时，需要將'https://www.example.com'替换成真实要访问的网站地址。
  10.     webview.WebviewController.prepareForPageLoad("https://www.example.com/", true, 2);
  11.     AppStorage.setOrCreate("abilityWant", want);
  12.     console.log("EntryAbility onCreate done");
  13.   }
  14. }
复制代码
预加载

如果可以或许预测到Web组件将要加载的页面大概即将要跳转的页面。可以通过prefetchPage()来预加载即将要加载页面。
预加载会提前下载页面所需的资源，包罗主资源子资源，但不会实行网页JavaScript代码。预加载是WebviewController的实例方法，必要一个已经关联好Web组件的WebviewController实例。
在下面的示例中，在onPageEnd的时候触发下一个要访问的页面的预加载。
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: webview.WebviewController = new webview.WebviewController();
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'https://www.example.com/', controller: this.webviewController })
  12.         .onPageEnd(() => {
  13.           // 预加载https://www.iana.org/help/example-domains。
  14.           this.webviewController.prefetchPage('https://www.iana.org/help/example-domains');
  15.         })
  16.     }
  17.   }
  18. }
复制代码
预获取post请求

可以通过prefetchResource()预获取将要加载页面中的post请求。在页面加载结束时，可以通过clearPrefetchedResource()打扫后续不再利用的预获取资源缓存。
以下示例，在Web组件onAppear中，对要加载页面中的post请求举行预获取。在onPageEnd中，可以打扫预获取的post请求缓存。
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: webview.WebviewController = new webview.WebviewController();
  8.   
  9.   build() {
  10.     Column() {
  11.       Web({ src: "https://www.example.com/", controller: this.webviewController})
  12.         .onAppear(() => {
  13.           // 预获取时，需要將"https://www.example1.com/post?e=f&g=h"替换成真实要访问的网站地址。
  14.           webview.WebviewController.prefetchResource(
  15.             {url:"https://www.example1.com/post?e=f&g=h",
  16.               method:"POST",
  17.               formData:"a=x&b=y",},
  18.             [{headerKey:"c",
  19.               headerValue:"z",},],
  20.             "KeyX", 500);
  21.         })
  22.         .onPageEnd(() => {
  23.           // 清除后续不再使用的预获取资源缓存。
  24.           webview.WebviewController.clearPrefetchedResource(["KeyX",]);
  25.         })
  26.     }
  27.   }
  28. }
复制代码
如果可以或许预测到Web组件将要加载页面大概即将要跳转页面中的post请求。可以通过prefetchResource()预获取即将要加载页面的post请求。
以下示例，在onPageEnd中，触发预获取一个要访问页面的post请求。
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: webview.WebviewController = new webview.WebviewController();
  8.   
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'https://www.example.com/', controller: this.webviewController})
  12.         .onPageEnd(() => {
  13.           // 预获取时，需要將"https://www.example1.com/post?e=f&g=h"替换成真实要访问的网站地址。
  14.           webview.WebviewController.prefetchResource(
  15.             {url:"https://www.example1.com/post?e=f&g=h",
  16.               method:"POST",
  17.               formData:"a=x&b=y",},
  18.             [{headerKey:"c",
  19.               headerValue:"z",},],
  20.             "KeyX", 500);
  21.         })
  22.     }
  23.   }
  24. }
复制代码
也可以通过initializeBrowserEngine()提前初始化内核，然后在初始化内核后调用prefetchResource()预获取将要加载页面中的post请求。这种方式适合提前预获取首页的post请求。
以下示例，在Ability的onCreate中，提前初始化Web内核并预获取首页的post请求。
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
  5. export default class EntryAbility extends UIAbility {
  6.   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
  7.     console.log("EntryAbility onCreate");
  8.     webview.WebviewController.initializeWebEngine();
  9.     // 预获取时，需要將"https://www.example1.com/post?e=f&g=h"替换成真实要访问的网站地址。
  10.     webview.WebviewController.prefetchResource(
  11.       {url:"https://www.example1.com/post?e=f&g=h",
  12.         method:"POST",
  13.         formData:"a=x&b=y",},
  14.       [{headerKey:"c",
  15.         headerValue:"z",},],
  16.       "KeyX", 500);
  17.     AppStorage.setOrCreate("abilityWant", want);
  18.     console.log("EntryAbility onCreate done");
  19.   }
  20. }
复制代码
预编译天生编译缓存

可以通过precompileJavaScript()在页面加载前提前天生脚本文件的编译缓存。
保举配合动态组件利用，利用离线的Web组件用于天生字节码缓存，并在适当的时机加载业务用Web组件利用这些字节码缓存。下方是代码示例：

  • 首先，在EntryAbility中将UIContext存到localStorage中。
    1. // EntryAbility.ets
    2. import { UIAbility } from '@kit.AbilityKit';
    3. import { window } from '@kit.ArkUI';
    5. const localStorage: LocalStorage = new LocalStorage('uiContext');
    7. export default class EntryAbility extends UIAbility {
    8.   storage: LocalStorage = localStorage;
    10.   onWindowStageCreate(windowStage: window.WindowStage) {
    11.     windowStage.loadContent('pages/Index', this.storage, (err, data) => {
    12.       if (err.code) {
    13.         return;
    14.       }
    16.       this.storage.setOrCreate<UIContext>("uiContext", windowStage.getMainWindowSync().getUIContext());
    17.     });
    18.   }
    19. }
    复制代码
  • 编写动态组件所需底子代码。
    1. // DynamicComponent.ets
    2. import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';
    4. export interface BuilderData {
    5.   url: string;
    6.   controller: WebviewController;
    7. }
    9. const storage = LocalStorage.getShared();
    11. export class NodeControllerImpl extends NodeController {
    12.   private rootNode: BuilderNode<BuilderData[]> | null = null;
    13.   private wrappedBuilder: WrappedBuilder<BuilderData[]> | null = null;
    15.   constructor(wrappedBuilder: WrappedBuilder<BuilderData[]>) {
    16.     super();
    17.     this.wrappedBuilder = wrappedBuilder;
    18.   }
    20.   makeNode(): FrameNode | null {
    21.     if (this.rootNode != null) {
    22.       return this.rootNode.getFrameNode();
    23.     }
    24.     return null;
    25.   }
    27.   initWeb(url: string, controller: WebviewController) {
    28.     if(this.rootNode != null) {
    29.       return;
    30.     }
    32.     const uiContext: UIContext = storage.get<UIContext>("uiContext") as UIContext;
    33.     if (!uiContext) {
    34.       return;
    35.     }
    36.     this.rootNode = new BuilderNode(uiContext);
    37.     this.rootNode.build(this.wrappedBuilder, { url: url, controller: controller });
    38.   }
    39. }
    41. export const createNode = (wrappedBuilder: WrappedBuilder<BuilderData[]>, data: BuilderData) => {
    42.   const baseNode = new NodeControllerImpl(wrappedBuilder);
    43.   baseNode.initWeb(data.url, data.controller);
    44.   return baseNode;
    45. }
    复制代码
  • 编写用于天生字节码缓存的组件，本例中的本地Javascript资源内容通过文件读取接口读取rawfile目录下的本地文件。
    1. // PrecompileWebview.ets
    2. import { BuilderData } from "./DynamicComponent";
    3. import { Config, configs } from "./PrecompileConfig";
    5. @Builder
    6. function WebBuilder(data: BuilderData) {
    7.   Web({ src: data.url, controller: data.controller })
    8.     .onControllerAttached(() => {
    9.       precompile(data.controller, configs);
    10.     })
    11.     .fileAccess(true)
    12. }
    14. export const precompileWebview = wrapBuilder<BuilderData[]>(WebBuilder);
    16. export const precompile = async (controller: WebviewController, configs: Array<Config>) => {
    17.   for (const config of configs) {
    18.     let content = await readRawFile(config.localPath);
    20.     try {
    21.       controller.precompileJavaScript(config.url, content, config.options)
    22.         .then(errCode => {
    23.           console.error("precompile successfully! " + errCode);
    24.         }).catch((errCode: number) => {
    25.           console.error("precompile failed. " + errCode);
    26.       });
    27.     } catch (err) {
    28.       console.error("precompile failed. " + err.code + " " + err.message);
    29.     }
    30.   }
    31. }
    33. async function readRawFile(path: string) {
    34.   try {
    35.     return await getContext().resourceManager.getRawFileContent(path);;
    36.   } catch (err) {
    37.     return new Uint8Array(0);
    38.   }
    39. }
    复制代码
JavaScript资源的获取方式也可通过网络请求的方式获取，但此方法获取到的http响应头非标准HTTP响应头格式，需额外将响应头转换成标准HTTP响应头格式后利用。如通过网络请求获取到的响应头是e-tag，则必要将其转换成E-Tag后利用。

  • 编写业务用组件代码。
    1. // BusinessWebview.ets
    2. import { BuilderData } from "./DynamicComponent";
    4. @Builder
    5. function WebBuilder(data: BuilderData) {
    6.   // 此处组件可根据业务需要自行扩展
    7.   Web({ src: data.url, controller: data.controller })
    8.     .cacheMode(CacheMode.Default)
    9. }
    11. export const businessWebview = wrapBuilder<BuilderData[]>(WebBuilder);
    复制代码
  • 编写资源设置信息。
    1. // PrecompileConfig.ets
    2. import { webview } from '@kit.ArkWeb'
    4. export interface Config {
    5.   url:  string,
    6.   localPath: string, // 本地资源路径
    7.   options: webview.CacheOptions
    8. }
    10. export let configs: Array<Config> = [
    11.   {
    12.     url: "https://www.example.com/example.js",
    13.     localPath: "example.js",
    14.     options: {
    15.       responseHeaders: [
    16.         { headerKey: "E-Tag", headerValue: "aWO42N9P9dG/5xqYQCxsx+vDOoU="},
    17.         { headerKey: "Last-Modified", headerValue: "Wed, 21 Mar 2024 10:38:41 GMT"}
    18.       ]
    19.     }
    20.   }
    21. ]
    复制代码
  • 在页面中利用。
    1. // Index.ets
    2. import { webview } from '@kit.ArkWeb';
    3. import { NodeController } from '@kit.ArkUI';
    4. import { createNode } from "./DynamicComponent"
    5. import { precompileWebview } from "./PrecompileWebview"
    6. import { businessWebview } from "./BusinessWebview"
    8. @Entry
    9. @Component
    10. struct Index {
    11.   @State precompileNode: NodeController | undefined = undefined;
    12.   precompileController: webview.WebviewController = new webview.WebviewController();
    14.   @State businessNode: NodeController | undefined = undefined;
    15.   businessController: webview.WebviewController = new webview.WebviewController();
    17.   aboutToAppear(): void {
    18.     // 初始化用于注入本地资源的Web组件
    19.     this.precompileNode = createNode(precompileWebview,
    20.       { url: "https://www.example.com/empty.html", controller: this.precompileController});
    21.   }
    23.   build() {
    24.     Column() {
    25.       // 在适当的时机加载业务用Web组件，本例以Button点击触发为例
    26.       Button("加载页面")
    27.         .onClick(() => {
    28.           this.businessNode = createNode(businessWebview, {
    29.             url:  "https://www.example.com/business.html",
    30.             controller: this.businessController
    31.           });
    32.         })
    33.       // 用于业务的Web组件
    34.       NodeContainer(this.businessNode);
    35.     }
    36.   }
    37. }
    复制代码
当必要更新本地已经天生的编译字节码时，修改cacheOptions参数中responseHeaders中的E-Tag或Last-Modified响应头对应的值，再次调用接口即可。
离线资源免拦截注入

可以通过injectOfflineResources()在页面加载前提前将图片、样式表或脚本资源注入到应用的内存缓存中。
保举配合动态组件利用，利用离线的Web组件用于将资源注入到内核的内存缓存中，并在适当的时机加载业务用Web组件利用这些资源。下方是代码示例：

  • 首先，在EntryAbility中将UIContext存到localStorage中。
    1. // EntryAbility.ets
    2. import { UIAbility } from '@kit.AbilityKit';
    3. import { window } from '@kit.ArkUI';
    5. const localStorage: LocalStorage = new LocalStorage('uiContext');
    7. export default class EntryAbility extends UIAbility {
    8.   storage: LocalStorage = localStorage;
    10.   onWindowStageCreate(windowStage: window.WindowStage) {
    11.     windowStage.loadContent('pages/Index', this.storage, (err, data) => {
    12.       if (err.code) {
    13.         return;
    14.       }
    16.       this.storage.setOrCreate<UIContext>("uiContext", windowStage.getMainWindowSync().getUIContext());
    17.     });
    18.   }
    19. }
    复制代码
  • 编写动态组件所需底子代码。
    1. // DynamicComponent.ets
    2. import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';
    4. export interface BuilderData {
    5.   url: string;
    6.   controller: WebviewController;
    7. }
    9. const storage = LocalStorage.getShared();
    11. export class NodeControllerImpl extends NodeController {
    12.   private rootNode: BuilderNode<BuilderData[]> | null = null;
    13.   private wrappedBuilder: WrappedBuilder<BuilderData[]> | null = null;
    15.   constructor(wrappedBuilder: WrappedBuilder<BuilderData[]>) {
    16.     super();
    17.     this.wrappedBuilder = wrappedBuilder;
    18.   }
    20.   makeNode(): FrameNode | null {
    21.     if (this.rootNode != null) {
    22.       return this.rootNode.getFrameNode();
    23.     }
    24.     return null;
    25.   }
    27.   initWeb(url: string, controller: WebviewController) {
    28.     if(this.rootNode != null) {
    29.       return;
    30.     }
    32.     const uiContext: UIContext = storage.get<UIContext>("uiContext") as UIContext;
    33.     if (!uiContext) {
    34.       return;
    35.     }
    36.     this.rootNode = new BuilderNode(uiContext);
    37.     this.rootNode.build(this.wrappedBuilder, { url: url, controller: controller });
    38.   }
    39. }
    41. export const createNode = (wrappedBuilder: WrappedBuilder<BuilderData[]>, data: BuilderData) => {
    42.   const baseNode = new NodeControllerImpl(wrappedBuilder);
    43.   baseNode.initWeb(data.url, data.controller);
    44.   return baseNode;
    45. }
    复制代码
  • 编写用于注入资源的组件代码，本例中的本地资源内容通过文件读取接口读取rawfile目录下的本地文件。
    1. // InjectWebview.ets
    2. import { webview } from '@kit.ArkWeb';
    3. import { resourceConfigs } from "./Resource";
    4. import { BuilderData } from "./DynamicComponent";
    6. @Builder
    7. function WebBuilder(data: BuilderData) {
    8.   Web({ src: data.url, controller: data.controller })
    9.     .onControllerAttached(async () => {
    10.       try {
    11.         data.controller.injectOfflineResources(await getData ());
    12.       } catch (err) {
    13.         console.error("error: " + err.code + " " + err.message);
    14.       }
    15.     })
    16.     .fileAccess(true)
    17. }
    19. export const injectWebview = wrapBuilder<BuilderData[]>(WebBuilder);
    21. export async function getData() {
    22.   const resourceMapArr: Array<webview.OfflineResourceMap> = [];
    24.   // 读取配置，从rawfile目录中读取文件内容
    25.   for (let config of resourceConfigs) {
    26.     let buf: Uint8Array = new Uint8Array(0);
    27.     if (config.localPath) {
    28.       buf = await readRawFile(config.localPath);
    29.     }
    31.     resourceMapArr.push({
    32.       urlList: config.urlList,
    33.       resource: buf,
    34.       responseHeaders: config.responseHeaders,
    35.       type: config.type,
    36.     })
    37.   }
    39.   return resourceMapArr;
    40. }
    42. export async function readRawFile(url: string) {
    43.   try {
    44.     return await getContext().resourceManager.getRawFileContent(url);
    45.   } catch (err) {
    46.     return new Uint8Array(0);
    47.   }
    48. }
    复制代码
  • 编写业务用组件代码。
    1. // BusinessWebview.ets
    2. import { BuilderData } from "./DynamicComponent";
    4. @Builder
    5. function WebBuilder(data: BuilderData) {
    6.   // 此处组件可根据业务需要自行扩展
    7.   Web({ src: data.url, controller: data.controller })
    8.     .cacheMode(CacheMode.Default)
    9. }
    11. export const businessWebview = wrapBuilder<BuilderData[]>(WebBuilder);
    复制代码
  • 编写资源设置信息。
    1. // Resource.ets
    2. import { webview } from '@kit.ArkWeb';
    4. export interface ResourceConfig {
    5.   urlList: Array<string>,
    6.   type: webview.OfflineResourceType,
    7.   responseHeaders: Array<Header>,
    8.   localPath: string, // 本地资源存放在rawfile目录下的路径
    9. }
    11. export const resourceConfigs: Array<ResourceConfig> = [
    12.   {
    13.     localPath: "example.png",
    14.     urlList: [
    15.       "https://www.example.com/",
    16.       "https://www.example.com/path1/example.png",
    17.       "https://www.example.com/path2/example.png",
    18.     ],
    19.     type: webview.OfflineResourceType.IMAGE,
    20.     responseHeaders: [
    21.       { headerKey: "Cache-Control", headerValue: "max-age=1000" },
    22.       { headerKey: "Content-Type", headerValue: "image/png" },
    23.     ]
    24.   },
    25.   {
    26.     localPath: "example.js",
    27.     urlList: [ // 仅提供一个url，这个url既作为资源的源，也作为资源的网络请求地址
    28.       "https://www.example.com/example.js",
    29.     ],
    30.     type: webview.OfflineResourceType.CLASSIC_JS,
    31.     responseHeaders: [
    32.       // 以<script crossorigin="anoymous" />方式使用，提供额外的响应头
    33.       { headerKey: "Cross-Origin", headerValue:"anonymous" }
    34.     ]
    35.   },
    36. ];
    复制代码
  • 在页面中利用。
    1. // Index.ets
    2. import { webview } from '@kit.ArkWeb';
    3. import { NodeController } from '@kit.ArkUI';
    4. import { createNode } from "./DynamicComponent"
    5. import { injectWebview } from "./InjectWebview"
    6. import { businessWebview } from "./BusinessWebview"
    8. @Entry
    9. @Component
    10. struct Index {
    11.   @State injectNode: NodeController | undefined = undefined;
    12.   injectController: webview.WebviewController = new webview.WebviewController();
    14.   @State businessNode: NodeController | undefined = undefined;
    15.   businessController: webview.WebviewController = new webview.WebviewController();
    17.   aboutToAppear(): void {
    18.     // 初始化用于注入本地资源的Web组件, 提供一个空的html页面作为url即可
    19.     this.injectNode = createNode(injectWebview,
    20.         { url: "https://www.example.com/empty.html", controller: this.injectController});
    21.   }
    23.   build() {
    24.     Column() {
    25.       // 在适当的时机加载业务用Web组件，本例以Button点击触发为例
    26.       Button("加载页面")
    27.         .onClick(() => {
    28.           this.businessNode = createNode(businessWebview, {
    29.             url: "https://www.example.com/business.html",
    30.             controller: this.businessController
    31.           });
    32.         })
    33.       // 用于业务的Web组件
    34.       NodeContainer(this.businessNode);
    35.     }
    36.   }
    37. }
    复制代码
  • 加载的HTML网页示例。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head></head>
    4. <body>
    5.   <img src="https://www.example.com/path1/request.png" />
    6.   <img src="https://www.example.com/path2/request.png" />
    7.   <script src="https://www.example.com/example.js" crossorigin="anonymous"></script>
    8. </body>
    9. </html>
    复制代码



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊雷无声

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表