开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情
🎈大家好，我是
李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~
初始渲染缓存工作原理
小程序页面的初始化分为两个部分。
- 逻辑层初始化：加载必需的小程序代码、初始化页面 this 对象（以及涉及到的所有自定义组件的 this 对象）、将相关数据发送给视图层。
- 视图层初始化：载入必需的小程序代码，等待逻辑层初始化完毕并接收逻辑层发送的数据，渲染页面。
在小程序冷启动、进入第一个页面时，逻辑层初始化的时间较长。在页面初始化过程中，用户将看到小程序的标准载入画面。
这时候启用初始渲染缓存，可以使视图层不必等待逻辑层初始化完毕，而直接提前将页面初始 data 的渲染结果展示给用户，这样可以减少用户的等待时间。
- 在小程序页面第一次被打开后，将页面初始数据渲染结果记录下来，写入一个持久化的缓存区域；
- 在这个页面被第二次打开时，检查缓存中是否还存有这个页面上一次初始数据的渲染结果，如果有，就直接将渲染结果展示出来；
- 如果展示了缓存中的渲染结果，需要等到逻辑层初始化完毕后才能响应用户事件。
利用初始渲染缓存，可以预先展示一个骨架页，提升用户体验
静态初始渲染缓存
启用初始渲染缓存，在页面的 json 文件中添加配置项 "initialRenderingCache": "static"
💡代码实现
{
"initialRenderingCache": "static"
}
想要对所有页面启用的话，可以在 app.json 的 window 配置段中添加配置
💡代码实现
{
"window": {
"initialRenderingCache": "static"
}
}
这时候在手机中预览小程序首页，然后杀死小程序再次进入的时候，就会通过初始渲染缓存来渲染首页。
注意：这种情况下，初始渲染缓存的是在data中定义的变量应用在页面上的结果，不包含 setData 的结果。
📝举个栗子
有一个业务，想要在页面一进来就展示“正在加载”这几个字，就应该直接在data中声明该属性值
💡代码实现
<view wx:if="{{loading}}">正在加载</view>
Page({
data: {
loading: true
}
})
如果通过 setData 将 loading 置为 true，是没有效果的。
💡代码实现
Page({
data: {},
onLoad: function() {
this.setData({
loading: true
})
}
})
换句话说，页面初始渲染只会包含页面 data 的渲染结果，即页面的纯静态部分，不包含逻辑部分。
在初始渲染缓存中添加动态内容
只是在页面 data中定义变量来渲染初始页面，有时候有些单一，有的业务需要渲染更多的页面内容。
这时候我们可以使用“动态”初始渲染缓存的方式。
配置 "initialRenderingCache": "dynamic"
💡代码实现
{
"initialRenderingCache": "dynamic"
}
这个时候，初始渲染缓存还不会被自动启用，还需要在页面中调用 this.setInitialRenderingCache(dynamicData) 才能有效果。其中dynamicData 是要渲染的数据
📝举个栗子
Page({
data: {
loading: true
},
onReady: function() {
this.setInitialRenderingCache({
loadingHint: '正在加载' // 这一部分数据会被渲染在页面上
})
}
})
<view wx:if="{{loading}}">{{loadingHint}}</view>
总结：
在利用动态生成初始渲染缓存的方式，页面会使用动态数据重新渲染一次，开销相对较大。因此要尽量减少频繁调用 this.setInitialRenderingCache ，如果在一个页面内多次调用，只有最后一次调用生效。
注意点：
this.setInitialRenderingCache的调用时机不能早于 Page 的 onReady 或 Component 的 ready 生命周期，否则可能对性能产生影响。- 禁用初始渲染缓存，调用 this.setInitialRenderingCache(null) 。
