如何解决Web组件首次加载完网页立即滑动发生明显卡顿问题

问题现象

Web组件首次加载完网页时，此时立即去滑动网页会发生明显的卡顿。

问题代码示例参考如下：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  private webviewController: webview.WebviewController = new webview.WebviewController();
  // 此处地址实际使用过程中替换为真实地址
  private url = 'xx.xx.xx';
  private customUserAgent: string = ' DemoApp';

  build() {
    Column() {
      Web({
        src: this.url,
        controller: this.webviewController
      })
        .onPageEnd(() => {
          try {
            let userAgent = this.webviewController.getUserAgent() + this.customUserAgent;
            this.webviewController.setCustomUserAgent(userAgent);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
    }
    .width('100%')
    .height('100%')
  }
}

背景知识

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

问题定位

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

分析结论

在onPageEnd回调中设置自定义用户代理，导致页面重新加载，相当于页面加载了两次，在加载过程中滑动页面就可能发生“卡顿”现象。

修改建议

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

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  private webviewController: webview.WebviewController = new webview.WebviewController();
  // 此处地址实际使用过程中替换为真实地址
  private url = 'xx.xx.xx';
  private customUserAgent: string = ' DemoApp';

  build() {
    Column() {
      Web({
        src: this.url,
        controller: this.webviewController
      })
        .geolocationAccess(false)
        .fileAccess(false)
        .onControllerAttached(() => {
          console.info('onControllerAttached');
          try {
            let userAgent = this.webviewController.getUserAgent() + this.customUserAgent;
            this.webviewController.setCustomUserAgent(userAgent);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        });
    }
    .height('100%')
    .width('100%');
  }
}