APP常见加载方式

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了APP常见加载方式相关的知识，希望对你有一定的参考价值。

参考技术A 本文仅供个人学习，转自IT修真院。

一、加载

用户在客户端发出一个指令后，直到客户端出现反馈结果时，这段时间内计算机完成的一系列执行动作，可能包括有客户端发出请求，服务器做出响应，客户端拿到数据后计算，渲染等。

二、加载方式

1、启动页加载

这个主要是APP启动时的一个页面，由于APP启动需要时间，因此可以加入一个启动页来自然过渡，而且很多启动页是广告，这样也可以带来一些收益，这个页面一般可以点击跳过。

2、界面跳转加载

这个加载模式又可分为当前页加载和跳转下个页面加载。当前页加载一般是帐号登录的时候使用的，跳转页面加载一般用于新闻类APP，点击新闻标题后跳转至内容页面。

3、白屏加载

这个加载方式其实很多地方都用到了，只是平常没有刻意关注它，在使用QQ或者微信时，如果别人发了一个链接过来，然后去点击链接，当时周围的网络信号又不太好的话，就会看到这种加载模式的完整过程。一般顶部会有进度条，出结果就是整个页面加载出来，加载失败的话则页面为空。

4、分步加载

顾名思义，就是分步骤的加载网页，优先加载占网络资源较小的元素。如先文字和默认图标后图片，图片加载完成前使用占位符显示；当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。这个方式可以减少用户等待内容时间，即使网络不太好，也可以先把文字等数据量较小的先显示出来，可以让用户提前看到一些内容。

类似的还有懒加载与预先加载，都可以算作是分步加载。

懒加载主要是针对前端页面比较大而设计出来的一种方式，假如一个网页很大，又含有很多图片、视频内容，那么想一次性加载就会等待很久，懒加载就是只有在屏幕显示范围内的资源，被用户看到的内容才会真正去加载。

预加载就是提前加载，比如启动APP时，当显示启动画面时，就可以预先把首页内容加载出来，这样可以减少用户加载内容时的等待时间，还有一个很典型的使用场景就是浏览视频网站或者购物网站，当我们快要滑到页面底部时，下面图片已经几乎加载完成了，这就是预加载的好处，在使用上感觉更加流畅。

5、智能加载

这个加载模式我经常使用到，假如是在WIFI情况下，使用QQ浏览器去看视频，那么它会自动加载视频播放，而使用4G的流量去访问视频页面的话，会有一个弹窗来确认是否要播放，以免耗费大量流量造成用户扣费。智能加载模式就是根据用户使用场景来改变加载形式的。

6、缓存加载

就是用户在没有网络的情况下，依靠缓存数据来加载内容，可以在断网的情况下显示数据，不会因为断网APP就啥也不显示了。而且由于有缓存数据，还可以提高正常模式下的加载速度，缺点就是会占用用户本地存储空间，设计时需要考虑好限制条件。

7、全页面加载

将整个页面一起加载。这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

8、占位色块加载

在页面即将出现的位置加载占位色块，等到数据加载完成后将数据陆续填进色块（给用户加载很快的感觉，体验会比全页面加载流畅）。让等待时间变得更加有趣，保持用户感受的连续性。

9、进度条加载

可以清楚的看到当前进度，反馈十分明确。反馈明确，清晰易懂缺点：页面无内容，美观度较低。

10、混合加载模式

为了能让产品有一个流畅的体验，很多app会根据产品的各种不同场景来组合使用不同加载方式。根据不同场景来设计，体验升级缺点：需要对各场景制定对应的加载规范，保证交互一致性。

11、后台加载

用户在操作后，客户端立刻反馈操作成功，然后把请求放到后台与服务器交互。这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

12、渐进加载

在 PC 端用浏览器看图片的时候，经常是先看到一张模糊图，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。

三、加载遇到的问题

有些加载过程的时间可能会比较长，甚至用户不知道此时应用是卡死了还是在执行命令，这样就会导致用户体验降低，用户会对应用失去耐心。

原文链接：https://blog.csdn.net/jnshu_it/article/details/89282461