首页是用户打开 App 的第一屏,优化渲染可以提升启动速度、流畅度和用户体验。
首页渲染的关键问题
- 首屏白屏时间长:启动后首页加载过慢,导致用户等待。
- 卡顿掉帧(FPS 下降):首页 UI 复杂,渲染耗时过长,导致卡顿。
- 数据加载慢:首页 API 请求过多或过大,导致页面迟迟不能渲染。
- 图片加载慢:未优化图片加载策略,导致首页渲染卡顿。
- 主线程阻塞:大量任务在主线程执行,阻塞 UI 渲染。
优化方案
启动时提前加载必要数据
在 App 启动时,可以提前异步加载首页数据,减少首页打开后的网络请求时间。
方案:在 didFinishLaunchingWithOptions
预加载数据
作用:App 启动时并行拉取数据,减少首页首屏 API 请求时间。
减少视图层级
避免过度嵌套
方案:使用UICollectionView或UITableView
作用:方便管理,同时可以对屏幕外的数据和UI进行预加载
提升GPU效率
避免设置圆角导致离屏渲染
方案:使用 UIGraphicsContext 绘制圆觉效果
图片加载优化
参考:https://www.cnblogs.com/diyigechengxu/p/18702235
数据预加载和分页
方案:结合UICollectionView或UITableView,非屏幕内的延迟调用请求和UI刷新,数据解析异步处理
网络请求优化
参考: https://www.cnblogs.com/diyigechengxu/p/18699849
动态高度
方案:预设高度,并动态计算高度,自动撑开
响应式编程
使用Combine高效更新UI,避免全局刷新
XCode 工具分析
Time profile分析耗时方法
Core Animation Color Offscreen-Rendered 检测离屏渲染, Color Blended Layers 检测图层混合
观察CPU占用
CADisplayLink 监控fps帧率
A/B测试:
部分优化采用远程开关控制,做到可回滚,可监控