开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
今天学习了有关小程序页面的初始缓存知识，给大家分享一下，做一下今天的总结。
初始渲染缓存
页面初始化
首先页面初始化主要是分为小程序的逻辑层初始化和渲染层初始化两部分。
- 逻辑层初始化：在初始化页面的时候会先初始化data中的数据，初始化页面中的this对象，也会载入必需的程序代码，并将相关的数据发送给视图层。
- 视图层初始化：载入必需的小程序代码，然后等待逻辑层初始化完毕并接受逻辑层发送的数据，最后渲染页面。
- 有时候我们打开小程序可能会出现白屏的现象，这时候就可以通过初始渲染缓存来解决。如果启用了初始化渲染缓存，可以使视图层不需要等待逻辑层初始化渲染完成，而是直接将页面初始data的渲染结果展示给用户，这样的话，就大大的提前了用户可见页面的事件。
下面来介绍一下具体的初始化渲染工作原理：
- 第一次进入小程序时，小程序页面第一次被打开，将页面初始数据渲染结果记录下来，写入一个持久化的缓存区域（缓存可进行长时间保留，但由于基础库版本更新或者小程序更新都可能会造成缓存清除）
- 第二次打开该小程序页面时，会先在缓存中读取是否有缓存，有缓存直接进行页面渲染。
- 如果展示了缓存中的渲染结果，但是页面暂时还不能响应用户事件，需要等逻辑层初始化完毕后才能响应用户事件。
某个页面开启初始缓存，需要在json文件中进行如下配置
{
"initialRenderingCache": "static"
}
如果想要对所有页面启用，可以在 app.json 的 window 配置段中添加这个配置：
{
"window": {
"initialRenderingCache": "static"
}
}
<view/>组件的属性
对于该组件我觉得它就像js里的<div>标记，只不过它里面有一个小程序内置的属性，具体属性如下：
hover-class点击时组件的样式 -hover-start-time（值是number，毫秒） 点时后多长时间开始出现点击时的样式hover-stop-propagation（值是boolean） 指定是否阻止本节点的祖先节点出现点击态（也就是是否可以冒泡到父节点身上）hover-stay-time（值是number）手指松开多长时间后点击态消失
<match-media>组件
- 对于
<match-media>组件我觉得它很像js里的媒体查询，在不同的屏幕尺寸里有不同的显示。在这个组件里可以设置max-width、min-width、max-height或者min-height来设置宽高，从而显示不同的标记。 - 该组件里面可以嵌套
<view/>组件使用
可移动区域组件
- 可移动区域组件要
<movable-area>和<movable-view>组件组合起来使用。 <movable-area>里嵌套<movable-view>组件，要想实现最普通的移动效果，必须要给<movable-view>添加direction属性，默认是false，值可以为all，这样的话代表可以在<movable-area>组件区域任意的上下移动。具体的配置项还可以参考官网，在这里就不给大家一一列举了。- 以上就是我给大家分享的小程序相关知识点。我本人学的都是比较浅显的知识，有不对的地方，路过的大神可以指点一下哦！！！
