Skip to content

应用启动优化

鸿蒙应用启动优化:冷启动、热启动、首屏渲染、延迟加载。


1. 启动类型

1.1 启动分类

类型说明优化目标
冷启动应用首次启动< 2 秒
热启动后台切换到前台< 500ms
温启动进程存活但 Activity 销毁< 1 秒

1.2 启动流程

冷启动流程:
├─ 系统创建进程 (100-200ms)
├─ Application onCreate (50-100ms)
├─ UIAbility onCreate (100-200ms)
├─ 页面加载与渲染 (200-500ms)
└─ 首屏显示 (目标 < 2 秒)

2. 启动优化策略

2.1 Application 优化

typescript
// ❌ 错误:onCreate 做大量初始化
class MyApplication extends AbilityStage {
    onCreate() {
        this.initSDK1()      // 耗时 200ms
        this.initSDK2()      // 耗时 300ms
        this.initSDK3()      // 耗时 200ms
        this.loadConfig()    // 耗时 100ms
        // 总耗时 800ms,阻塞启动
    }
}

// ✅ 正确:延迟初始化非关键 SDK
class MyApplication extends AbilityStage {
    onCreate() {
        // 只初始化关键 SDK
        this.initCriticalSDK()  // 50ms
        
        // 非关键 SDK 延迟初始化
        TaskPool.execute(() => {
            this.initSDK1()
            this.initSDK2()
        })
        
        // 或使用 idle 回调
        setTimeout(() => {
            this.initSDK3()
        }, 1000)
    }
}

2.2 UIAbility 优化

typescript
// ❌ 错误:onCreate 和 onWindowStageCreate 做耗时操作
class EntryAbility extends UIAbility {
    onCreate() {
        this.loadData()  // 网络请求,耗时 500ms
    }
    
    onWindowStageCreate(windowStage) {
        this.loadImages()  // 加载大量图片,耗时 300ms
    }
}

// ✅ 正确:异步加载,先显示骨架屏
class EntryAbility extends UIAbility {
    async onCreate() {
        // 异步加载数据
        this.loadDataAsync()
    }
    
    onWindowStageCreate(windowStage) {
        // 先加载主页面(骨架屏)
        windowStage.loadContent('pages/Index')
        
        // 数据加载完后再更新 UI
        this.dataPromise.then((data) => {
            this.updateUI(data)
        })
    }
}

3. 首屏渲染优化

3.1 骨架屏

typescript
@Entry
@Component
struct Index {
    @State loading: boolean = true
    @State data: any = null

    aboutToAppear() {
        // 异步加载数据
        this.loadData().then((result) => {
            this.data = result
            this.loading = false
        })
    }

    build() {
        if (this.loading) {
            // 骨架屏
            this.SkeletonScreen()
        } else {
            // 真实内容
            this.ContentScreen()
        }
    }

    @Builder SkeletonScreen() {
        Column() {
            // 骨架屏占位
            Row().width('100%').height(50).backgroundColor('#f0f0f0')
            Row().width('100%').height(50).backgroundColor('#f0f0f0')
            Row().width('100%').height(50).backgroundColor('#f0f0f0')
        }
    }
}

3.2 懒加载

typescript
// 组件懒加载
@Entry
@Component
struct Index {
    @State heavyComponent: boolean = false

    build() {
        Column() {
            // 首屏必要内容
            Header()
            Content()
            
            // 非首屏内容懒加载
            if (this.heavyComponent) {
                HeavyComponent()
            }
        }
    }

    aboutToAppear() {
        // 首屏渲染后再加载重型组件
        setTimeout(() => {
            this.heavyComponent = true
        }, 300)
    }
}

4. 启动监控

4.1 启动时间监控

typescript
class StartupMonitor {
    private startTime: number = 0

    start() {
        this.startTime = Date.now()
    }

    mark(stage: string) {
        let now = Date.now()
        let duration = now - this.startTime
        console.log(`启动阶段 [${stage}]: ${duration}ms`)
        
        // 上报性能数据
        this.reportPerformance(stage, duration)
    }

    private reportPerformance(stage: string, duration: number) {
        // 上报到性能监控平台
    }
}

// 使用
let monitor = new StartupMonitor()
monitor.start()

// Application onCreate
monitor.mark('application_create')

// UIAbility onCreate
monitor.mark('ability_create')

// 首屏渲染
monitor.mark('first_screen')

5. 面试高频考点

Q1: 冷启动优化策略?

回答:Application 只初始化关键 SDK、非关键任务延迟/异步执行、首屏骨架屏、数据异步加载、组件懒加载。

Q2: 如何监控启动时间?

回答:在关键节点打点(Application onCreate、UIAbility onCreate、首屏渲染),计算耗时并上报。


🐱 小猫提示:启动优化记住 "冷启动<2 秒、关键路径最小化、骨架屏、懒加载、异步初始化"