网页设计里的加载与缓存机制

缓存机制：

缓存可以分为临时缓存和固定缓存，固定缓存按照存储方式又可以分为可手动清除缓存和不可手动清除缓存

1、临时缓存：

临时缓存常用于一个功能模块内，缓存各栏目下的内容，切换栏目时不需要重新刷新数据，为用户提供了无缝浏览的体验。

临时缓存多用于数据在短时间内很少更新的情况下，比如大多数资讯产品的频道内容都采用临时缓存。

临时缓存的清理机制有两种，一种是退出该功能模块即清理，下次进来重新刷新；另一种是设置缓存时效，缓存失效后重新刷新数据。

2、固定缓存：

固定缓存用于缓存经常重复使用的数据，其中可清除缓存是指在产品内有一个清除缓存的功能，一键清除释放空间；不可清除缓存一般是为了减小安装包的大小，在第一次加载的时候缓存到本地，只有在卸载的时候随安装包一起清除。

无论是哪种缓存，一般都会有一个容量上限，缓存数据超过上限之后，新的数据会挤出旧的数据，保证缓存不至于太大。

加载机制：

加载机制可分为整页加载，分块加载，预加载，自动加载，智能加载和离线加载。

1、整页加载：

顾名思义就是一次性加载完整页的内容，适用于页面内容比较单一的情况下，比如页面全是文本，全屏图片模式等。

2、分块加载：

也有人叫优先加载，其实就是把页面内容分成几块分别加载，让用户逐步看到内容，缓解用户等待的焦虑心理。

模块间有关联的，比如父子关系的，先加载父模块，再加载子模块；

模块没有关联的，各模块独自加载，根据请求速度不同分别显示；

有固定框架的，先加载框架，再加载内容；

分块加载尤其要注意的是失败状态的处理，重要内容提示加载失败，点击重试，次要内容展示失败默认状态。比如资讯文章页面，一般文字，图片和评论是分块加载的，先加载文字，再加载评论和图片，文字和评论失败的分别有失败提示，图片加载失败一般就是显示默认的图片了。

3、预加载：

预加载就是提前加载，预测用户的下一步行为，为用户提前加载好内容。预加载提供了无缝的产品体验，避免了加载带来的被打断的感觉，缺点是可能带来流量的大量消耗和浪费。

比如在浏览图集的时候，在看上一张的时候，就把下一张甚至后面几张都加载好了。

4、自动加载：

自动加载适用于列表，比如滚动到第20条的时候，自动再加载20条，给人无限浏览的感觉。有的设计是需要点击加载更多，本质上是一样的，都是对列表进行分页展示。

5、智能加载：

智能加载就是根据网络环境自动切换加载模式，比如wifi环境下展示大图模式，非wifi环境下展示成小图模式或者无图模式。

6、离线加载：

离线加载其实是预加载+离线缓存的结合，一般是在wifi环境下预加载出来，缓存到本地，在没网的情况下直接加载缓存的内容，避免了在公交地铁网络差的情况下看不到内容的尴尬。