HarmonyOS鸿蒙Next中app的性能优化方案

HarmonyOS鸿蒙Next中app的性能优化方案 一. 布局优化 ：

布局的嵌套层次过深会导致在创建节点及进行布局时耗费更多时间。因此开发者在开发时，应避免冗余的嵌套或者使用扁平化布局来优化嵌套层次

使用扁平化布局方案，减少视图嵌套层级和组件数，避免过度绘制，可以提升页面渲染效率。例如：

• 在处理长列表时，可以减少列表项的复杂性，使用简单的布局结构。
• 内部容器和外部容器是相同的布局方向，内部容器形成的布局效果可以用外部容器代替

反例：使用了Grid来实现一个网格，但在外层套了3层包含不同属性参数的Stack容器

@Entry
@Component
struct AspectRatioExample12 {
  @State children: Number[] = Array.from(Array<number>(900), (v, k) => k);
  build() {
    Scroll() {
      Grid() {
        ForEach(this.children, (item: Number[]) => {
          GridItem() {
            Stack() {
              Stack() {
                Stack() {
                  Text(item.toString()).size({ width: "100%" })
                }.backgroundColor(Color.Yellow)
              }.backgroundColor(Color.Pink)
            }
          }, (item: string) => item)
        }
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(0)
      .rowsGap(0)
      .size({ width: "100%", height: "100%" })
    }
  }
}

正例：通过减少冗余的Stack容器嵌套，每个GridItem的组件数比上面少了3个

@Entry
@Component
struct AspectRatioExample11 {
  @State children: Number[] = Array.from(Array<number>(900), (v, k) => k);
  build() {
    Scroll() {
      Grid() {
        ForEach(this.children, (item: Number[]) => {
          GridItem() {
            Text(item.toString())
          }.backgroundColor(Color.Yellow)
        }, (item: string) => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(0)
      .rowsGap(0)
      .size({ width: "100%", height: "100%" })
    }
  }
}

运行性能优化

网络请求优化：

1. 提前发起网络请求，完成时延耗时长的绝大多数原因都是因为网络数据Http请求时间长，由于网络是从操作系统侧发起和控制的，且网络环境存在不可控性，所以我们很难在业务逻辑的代码中优化请求速度。因此应尽可能的提前发起网络请求。

2. 减少不必要的网络请求，尽量合并多个小请求，减少频繁的网络调用，使用本地缓存（如Perference或数据库）存储静态数据，避免每次都从服务器获取。

Web组件预连接、预加载、预渲染

当遇到Web页面加载慢的场景，可以使用Web组件的预连接、预加载、预渲染能力，在应用空闲时间提前进行Web引擎初始化和页面加载，提升下一页面的启动和响应速度

• 预启动Web渲染进程：预启动Web渲染进程指用户可以在业务需要的Web页面启动前，加载一个空白的Web组件，在至少一个Web组件存活时，Web渲染进程进程会一直存在，节省了用户后续启动Web组件拉起渲染进程的时间，加快页面加载速度。
• 预解析：预解析指预先对DNS进行解析，可以节省DNS解析的时间，从而优化Web的加载耗时。
• 预连接：预连接包含预解析的步骤，可以在用户请求页面之前提前进行DNS解析和socket连接建立，这样当用户真正请求页面时，服务器和浏览器之间已经建立好了连接，可以直接传输数据，减少了网络延迟，提升了页面加载速度。
• 预下载：预下载指在页面加载之前提前下载所需的资源，以避免在页面加载过程中资源下载导致的阻塞和耗时。通过预下载，可以在浏览器加载页面时，提前获取到所需的资源如图片、CSS文件、JavaScript文件等。通过提前下载这些资源，可以避免在页面加载时因为资源未加载完成而导致页面渲染延迟的情况发生。通过合理地使用预下载技术，用户在访问页面时可以更快地看到页面内容，提高整体性能，提升用户体验。
• 预渲染：预渲染指在后台对需要加载的页面进行预先渲染，提前完成整个页面加载的流程。当用户需要访问该页面时，可以直接切换至前台展示，实现页面“秒开”的效果。预渲染要求在进行DOM解析、JavaScript执行和页面渲染之前，已经完成了所需资源的下载工作，否则可能会导致页面内容不完整或者渲染错误的情况。通过预渲染，可以显著减少用户等待页面加载的时间，特别是对于一些需要加载大量资源或者有复杂交互的页面。
• 预取POST：预取POST指当即将加载的Web页面中存在POST请求且POST请求耗时较长时，可对POST请求进行预获取，消除等待POST请求数据下载完成的耗时，当用户真正发起POST请求时，进行拦截替换，加快页面加载速度，提高用户体验。
• 预编译JavaScript生成字节码缓存（Code Cache）：该方案会将使用到的JavaScript文件编译成字节码并缓存到本地，在页面首次加载时节省编译时间。
• 资源拦截替换的JavaScript生成字节码缓存（Code Cache）：该方案会将资源拦截替换场景下的JavaScript文件编译成字节码并缓存到本地，节省在页面非首次加载时的编译时间。
• 离线资源免拦截注入：在页面加载之前，离线资源免拦截注入会将需要使用的图片、样式表和脚本资源注入到内存缓存中，节省页面首次加载时的网络请求时间。
• 资源拦截替换加速：在原本的资源拦截替换接口基础上，资源拦截替换加速支持了ArrayBuffer格式的入参，开发者无需在应用侧进行ArrayBuffer到String格式的转换，可直接使用ArrayBuffer格式的数据进行拦截替换。