app开发者平台在数字化时代的重要性与发展趋势解析
428
2024-06-29
小程序页面的初始化分为两个部分。
逻辑层初始化:载入必需的小程序代码、初始化页面 this 对象(也包括它涉及到的所有自定义组件的 this 对象)、将相关数据发送给视图层。
视图层初始化:载入必需的小程序代码,然后等待逻辑层初始化完毕并接收逻辑层发送的数据,最后渲染页面。
在启动页面时,尤其是小程序冷启动、进入第一个页面时,逻辑层初始化的时间较长。在页面初始化过程中,用户将看到小程序的标准载入画面(冷启动时)或可能看到轻微的白屏现象(页面跳转过程中)。
启用初始渲染缓存,可以使视图层不需要等待逻辑层初始化完毕,而直接提前将页面初始 data 的渲染结果展示给用户,这可以使得页面对用户可见的时间大大提前。它的工作原理如下:
在小程序页面第一次被打开后,将页面初始数据渲染结果记录下来,写入一个持久化的缓存区域(缓存可长时间保留,但可能因为小程序更新、基础库更新、储存空间回收等原因被清除);
在这个页面被第二次打开时,检查缓存中是否还存有这个页面上一次初始数据的渲染结果,如果有,就直接将渲染结果展示出来;
如果展示了缓存中的渲染结果,这个页面暂时还不能响应用户事件,等到逻辑层初始化完毕后才能响应用户事件。
利用初始渲染缓存,可以:
快速展示出页面中永远不会变的部分,如导航栏;
预先展示一个骨架页,提升用户体验;
展示自定义的加载提示;
在初始渲染缓存阶段中,复杂组件不能被展示或不能响应交互。
目前支持的内置组件:
<view />
<text />
<button />
<image />
<scroll-view />
<rich-text />
自定义组件本身可以被展示(但它们里面用到的内置组件也遵循上述限制)。
若想启用初始渲染缓存,最简单的方法是在页面的json
文件中添加配置项 "initialRenderingCache": "static"
:
{ "initialRenderingCache": "static"} 已复制代码
如果想要对所有页面启用,可以在app.json
的window
配置段中添加这个配置:
{ "window": { "initialRenderingCache": "static" }} 已复制代码
添加这个配置项之后,在手机中预览小程序首页,然后杀死小程序再次进入,就会通过初始渲染缓存来渲染首页。
请注意
这种情况下,初始渲染缓存记录的是页面data
应用在页面FXML
上的结果,不包含任何setData
的结果。
例如,如果想要在页面中展示出“正在加载”几个字,这几个字受到loading
数据字段控制:
<view wx:if="{{loading}}">正在加载</view> 已复制代码
这种情况下,loading
应当在data
中指定为true
,如:
// 正确的做法Page({ data: { loading: true }}) 已复制代码
而不能通过setData
将loading
置为true
:
// 错误的做法!不要这么做!Page({ data: {}, onLoad: function() { this.setData({ loading: true }) }}) 已复制代码
换而言之,这种做法只包含页面data
的渲染结果,即页面的纯静态成分。
有些场景中,只是页面data
的渲染结果会比较局限。有时会想要额外展示一些可变的内容,如展示的广告图片 URL 等。
这种情况下可以使用“动态”初始渲染缓存的方式。首先,配置"initialRenderingCache": "dynamic"
:
{ "initialRenderingCache": "dynamic"} 已复制代码
此时,初始渲染缓存不会被自动启用,还需要在页面中调用this.setInitialRenderingCache(dynamicData)
才能启用。其中,dynamicData
是一组数据,与data
一起参与页面 FXML 渲染。
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)
。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~