HarmonyOS鸿蒙Next中频繁改变web组件的高度会造成内容刷新掉帧卡顿的问题？

开发者你好：

Web组件渲染模式：Web组件支持两种渲染模式，异步渲染模式（默认），同步渲染模式。

Web组件大小自适应页面内容布局：使用Web组件大小自适应页面内容布局模式时，能使Web组件的大小根据页面内容自适应变化。

onScaleChange：当前页面显示比例的变化时触发该回调。

【解决方案】

• 由于高度更新过于频繁，触发了不必要的重渲染或布局计算。
• 可以使用节流或防抖来限制更新频率，减少性能消耗。

代码如下：

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

@Component
struct Demo {
  public controller: webview.WebviewController = new webview.WebviewController();
  onScaleChange: (oldScale: number, newScale: number) => void = () => {}

  build() {
    Web({
      src: $rawfile("Untitled-1.html"),
      controller: this.controller
    })
      .zoomAccess(true)
      .onScaleChange((event) => {
        this.onScaleChange(event.oldScale, event.oldScale)
      })
      .horizontalScrollBarAccess(false)
      .verticalScrollBarAccess(false)
  }
}

class Util {
  // 防抖 在一段时间内函数被多次触发，防抖让函数在一段时间后最终只执行一次
  static debounce(fun: (height: number) => void, delay?: number) {
    let timer: number;
    return (height: number) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fun(height);
      }, delay ? delay : 100);
    };
  }

  // 节流 在规定的时间内，只执行一次
  throttle(fun: (height: number) => void, delay?: number) {
    let inThrottle: boolean;
    return (height: number) => {
      if (!inThrottle) {
        fun(height);
        inThrottle = true;
        setTimeout(() => inThrottle = false, delay ? delay : 1000);
      }
    };
  }
}

@Entry
@Component
struct Index {
  @State webHeight: number = 600; // 当前显示高度
  @State constWebHeight: number = 600; // 基础计算高度
  webController: webview.WebviewController = new webview.WebviewController();
  // 创建防抖函数实例（300ms延迟）
  debouncedSetHeight = Util.debounce((newHeight: number) => {
    this.webHeight = newHeight;
    console.info(`防抖后高度：${this.webHeight}`);
  }, 100)

  build() {
    Column() {
      Demo({
        controller: this.webController,
        onScaleChange: (oldScale: number, newScale: number) => {
          const targetHeight = this.constWebHeight * newScale / 100;
          this.debouncedSetHeight(targetHeight); // 触发防抖函数
        }
      })
    }
    .height(this.webHeight)
    .width('100%')
  }
}

【常见FAQ】

Q：使用Web组件页面时，在网页加载过程中，页面底部可能出现闪烁现象。

A：应用可以通过设置与网页背景色相同的Web组件的背景色，避免视觉闪烁。请参阅闪烁原因及优化方案，了解详情。