HarmonyOS 鸿蒙Next 如何定位Web组件首次加载网页时滑动卡顿问题

HarmonyOS 鸿蒙Next 如何定位Web组件首次加载网页时滑动卡顿问题

【问题现象】

Web组件首次加载网页时，在开始加载网页的时候用手指滑动网页会发生明显的卡顿。

问题代码如下：

Web({
  controller: this.webController,
  src: this.url
  // src: $rawfile('news.html')
}).darkMode(WebDarkMode.Auto)
  .javaScriptProxy(
    {
      object: this.newsNormalController,
      name: "JSBridgeHandle",
      methodList: ["sendNewsDataToPage", "images", "openPath", "toCareDzh", "openHomePage",
        "deleteComment", "popSecondComments", "zanComment", "contextDetail"],
      controller: this.webController
    }
  )
  .onPageBegin(() => {
    this.webController.setCustomUserAgent("Mozilla/5.0 (Phone; Android; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
  })

【背景知识】

setCustomUserAgent()接口用于设置自定义用户代理，会覆盖系统的用户代理。

【定位思路】

分析代码发现，在onPageBegin回调中，做了一个设置自定义用户代理的操作，会导致页面重新加载，这样相当于页面加载了两次，此时滑动页面就可能发生“卡顿”现象。

【解决方案】

将设置用户自定义代码的代码放到onControllerAttached中。

代码示例如下：

.onControllerAttached(()=>{
           this.webController.setCustomUserAgent("Mozilla/5.0 (Phone; Android; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
 })