HarmonyOS 鸿蒙Next web组件加载H5页面过慢如何监测

在鸿蒙开发里，Web 组件提供了一系列事件回调函数，借助这些函数能够监测页面加载的不同状态。

Web({
      src: 'https://example.com',
      onLoadStart: () => {
        console.log('页面开始加载');
      },
      onLoadFinish: () => {
        console.log('页面加载完成');
      },
      onLoadError: (errorCode: number, errorMsg: string) => {
        console.log(`页面加载失败，错误码: ${errorCode}，错误信息: ${errorMsg}`);
      },
      onPageRedirect: (oldUrl: string, newUrl: string) => {
        console.log(`页面重定向，从 ${oldUrl} 到 ${newUrl}`);
      }
    })

在 H5 页面中可以使用 window.performance 对象来获取性能相关数据，然后通过 Web 组件的 evaluateJs 方法将数据传递给鸿蒙应用。

Web({
      src: 'https://example.com',
      ref: this.webRef,
      onLoadFinish: () => {
        this.webRef.current?.evaluateJs(`
          const performanceData = window.performance.timing;
          {
            'navigationStart': performanceData.navigationStart,
            'domContentLoadedEventEnd': performanceData.domContentLoadedEventEnd,
            'loadEventEnd': performanceData.loadEventEnd
          }
        `, (result: any) => {
          console.log('性能数据:', result);
          if (result) {
            const loadTime = result.loadEventEnd - result.navigationStart;
            console.log(`页面加载耗时: ${loadTime} 毫秒`);
            const domContentLoadTime = result.domContentLoadedEventEnd - result.navigationStart;
            console.log(`DOM 内容加载耗时: ${domContentLoadTime} 毫秒`);
          }
        });
      }
    })
    .width('100%')
    .height('100%')
  }
}

代码解释

• window.performance.timing 包含了页面加载过程中各个关键时间点的数据。
• evaluateJs 方法用于在 Web 组件中执行 JavaScript 代码，并获取执行结果。

监测网络连接、资源下载、创建 render、DOM 解析这些阶段

1. 结合 window.performance 和自定义标记

在 H5 页面中，可以通过自定义标记和 window.performance 来监测各个阶段。

@Entry
@Component
struct WebStageMonitor {
  private webRef: WebRef = new WebRef()

  build() {
    Web({
      src: 'https://example.com',
      ref: this.webRef,
      onLoadFinish: () => {
        this.webRef.current?.evaluateJs(`
          const performanceData = window.performance.timing;
          const networkTime = performanceData.responseStart - performanceData.fetchStart;
          const resourceDownloadTime = performanceData.responseEnd - performanceData.responseStart;
          const domParseTime = performanceData.domInteractive - performanceData.responseEnd;
          {
            'networkTime': networkTime,
            'resourceDownloadTime': resourceDownloadTime,
            'domParseTime': domParseTime
          }
        `, (result: any) => {
          console.log('各阶段耗时:', result);
        });
      }
    })
  }
}

• networkTime：表示网络连接和请求响应开始的时间差。
• resourceDownloadTime：表示资源下载的时间。
• domParseTime：表示 DOM 解析的时间。