鸿蒙Next组件Web渲染和布局（三） 原创

本篇对比一下Web的两种渲染模式，三种不同的布局方式。

渲染模式对比

同步渲染：RenderMode.SYNC_RENDER

开发者模式：过度绘制检测

10次同步加载耗时：毫秒

I     web onPageBegin: 同步完成加载 耗时:1376
I     web onPageBegin: 同步完成加载 耗时:989
I     web onPageBegin: 同步完成加载 耗时:1014
I     web onPageBegin: 同步完成加载 耗时:1040
I     web onPageBegin: 同步完成加载 耗时:1052
I     web onPageBegin: 同步完成加载 耗时:1004
I     web onPageBegin: 同步完成加载 耗时:1825
I     web onPageBegin: 同步完成加载 耗时:1068
I     web onPageBegin: 同步完成加载 耗时:1437
I     web onPageBegin: 同步完成加载 耗时:1009

异步渲染： RenderMode.ASYNC_RENDER

开发者模式：过度绘制检测

10次异步加载耗时：毫秒

I     web onPageBegin: 异步完成加载 耗时:1385
I     web onPageBegin: 异步完成加载 耗时:1056
I     web onPageBegin: 异步完成加载 耗时:743
I     web onPageBegin: 异步完成加载 耗时:772
I     web onPageBegin: 异步完成加载 耗时:788
I     web onPageBegin: 异步完成加载 耗时:837
I     web onPageBegin: 异步完成加载 耗时:783
I     web onPageBegin: 异步完成加载 耗时:784
I     web onPageBegin: 异步完成加载 耗时:1371
I     web onPageBegin: 异步完成加载 耗时:1063

总结：
1.异步加载耗时相对较少，资源文件不多时，两者相差不多
2.同步加载会重复绘制，相对异步加载会增加功耗

布局方式

1.布局内容分为上下部分，主要部分为Web

注意：
当顶部组件占高度5%时，如果不设置Web高度，此时Web加载完成时的高度是屏幕高度，超出剩余空间，会显示到导航栏。
解决方案：
1.Web设置固定高度（100%-顶部组件高度）
2.给Web设置margin（导航栏高度）
源码：

import { webview } from '@kit.ArkWeb'
import ApiConstants from '../net/ApiConstants'
@Entry
@ComponentV2
struct WebTest2{
  private webviewController: WebviewController = new webview.WebviewController()
  private startTime:number=0
  private finishTime:number=0
  private loadTime:number=0
  build() {
      Column(){
        Stack(){
          Text('顶部区域').fontSize(25).fontColor(Color.White)
        }.alignContent(Alignment.Center).width('100%').height('5%').backgroundColor(Color.Red)
        Web({
          src: ApiConstants.WEB_URL3,
          controller: this.webviewController,
          renderMode: RenderMode.ASYNC_RENDER 
        })
          .onPageBegin((event) => {
           this.startTime =  new Date().getTime()
          })
          .onPageEnd((event) => {
            this.finishTime =  new Date().getTime()
            this.loadTime = this.finishTime-this.startTime
            console.log('web onPageBegin: 异步完成加载 耗时:'+this.loadTime);
          })
          .onAreaChange((oldValue: Area, newValue: Area)=>{
            console.log('web高度:'+newValue.height);
          })
          .height('95%')
       // .margin({bottom:WindowUtils.getNavHeight()+'px'})
      }
  }
}

2.布局内容分为上中下三部分，Web居中显示，屏幕下部固定底部组件区域，不随Web滑动

注意
布局同1，Web需要设置高度，再减去底部区域的高度即可

3.布局内容分为上中下三部分，Web居中显示，Web内容末尾添加底部组件区域，可随Web滑动

注意
1.Web和Scroll同步滚动，必须设置同步渲染的模式，否则高度会出错，导致滑动不同步
2.设置内容自适应，否则高度不能充满
3.关闭Web滚动，防止与Scroll滚动冲突
源码：

import { webview } from '@kit.ArkWeb'
import ApiConstants from '../net/ApiConstants'
@Entry
@ComponentV2
struct WebTest2{
  private webviewController: WebviewController = new webview.WebviewController()
  private startTime:number=0
  private finishTime:number=0
  private loadTime:number=0
  build() {
    Scroll(){
      Column(){
        Stack(){
          Text('顶部区域').fontSize(25).fontColor(Color.White)
        }.alignContent(Alignment.Center).width('100%').height('5%').backgroundColor(Color.Red)
        Web({
          src: ApiConstants.WEB_URL3,
          controller: this.webviewController,
          renderMode: RenderMode.SYNC_RENDER // 渲染模式
        })
          .layoutMode(WebLayoutMode.FIT_CONTENT) // 设置为Web组件大小自适应页面内容
          .overScrollMode(OverScrollMode.NEVER) // 设置过滚动模式为关闭状态
          .onPageBegin((event) => {
           this.startTime =  new Date().getTime()
          })
          .onPageEnd((event) => {
            this.finishTime =  new Date().getTime()
            this.loadTime = this.finishTime-this.startTime
            console.log('web onPageBegin: 异步完成加载 耗时:'+this.loadTime);
          })
          .onAreaChange((oldValue: Area, newValue: Area)=>{
            console.log('web高度:'+newValue.height);
          })
        Stack(){
          Text('底部区域').fontSize(25).fontColor(Color.White)
        }.alignContent(Alignment.Center).width('100%').height('10%').backgroundColor(Color.Red)
      }
    }
  }
}