如何解决webview离线加载白屏问题

web容器加载html调用全屏接口，在跳转5次后，第六次跳转会出现web白屏。使用最新特性离线组件，离线组件中的Text标签正常展示，但是web容器中的html展示异常，而且确定组件树上有web节点。如果不调全屏接口，跳转页面正常，跳转多次也不会白屏。

HarmonyOS

e_lion

2024-05-20 20:15:37

浏览

回答 1

待解决

回答 1

按赞同

按时间

savage01

当前web使用BuilderNode通过无状态的UI方法@Builder生成离线web组件。此时创建的web组件是无状态的。

来回切换多次，会创建多个离线web组件，当web创建超过5个时，会触发tabdiscarding机制，冻结部分web实例，使其无法渲染（后台释放资源节省内存），调用全屏接口后，当前调用的web实例被一致被判断为前台，所以一致处于 active状态。后面再次创建的无状态web则被定义为inactive状态。

更详细来讲其实就是一个Frame Eviction Manager机制，是负责管理web中的帧缓存，根据一定的策略将一些不常用或者不重要的帧从内存中移除，以释放内存空间，节省内存提高稳定性。对应的是web源码中的max_number_of_saved_frames_字段,其设置的最大值为5。

参考代码：

在每次创建好web实例，调用loadurl时，设置WebController的onActive方法主动激活状态即可解决此问题。需要应用调用相关接口。离线web释放需要先对使用的framenode进行释放，才可析构离线web组件。

build() { 
    Row() { 
      Column() { 
        NavigationExample({ url: this.url, pageStackName: this.pageStackName }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
} 
  
export struct NavigationExample { 
aboutToAppear(): void { 
    Logger.info(TAG, 'NavigationExample aboutToAppear'); 
    GlobalRouter.getInstance().firstLoad(this.url, this.pageStackName); 
  } 
} 
  
 public firstLoad(url: string, pageStackName: string): void { 
  
    // 加载url 
    url = DomainUtil.processDomain(url); 
    let routerStorageInstance: RouterStorage = RouterStorage.getInstance(); 
    let webId: number = WebManager.getInstance().getWebInstanceId(false, url); 
    let routeType: RouteType = RouteType.MULTI_MULTI; 
    let nodeType: number = DomainUtil.getRouterType(url); 
    routerStorageInstance.addRouteType(routeType); 
    routerStorageInstance.addNode(url, webId, nodeType); 
  
    NavigationController.getInstance().pushPath(true, pageStackName); 
    WebManager.getInstance().getWebController(webId)?.loadUrl(url); 
    WebManager.getInstance().getWebController(webId)?.onActive();//设置该web组件onActive 解决该问题 
  }

2024-05-21 15:37:48

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

如何解决webview离线加载白屏问题

订阅鸿蒙技术特刊，精选内容抢先看