加载定义

用户在客户端界面上进行操作，客户端将操作请求内容发送到服务器，服务器处理请求，然后返回数据给客户端，最后显示给用户的过程。这一过程称之为加载。区别于缓存，缓存是主动的，加载为被动的。

全屏加载

定义：直接一次性加载完页面所有数据后再显示内容，加载过程配合有明确进度标识的加载loading动画。

*优点*

能够保证内容的整体性，常用于网页加载中(因为网页没有本地资源，每次访问都需要向服务器发送请求)。

*缺点*

受限于网络情况，在信号不好的地方使用网页获取内容实在是比较灾难的一件事情。有非常强烈的等待感。因为超过3s以上人们就会产生焦躁情绪。

*使用场景*

常见的是从上一级界面进入下一级界面；或者H5中常使用。

分步加载

定义：当页面有文字和图片或视频时，这个时候先加载文字出来，图片或视频在加载过程中使用占位符，直到图片或视频加载成功的过程。当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。

*优点*

1. 没有固定框架时，可以让用户先知道界面的大体内容；

2. 有固定框架时，可通过先加载页面框架和文字，设计占位符等形式可以提前让用户知道整个界面的架构，同时为加载比较慢的图片和视频内容赢得时间，提高产品的体验感。

*缺点*

1. 如果网络状态不好，长时间没有显示内容，用户会感觉产品开发的有问题；

2. 访问开始瞬间会没有重要的信息内容，无法建立获取信息内容的闭环；

*使用场景*

适用于多图片或视频布局的界面。

预加载

定义：预先告知服务器某些资源可能在将来会被使用到，将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

*优点*

用户进入下一级页面时无需加载过程，直接查看内容即可，用户使用时非常流畅；

*缺点*

1. 在非WiFi情况下，会使用更多用户流量；

2. 由于缓存会占用用户手机更多的存储空间；

3. 服务器负担重；

*使用场景*

信息需要即时刷新，同时预加载后消耗流量较少的场景，例如IM、短信、邮件等以文字为主的内容，有富文本的内容就视情况而定了。

智能加载

定义：根据用户设备的网络情况，加载不同质量的内容。例如在WiFi情况下，可以加载高清图片、高清图标，甚至可以直接播放视频内容，但是如果用户处于非WiFi的模式下，则可以考虑差异化的处理成标清图片或无图模式，视频内容让用户自己选择播放的智能加载方式。

*优点*

充分发挥智能特性，根据具体场景来控制流量和加载速度。

*缺点*

采用的方式并不一定是用户想要的(可能产品需要支持自定义智能加载模式，例如头条、网易新闻等)；

*使用场景*

适用于有大量图片或视频的APP，例如电商或视频类APP。

下拉加载

定义：用户下拉页面内容时，页面顶部出现loading动画，对整个页面的内容重新加载的过程。

*优点*

1. 易于用户理解当前页面内容在刷新，获取新数据；

2. 转移用户注意力，减少用户的等待感；

3. 还可以做品牌文化输出；

*缺点*

在刷新使用频繁的应用中会增加服务器的负担；

*使用场景*

适合页面内容为推荐类或信息流的产品；

上拉加载

定义：用户在浏览页面的时，对于未加载的信息，上拉后自动加载的过程。

*优点*

可以将用户代入无尽浏览模式，一直向下滚动浏览内容，让用户产生畅快感。

*缺点*

没有尽头，容易使用户迷失；

不方便快速索引定位到某个内容。

*使用场景*

适用于瀑布流、长列表等情况。

离线加载

定义：在用户设备有网的情况下，使用离线加载预先加载好需要的内容的加载方式。(即使遇到网络不好或没有网络的情况也是可以浏览之前加载好的内容)

*优点*

解决了没网获取数据的问题，保证了流畅。

*缺点*

1. 需要额外占用本地存储空间；

2. 有时候离线的内容不见得能用上；

*使用场景*

适合阅读类产品，例如：学习、小说、新闻、视频类产品等。

懒加载

定义：在长页面中延迟加载可视区域外的图像的加载方式，也就是用户在滚动到它们之前不会加载，懒加载也可称之为延迟加载。

*优点*

1. 可使页面加载速度更快；

2. 可以减轻服务器的压力、节约流量的同时提升用户体验；

*缺点*

不利于提前发现错误。

*使用场景*

适合网页较多的产品，例如：电商、信息服务类产品等。

Powered by Froala Editor