📝 文章概述

性能是用户体验的基石。本文将系统性地介绍鸿蒙日记应用的性能优化实践，从启动优化、运行时优化、内存管理到电池续航，全方位打造流畅的60帧体验。

🎯 性能优化目标

性能指标体系

mindmap
  root((性能优化))
    启动性能
      冷启动时间
      热启动时间
      首屏渲染
    运行性能
      帧率稳定
      操作响应
      动画流畅
    资源占用
      内存占用
      CPU使用
      存储空间
    用户体验
      流畅度
      稳定性
      功耗

优化前后对比

性能指标	优化前	优化后	提升幅度	目标
冷启动时间	1200ms	600ms	-50%	<800ms ✅
首屏渲染	800ms	300ms	-62%	<500ms ✅
日记列表加载	500ms	150ms	-70%	<200ms ✅
搜索响应	200ms	50ms	-75%	<100ms ✅
页面切换帧率	45FPS	60FPS	+33%	60FPS ✅
内存占用	80MB	50MB	-37%	<60MB ✅

🚀 启动性能优化

启动流程分析

优化策略1：延迟初始化

@Entry
@ComponentV2
struct Index {
  @Local diaryList: DiaryRecord[] = []
  @Local isLoading: boolean = true
  
  // 🔥 优化：延迟执行非关键初始化
  aboutToAppear() {
    // 立即显示UI框架
    this.isLoading = true
    
    // 延迟执行数据加载，让UI先渲染
    setTimeout(async () => {
      await this.initializeApp()
      this.isLoading = false
    }, 100)  // 100ms延迟，确保UI先渲染
  }
  
  async initializeApp() {
    try {
      // 并行执行多个初始化任务
      await Promise.all([
        this.loadDataOnStartup(),    // 加载数据
        this.createNoteIcon(),        // 创建图标
        this.checkPrivacyStatus()     // 检查隐私状态
      ])
      
      console.info('✅ 应用初始化完成')
    } catch (error) {
      console.error('❌ 初始化失败:', error)
    }
  }
}

优化策略2：并行加载

// ❌ 串行加载（慢）
async initializeAppSerial() {
  await this.initDatabase()      // 等待300ms
  await this.loadDiaries()       // 等待200ms
  await this.createIcon()        // 等待150ms
  // 总耗时: 650ms
}

// ✅ 并行加载（快）
async initializeAppParallel() {
  await Promise.all([
    this.initDatabase(),         // 300ms \
    this.loadDiaries(),          // 200ms  > 同时执行
    this.createIcon()            // 150ms /
  ])
  // 总耗时: 300ms（最长任务的时间）
}

优化策略3：WebView预加载

@Entry
@ComponentV2
struct Index {
  private webviewController: webview.WebviewController = 
    new webview.WebviewController()
  
  // 🔥 WebView预加载
  aboutToAppear() {
    // 提前初始化WebView，减少首次加载时间
    this.preloadWebView()
  }
  
  async preloadWebView() {
    try {
      const state = await this.webviewController.waitForAttached(3000)
      
      if (state === webview.ControllerAttachState.ATTACHED) {
        // WebView已就绪，可以提前注册接口
        this.registerJavaScriptProxy()
        console.info('✅ WebView预加载完成')
      }
    } catch (error) {
      console.error('❌ WebView预加载失败:', error)
    }
  }
}

启动性能监控

class StartupPerformanceMonitor {
  private startTime: number = 0
  private milestones: Map<string, number> = new Map()
  
  // 开始监控
  start() {
    this.startTime = Date.now()
    this.recordMilestone('app_start')
  }
  
  // 记录里程碑
  recordMilestone(name: string) {
    const elapsed = Date.now() - this.startTime
    this.milestones.set(name, elapsed)
    console.info(`📊 [性能] ${name}: ${elapsed}ms`)
  }
  
  // 生成报告
  generateReport(): string {
    const lines: string[] = ['启动性能报告：']
    
    this.milestones.forEach((time, name) => {
      lines.push(`  ${name}: ${time}ms`)
    })
    
    return lines.join('\n')
  }
}

// 使用示例
const monitor = new StartupPerformanceMonitor()

aboutToAppear() {
  monitor.start()
  
  // UI渲染完成
  monitor.recordMilestone('ui_rendered')
  
  // 数据加载完成
  this.loadData().then(() => {
    monitor.recordMilestone('data_loaded')
  })
  
  // 首屏完成
  monitor.recordMilestone('first_screen')
  
  // 输出报告
  console.info(monitor.generateReport())
}

💪 运行时性能优化

优化策略1：列表性能优化

// ❌ 一次性渲染所有项（性能差）
@Builder
DiaryListSlow() {
  List() {
    ForEach(this.diaryList, (diary: DiaryRecord) => {
      ListItem() {
        this.DiaryItemBuilder(diary)
      }
    })
  }
}

// ✅ 虚拟滚动 + 懒加载（性能好）
@Builder
DiaryListOptimized() {
  List() {
    // 使用LazyForEach实现虚拟滚动
    LazyForEach(this.diaryDataSource, (diary: DiaryRecord) => {
      ListItem() {
        this.DiaryItemBuilder(diary)
      }
    }, (diary: DiaryRecord) => diary.id.toString())
  }
  .cachedCount(3)  // 缓存3个屏幕外的项
}

// 数据源实现
class DiaryDataSource implements IDataSource {
  private diaries: DiaryRecord[] = []
  
  totalCount(): number {
    return this.diaries.length
  }
  
  getData(index: number): DiaryRecord {
    return this.diaries[index]
  }
  
  registerDataChangeListener(listener: DataChangeListener): void {
    // 实现监听器注册
  }
  
  unregisterDataChangeListener(listener: DataChangeListener): void {
    // 实现监听器注销
  }
}

优化策略2：搜索防抖

class SearchDebouncer {
  private timer: number | null = null
  private delay: number = 300  // 300ms防抖
  
  // 🔥 防抖搜索
  debounceSearch(keyword: string, callback: (keyword: string) => void) {
    // 清除之前的定时器
    if (this.timer) {
      clearTimeout(this.timer)
    }
    
    // 设置新的定时器
    this.timer = setTimeout(() => {
      callback(keyword)
    }, this.delay)
  }
}

@ComponentV2
struct DiarySearchBox {
  @Local searchKeyword: string = ''
  private debouncer = new SearchDebouncer()
  
  build() {
    TextInput({ 
      placeholder: '搜索日记...', 
      text: this.searchKeyword 
    })
      .onChange((value) => {
        this.searchKeyword = value
        
        // ✅ 使用防抖，避免频繁搜索
        this.debouncer.debounceSearch(value, (keyword) => {
          this.performSearch(keyword)
        })
      })
  }
  
  performSearch(keyword: string) {
    console.info(`🔍 执行搜索: ${keyword}`)
    // 实际搜索逻辑
  }
}

优化策略3：内容截断

// 🔥 日记内容截断（列表页只显示前100字）
loadDiaryListData() {
  const diariesJson = JSON.stringify(
    this.filteredDiaryList.map((diary: DiaryRecord) => {
      return {
        id: diary.id,
        title: diary.title,
        // ✅ 内容截断，减少数据传输量
        content: diary.content.substring(0, 100) + '...',
        time: diary.time
      }
    })
  )
  
  // 传输到WebView
  this.webviewController.runJavaScript(`
    if (window.setDiaryList) {
      window.setDiaryList(${diariesJson});
    }
  `)
}

优化策略4：分页加载

class PaginatedDiaryLoader {
  private pageSize: number = 20
  private currentPage: number = 0
  private hasMore: boolean = true
  
  // 🔥 加载下一页
  async loadNextPage(api: DiaryAPI): Promise<DiaryRecord[]> {
    if (!this.hasMore) {
      return []
    }
    
    this.currentPage++
    
    // 从数据库分页查询
    const records = await api.queryByPage(this.currentPage, this.pageSize)
    const diaryArray = records.convertToArray()
    
    // 判断是否还有更多数据
    this.hasMore = diaryArray.length >= this.pageSize
    
    console.info(`📄 加载第${this.currentPage}页，${diaryArray.length}条记录`)
    return diaryArray
  }
  
  // 重置分页
  reset() {
    this.currentPage = 0
    this.hasMore = true
  }
}

🧠 内存管理优化

内存泄漏检测

class MemoryLeakDetector {
  private allocations: Map<string, number> = new Map()
  
  // 记录对象分配
  track(id: string, size: number) {
    this.allocations.set(id, size)
    console.info(`📦 分配内存: ${id} (${size}字节)`)
  }
  
  // 记录对象释放
  release(id: string) {
    if (this.allocations.has(id)) {
      const size = this.allocations.get(id)!
      this.allocations.delete(id)
      console.info(`🗑️ 释放内存: ${id} (${size}字节)`)
    }
  }
  
  // 检查泄漏
  checkLeaks(): string[] {
    const leaks: string[] = []
    
    this.allocations.forEach((size, id) => {
      leaks.push(`${id}: ${size}字节未释放`)
    })
    
    if (leaks.length > 0) {
      console.warn('⚠️ 检测到内存泄漏:')
      leaks.forEach(leak => console.warn(`  - ${leak}`))
    }
    
    return leaks
  }
}

资源及时释放

@Entry
@ComponentV2
struct Index {
  @Local noteIconPixelMap: image.PixelMap | null = null
  private webviewController: webview.WebviewController | null = null
  
  // 🔥 页面销毁时清理资源
  aboutToDisappear() {
    console.info('🧹 开始清理资源')
    
    // 释放PixelMap
    if (this.noteIconPixelMap) {
      this.noteIconPixelMap.release()
      this.noteIconPixelMap = null
      console.info('✅ PixelMap已释放')
    }
    
    // 清理WebView
    if (this.webviewController) {
      this.webviewController.clearHistory()
      this.webviewController = null
      console.info('✅ WebView已清理')
    }
    
    console.info('✅ 资源清理完成')
  }
}

对象池优化

class ObjectPool<T> {
  private pool: T[] = []
  private factory: () => T
  private maxSize: number
  
  constructor(factory: () => T, maxSize: number = 10) {
    this.factory = factory
    this.maxSize = maxSize
  }
  
  // 获取对象
  acquire(): T {
    if (this.pool.length > 0) {
      const obj = this.pool.pop()!
      console.info(`♻️ 从池中获取对象，剩余${this.pool.length}个`)
      return obj
    }
    
    console.info('🆕 创建新对象')
    return this.factory()
  }
  
  // 归还对象
  release(obj: T) {
    if (this.pool.length < this.maxSize) {
      this.pool.push(obj)
      console.info(`♻️ 对象归还到池，当前${this.pool.length}个`)
    } else {
      console.info('🗑️ 池已满，丢弃对象')
    }
  }
  
  // 清空池
  clear() {
    this.pool = []
    console.info('🧹 对象池已清空')
  }
}

// 使用示例：FastBuffer对象池
const fastBufferPool = new ObjectPool<fastbuffer.FastBuffer>(
  () => fastbuffer.alloc(1024),
  10
)

// 获取FastBuffer
const buffer = fastBufferPool.acquire()

// 使用完后归还
fastBufferPool.release(buffer)

⚡ 动画性能优化

优化前：卡顿动画

// ❌ 直接修改状态，可能导致多次渲染
Button('展开')
  .onClick(() => {
    this.isExpanded = true
    this.height = 200
    this.opacity = 1
  })

优化后：流畅动画

// ✅ 使用animateTo批量动画
Button('展开')
  .onClick(() => {
    animateTo(
      {
        duration: 300,
        curve: Curve.EaseInOut,
        onFinish: () => {
          console.info('✅ 动画完成')
        }
      },
      () => {
        // 在这里一次性修改所有状态
        this.isExpanded = true
        this.height = 200
        this.opacity = 1
      }
    )
  })

帧率监控

class FrameRateMonitor {
  private lastFrameTime: number = 0
  private frameCount: number = 0
  private fps: number = 0
  
  // 记录帧
  recordFrame() {
    const now = Date.now()
    this.frameCount++
    
    // 每秒计算一次FPS
    if (now - this.lastFrameTime >= 1000) {
      this.fps = this.frameCount
      this.frameCount = 0
      this.lastFrameTime = now
      
      // 输出FPS
      if (this.fps < 55) {
        console.warn(`⚠️ FPS低: ${this.fps}`)
      } else {
        console.info(`✅ FPS: ${this.fps}`)
      }
    }
  }
  
  getFPS(): number {
    return this.fps
  }
}

🔋 功耗优化

优化策略

实践：避免轮询

// ❌ 轮询方式（功耗高）
class BadAutoSave {
  private timer: number | null = null
  
  startPolling() {
    this.timer = setInterval(() => {
      // 每5秒检查一次
      this.checkAndSave()
    }, 5000)
  }
}

// ✅ 事件驱动方式（功耗低）
class GoodAutoSave {
  private saveTimer: number | null = null
  private isDirty: boolean = false
  
  // 内容变化时触发
  onContentChange() {
    this.isDirty = true
    
    // 清除之前的定时器
    if (this.saveTimer) {
      clearTimeout(this.saveTimer)
    }
    
    // 30秒后自动保存
    this.saveTimer = setTimeout(() => {
      if (this.isDirty) {
        this.save()
        this.isDirty = false
      }
    }, 30000)
  }
}

📊 性能监控工具

综合性能监控

class PerformanceMonitor {
  private startTime: number = Date.now()
  private metrics: Map<string, any> = new Map()
  
  // 记录指标
  recordMetric(name: string, value: any) {
    this.metrics.set(name, {
      value: value,
      timestamp: Date.now() - this.startTime
    })
  }
  
  // 测量执行时间
  async measure<T>(name: string, fn: () => Promise<T>): Promise<T> {
    const start = Date.now()
    const result = await fn()
    const duration = Date.now() - start
    
    this.recordMetric(name, duration)
    console.info(`⏱️ ${name}: ${duration}ms`)
    
    return result
  }
  
  // 生成性能报告
  generateReport(): string {
    const lines: string[] = ['性能监控报告：']
    
    this.metrics.forEach((metric, name) => {
      lines.push(`  ${name}: ${metric.value} (${metric.timestamp}ms时)`)
    })
    
    return lines.join('\n')
  }
}

// 使用示例
const monitor = new PerformanceMonitor()

// 测量数据库查询
await monitor.measure('数据库查询', async () => {
  return await this.diaryApi.queryAllRecords()
})

// 测量渲染时间
await monitor.measure('渲染日记列表', async () => {
  this.loadDiaryListData()
})

// 输出报告
console.info(monitor.generateReport())

📚 性能优化检查清单

✅ 启动性能

• 延迟非关键初始化
• 并行执行初始化任务
• WebView预加载
• 减少首屏数据量
• 优化资源加载顺序

✅ 运行时性能

• 使用虚拟滚动（LazyForEach）
• 搜索防抖
• 内容截断
• 分页加载
• 避免不必要的重渲染

✅ 内存管理

• 及时释放PixelMap
• 清理WebView资源
• 使用对象池
• 避免内存泄漏
• 定期检查内存占用

✅ 动画性能

• 使用animateTo批量动画
• 避免复杂动画
• 控制动画时长
• 监控帧率
• 优化动画曲线

✅ 功耗优化

• 避免轮询
• 使用事件驱动
• 减少CPU密集操作
• 优化GPU渲染
• 及时停止后台任务

🎓 总结

通过系统性的性能优化，我们的日记应用实现了：

✅ 启动快速：冷启动600ms，热启动200ms

✅ 运行流畅：60FPS稳定帧率

✅ 内存优化：内存占用<50MB

✅ 响应灵敏：操作响应<50ms

✅ 功耗降低：整体功耗降低20%