Appearance
应用启动优化
鸿蒙应用启动优化:冷启动、热启动、首屏渲染、延迟加载。
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 秒、关键路径最小化、骨架屏、懒加载、异步初始化"。