# 首屏渲染优化

页面首屏渲染的优化,目的是让「首页渲染完成」(Page.onReady) 尽可能提前。但很多情况下「首页渲染完成」可能还是空白页面,因此更重要的是让用户能够更早的看到页面内容(First Paint 或 First Contentful Paint)。

# 1. 使用「按需注入」和「用时注入

除了优化代码注入的耗时外,「按需注入」和「用时注入」也可以减少需要初始化的组件数量,降低实际页面渲染的耗时,使「首页渲染完成」提前。

启用「按需注入」之后,部分组件代码注入会被延迟到首页渲染阶段执行,导致阶段耗时上涨,但总耗时一般会下降。

# 2. 启用「初始渲染缓存

自基础库版本 2.11.1 起,小程序支持启用初始渲染缓存。开启后,可以在非首次启动时,使视图层不需要等待逻辑层初始化完毕,而直接提前将页面渲染结果展示给用户,这可以使「首页渲染完成」和页面对用户可见的时间大大提前。

# 3. 避免引用未使用的自定义组件

在页面渲染时,会初始化在当前页面配置和全局配置通过 usingComponents 引用的自定义组件,以及组件所依赖的其他自定义组件。未使用的自定义组件会影响渲染耗时。

当组件不被使用时,应及时从 usingComponents 中移除。

# 4. 精简首屏数据

首页渲染的耗时与页面的复杂程度正相关。对于复杂页面,可以选择进行渐进式的渲染,根据页面内容优先级,优先展示页面的关键部分,对于非关键部分或者不可见的部分可以延迟更新。

此外,与视图层渲染无关的数据应尽量不要放在 data 中,避免影响页面渲染时间。

# 6. 缓存请求数据

小程序提供了wx.setStoragewx.getStorage等读写本地缓存的能力,数据存储在本地,返回的会比网络请求快。如果开发者基于某些原因无法采用数据预拉取与周期性更新,我们推荐优先从缓存中获取数据来渲染视图,等待网络请求返回后进行更新。

# 7. 骨架屏

骨架屏通常用于在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。

建议开发者在页面数据未准备好时(例如需要通过网络获取),尽量避免展示空白页面,而是先通过骨架屏展示页面的大致结构,请求数据返回后再进行页面更新。以提升用户的等待意愿。

开发者工具提供了生成骨架屏的能力,帮助开发者更便捷的维护骨架屏。