🌱小程序初始渲染缓存

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

静态初始渲染缓存

启用初始渲染缓存，在页面的 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 是一组数据，和 data 一起参与页面 WXML 渲染。

🏷️举个栗子：

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: '正在加载' // 这一部分数据将被应用于界面上，相当于在初始 data 基础上额外进行一次 setData
    })
  }
})

<view wx:if="{{loading}}">{{loadingHint}}</view>

从原理上说，在动态生成初始渲染缓存的方式下，页面会在后台使用动态数据重新渲染一次，因而开销相对较大。所以要尽量避免频繁调用 this.setInitialRenderingCache ，如果在一个页面内多次调用，只有最后一次调用生效。

注意点：

• this.setInitialRenderingCache 调用时机不能早于 Page 的 onReady 或 Component 的 ready 生命周期，否则可能对性能产生影响。
• 如果想禁用初始渲染缓存，调用 this.setInitialRenderingCache(null) 。