当前位置: 首页 > article >正文

67.Harmonyos NEXT 图片预览组件之性能优化策略

温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!

Harmonyos NEXT 图片预览组件之性能优化策略

文章目录

  • Harmonyos NEXT 图片预览组件之性能优化策略
    • 效果预览
    • 一、性能优化概述
      • 1. 性能优化的关键指标
    • 二、懒加载实现
      • 1. CommonLazyDataSourceModel实现原理
      • 2. LazyForEach组件的应用
      • 3. 缓存控制策略
    • 三、渲染优化
      • 1. 矩阵变换优化
      • 2. 图片适配策略
      • 3. 渲染属性优化
    • 四、内存管理
      • 1. 资源释放策略
      • 2. 图片加载优化
    • 五、交互性能优化
      • 1. 事件处理优化
      • 2. 动画性能优化
    • 六、性能优化建议
      • 1. 图片资源优化
      • 2. 组件配置优化
      • 3. 监控与调优
    • 七、总结

效果预览

一、性能优化概述

图片预览组件在处理大量高清图片时,性能优化显得尤为重要。本文将详细介绍图片预览组件中采用的性能优化策略,包括懒加载实现、内存管理、渲染优化等方面,帮助开发者构建高性能的图片预览功能。

1. 性能优化的关键指标

在图片预览组件中,我们主要关注以下性能指标:

性能指标说明优化方向
内存占用图片加载和缓存占用的内存懒加载、资源释放
渲染性能图片显示和交互的流畅度矩阵变换、渲染优化
加载速度图片加载和切换的速度预加载、缓存策略
交互响应手势操作的响应速度事件处理优化

二、懒加载实现

1. CommonLazyDataSourceModel实现原理

图片预览组件使用CommonLazyDataSourceModel实现图片的懒加载,其核心原理是:

export class CommonLazyDataSourceModel<T> extends BasicDataSource<T> {
  private dataArray: T[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): T {
    return this.dataArray[index];
  }

  public clearAndPushAll(data: T[]): void {
    this.dataArray = [];
    this.dataArray.push(...data);
    this.notifyDataReload();
  }
}

懒加载数据源模型继承自BasicDataSource,实现了IDataSource接口,提供了数据变化通知机制。当数据发生变化时,会通知LazyForEach组件更新UI。

2. LazyForEach组件的应用

List({ scroller: this.listScroll, space: this.listSpace }) {
    LazyForEach(this.lazyImageList, (imageUrl: string, index: number) => {
        ListItem() {
            PicturePreviewImage({
                imageUrl: imageUrl,
                // 其他参数...
            })
        }
        .width("100%")
    })
}

LazyForEach组件只会渲染当前可见的图片项,而不是一次性加载所有图片,大大减少了内存占用和初始加载时间。

3. 缓存控制策略

.cachedCount(1)

通过设置List组件的cachedCount属性,控制缓存的图片数量,避免过多的内存占用。在实际应用中,可以根据设备性能和图片大小调整这个值。

三、渲染优化

1. 矩阵变换优化

图片预览组件使用matrix4矩阵变换实现图片的缩放和旋转,而不是直接修改图片尺寸,这种方式具有以下优势:

this.matrix = matrix4.identity().scale({
    x: this.imageScaleInfo.scaleValue,
    y: this.imageScaleInfo.scaleValue,
}).rotate({
    x: 0,
    y: 0,
    z: 1,
    angle: this.imageRotateInfo.currentRotate,
}).copy();
  1. 高效渲染:矩阵变换由GPU加速,性能更高
  2. 内存节约:不需要创建多个不同尺寸的图片实例
  3. 精确控制:可以实现精确的缩放和旋转效果

2. 图片适配策略

calcImageDefaultSize(imageWHRatio: number, windowSize: window.Size): image.Size {
    let width = 0
    let height = 0;
    if (imageWHRatio > windowSize.width / windowSize.height) {
        // 图片宽高比大于屏幕宽高比,图片默认以屏幕宽度进行显示
        width = windowSize.width;
        height = windowSize.width / imageWHRatio;
    } else {
        height = windowSize.height;
        width = windowSize.height * imageWHRatio;
    }
    return { width: width, height: height };
}

组件会根据图片和屏幕的宽高比,计算最适合的显示尺寸,避免不必要的缩放操作,提高渲染性能。

3. 渲染属性优化

Image(this.imageUrl)
    .width(this.imageWH === ImageFitType.TYPE_WIDTH ? $r("app.string.imageviewer_image_default_width") : undefined)
    .height(this.imageWH === ImageFitType.TYPE_HEIGHT ? $r("app.string.imageviewer_image_default_height") : undefined)
    .aspectRatio(this.imageWHRatio)
    .objectFit(ImageFit.Cover)
    .autoResize(false)
    .transform(this.matrix)
    .offset({
        x: this.imageOffsetInfo.currentX,
        y: this.imageOffsetInfo.currentY
    })

组件使用了多种渲染优化技术:

  1. 按需设置宽高:只设置一个维度,另一个通过aspectRatio自动计算
  2. 禁用自动调整大小:设置autoResize为false,避免不必要的布局计算
  3. 适当的objectFit模式:使用Cover模式确保图片能够正确显示

四、内存管理

1. 资源释放策略

resetCurrentImageInfo(): void {
    animateTo({
        duration: this.restImageAnimation
    }, () => {
        this.imageScaleInfo.reset();
        this.imageOffsetInfo.reset();
        this.imageRotateInfo.reset();
        this.matrix = matrix4.identity().copy();
    })
}

当图片切换时,组件会重置前一张图片的状态,释放不必要的资源,避免内存泄漏。

2. 图片加载优化

.onComplete((event: ImageLoadResult) => {
    if (event) {
        this.initCurrentImageInfo(event)
    }
})

组件在图片加载完成后才初始化相关信息,避免在加载过程中进行不必要的计算,提高性能。

五、交互性能优化

1. 事件处理优化

PanGesture({ fingers: 1 })
    .onActionUpdate((event: GestureEvent) => {
        if (this.imageWH != ImageFitType.TYPE_DEFAULT) {
            if (this.eventOffsetX != event.offsetX || event.offsetY != this.eventOffsetY) {
                this.eventOffsetX = event.offsetX;
                this.eventOffsetY = event.offsetY;
                this.setCrossAxis(event);
                this.setPrincipalAxis(event);
            }
        }
    })

组件通过比较前后事件的偏移量,避免处理重复的事件,减少不必要的计算和渲染。

2. 动画性能优化

export function runWithAnimation(fn: Function, duration: number = 300) {
    animateTo({
        duration: duration,
        curve: Curve.Ease,
        iterations: 1,
        playMode: PlayMode.Normal,
    }, fn);
}

组件使用animateTo API实现平滑的动画效果,该API由系统优化,性能更高。同时,通过设置合理的动画参数,避免过于复杂的动画效果。

六、性能优化建议

1. 图片资源优化

在使用图片预览组件时,建议对图片资源进行优化:

  1. 合适的分辨率:根据显示需求选择合适的图片分辨率,避免过大的图片
  2. 图片压缩:使用适当的压缩算法减小图片文件大小
  3. 图片格式:选择高效的图片格式,如WebP、HEIF等

2. 组件配置优化

根据实际需求调整组件配置,提高性能:

  1. 缓存数量:根据设备性能和内存情况调整cachedCount值
  2. 预加载策略:根据用户行为预测可能查看的图片,提前加载
  3. 动画参数:调整动画持续时间和曲线,平衡流畅度和性能

3. 监控与调优

在实际应用中,建议进行性能监控和调优:

  1. 内存监控:监控应用内存使用情况,及时发现内存泄漏
  2. 性能分析:使用性能分析工具找出性能瓶颈
  3. 用户反馈:收集用户反馈,针对性地进行优化

七、总结

图片预览组件通过懒加载实现、矩阵变换优化、内存管理和交互性能优化等策略,实现了高性能的图片预览功能。这些优化策略不仅提高了组件的性能,还改善了用户体验。

在实际应用中,开发者可以根据具体需求和设备性能,调整组件配置和优化策略,进一步提高性能。同时,持续的性能监控和调优也是保持组件高性能的关键。

通过本文介绍的性能优化策略,开发者可以更好地理解和使用图片预览组件,构建高性能的图片预览功能。


http://www.kler.cn/a/585488.html

相关文章:

  • Redis项目_黑马点评
  • transformer bert 多头自注意力
  • Linux ECM子网掩码常见问题排查
  • Jenkins 集成DingDing 推送
  • qt+opengl 播放yuv视频
  • 类和对象:
  • 【服务器知识】Nginx路由匹配规则说明
  • Kotlin关键字`when`的详细用法
  • NLP技术介绍
  • SpringBoot + ResponseBodyEmitter 实时异步流式推送,优雅!
  • FreeRTOS之信号量
  • GaussDB高安全—全密态数据库
  • Git常用操作之GitLab
  • 【MySQL】第十八弹---数据库管理基础:视图操作与用户权限管理指南
  • 芯谷D8563TS实时时钟/日历芯片详解可替代PCF8563
  • 【Java 基础(人话版)】进制转换
  • 爬虫基础之爬取豆瓣同城信息(保存为csv excel 数据库)
  • 【计算机网络】第八版和第七版的主要区别,附PDF
  • Chatbox通过百炼调用DeepSeek
  • Qt项目中集成第三方模块的.pri文件