微信小程序开发初始渲染缓存-加速度jsudo

微信小程序开发初始渲染缓存

来源：加速度jsudo

作者

访问量 6301

本文摘要

微信小程序：如何利用初始渲染缓存提升用户体验？在小程序中，启动页面时逻辑层初始化的时间较长，这会使得用户看到冷启动画面或白屏现象，影响体验。为了缓解这个问题，我们可以使用初始渲染缓存来提高页面加载速度。 1. 初始渲染缓存工作原理小程序页面的初始化分为两个部分，逻辑层初始化和视图层初始化。启用初始渲染缓存可以使得页面对用户可见的时间大大提前，其工作原理包括

微信小程序：如何利用初始渲染缓存提升用户体验？

在小程序中，启动页面时逻辑层初始化的时间较长，这会使得用户看到冷启动画面或白屏现象，影响体验。为了缓解这个问题，我们可以使用初始渲染缓存来提高页面加载速度。

1. 初始渲染缓存工作原理

小程序页面的初始化分为两个部分，逻辑层初始化和视图层初始化。启用初始渲染缓存可以使得页面对用户可见的时间大大提前，其工作原理包括：

在第一个打开页面时，将页面初始数据渲染结果记录下来，写入一个持久化的缓存区域；
在这个页面被第二次打开时，直接将渲染结果展示出来，不需要等待逻辑层初始化完毕；
如果展示了缓存中的渲染结果，这个页面暂时还不能响应用户事件，等到逻辑层初始化完毕后才能响应用户事件。

2. 支持的组件

在初始渲染缓存阶段中，复杂组件不能被展示或不能响应交互。目前支持的内置组件包括：、、、、、，自定义组件本身可以被展示。

3. 静态初始渲染缓存

若想启用静态初始渲染缓存，最简单的方法是在页面的 json 文件中添加配置项 "initialRenderingCache": "static"，或者在 app.json 的 window 配置段中添加这个配置。此种情况下，缓存记录的是页面 data 应用在页面 WXML 上的结果，不包含任何 setData 的结果。想要在初始渲染缓存中添加动态内容，则需要使用“动态”初始渲染缓存的方式。

4. 动态初始渲染缓存

与静态缓存不同的是，在动态生成初始渲染缓存的方式下，页面会在后台使用动态数据重新渲染一次，因而开销较大。因而要尽量避免频繁调用 this.setInitialRenderingCache()，如果在一个页面内多次调用，仅最后一次调用生效。调用时机不能早于 Page 的 onReady 或 Component 的 ready 生命周期，否则可能对性能有负面影响。如果想禁用初始渲染缓存，则需要调用 this.setInitialRenderingCache(null)。