Edit online

性能优化

按照本节建议说明,可以优化 LVGL 库界面开发的性能。

Edit online

速度优化

参与模块

  • CPU: 负责绝大多数控件绘制
  • GE (图形引擎): 处理图片缩放/旋转等操作
  • VE (视频引擎): 解码和转换图片
  • FLASH: 存储压缩图片资源
  • RAM: 存储中间数据
  • DE (显示引擎): 将界面数据送屏显示

整体优化思路

  • 减少从 flash 中读取文件频率(增大缓存)
  • 降低 CPU 绘制负载(优先使用 GE)
  • 简化界面复杂度
  • 提升硬件性能/ 减少数据量

具体优化措施

  1. G2D 模块利用
    • 将复杂背景或固定文字转为图片
    • 如需大块颜色填充,使用 GE 渲染函数
    • JPEG 比 PNG 加载更快(推荐 JPEG 底图格式)


    1. 使用 G2D 模块绘制的优化示例
  2. 减少重复绘制:设置透明度为 LV_OPA_0 禁用冗余绘制区域和重复绘制区域


    2. 减少重复绘制示例
  3. 流程优化

    以下为一个 demo 场景示例,实现该场景有以下 UI 设计方案可供选择,其中方案 2 较方案 1 提速 100% 以上:



    方案 操作步骤 混合次数/角度
    方案 1 四图分离 + 三次 alpha blending:
    1. 准备光条、指针、光圈、底图四张图片。
    2. 按照先后顺序,依次对光圈和背景、光条和背景以及指针和背景进行 alpha blending。

      每一个角度的旋转都需要进行三次 alpha blending。

    3 次
    方案 2 光条指针合并 + 光圈入背景:
    1. 光条和指针合并为一张图片。

    2. 光圈合并到背景图中。

    3. 准备光条和指针图片和底图。

      每一个角度的旋转都只需要对光条和指针图片与背景图进行一次 alpha blending。
    1 次


    3. 方案 1 示例


    4. 方案 2 示例
  4. 增大图片缓存空间:减少加载和解码的时间(V9 支持配置)



  5. 其他优化项
    • 使用 snapshot/ canvas 将界面转图片,走硬件加速
    • 小图标转换为.c 数组,减少图片加载和解码时间
    • 提高 VE/ GE/ AHB/ DDR 频率
    • 调整 framebuffer 格式:ARGB8888→RGB888
    • 避免同时触发旋转 + 缩放特效
Edit online

内存优化

  1. 显示内存优化

    显存占用 = 分辨率 × 色深字节数

    1. 显示内存占用
    格式 双 framebuffer 屏幕是否旋转 内存占用
    1024 600 ARGB8888 1024x600x4x2 = 4.8MB
    1024 600 RGB565 1024x600x2x2 = 2.4MB
    1024 600 ARGB8888 1024x600x4x2 +1024x600x4 = 7.2MB
    1024 600 RGB565 1024x600x2x2 + 1024x600x2= 3.6 MB
    配置策略:
    • 降低色深:非高保真场景 framebuffer 选用 rgb565。

      详情可查看配置 Framebuffer

    • 屏幕方向:不开启旋转或者选择竖屏竖用,横屏横用的显示屏。
  2. 优化解码内存占用
    • 如果不是必须包含透明度,使用 JPEG 图片替换 PNG 图片。。
      格式 解码内存占用
      1024 600 PNG 1024x600x4 = 2.4 MB
      1024 600 JPEG 1024x600x2 = 1.2 MB
    • 当内存比较紧张时,需要对图片缓存的释放进行控制。

      LVGL V8 图片缓存释放接口:

      // 释放对象 img_obj 的图片缓存
      lv_img_cache_invalidate_src(lv_img_get_src(img_obj));
      
      // 释放所有的图片缓存,在场景切换时,确定不需要已有的图片缓存可以这么调用
      lv_img_cache_invalidate_src(NULL);
      LVGL V9 图片缓存释放接口:
      // 释放对象 img_obj 的图片缓存
      lv_image_cache_drop(lv_image_get_src(img_obj));
      
      // 释放所有的图片缓存,在场景切换时,确定不需要已有的图片缓存可以这么调用
      lv_image_cache_drop(NULL);