5000字，总结App加载设计

文/一点优秀

废话不多说，直接上本文的大纲图：

一、认识加载

1.1 什么是加载

用户在客户端发出一个指令后，直到客户端出现反馈结果时，这段时间内计算机完成的一系列执行动作，可能包括有客户端发出请求，服务器做出响应，客户端拿到数据后计算，渲染等，当我们点击应用图标后，软件需要将文件或者数据从Rom读取到Ram，这也是一个加载过程。

1.2 加载有什么用

加载是电脑接收到用户的指令然后实现用户的目标所必须经历的一个过程，如果没有加载的话，计算机就无法实现用户的目标。

1.3 加载带来的问题

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

二、如何解决加载带来的问题

第一步：梳理App中有哪些加载场景

要针对App内的加载场景带来的问题进行设计，首先肯定是先罗列出我们的App中有哪些加载场景，然后针对不同的加载场景选取对应的方法进行设计。

下面罗列了在不同App中经常出现的一些加载场景，其实在我们自己设计的App中大部分加载场景也就是这些，当然不同的App情况也不完全一样，还是需要我们针对不同的App去梳理的。那么我们如何梳理呢？将那些发出指令后应用需要长时间处理的加载过程都罗列出来，简单说就是把那些慢的地方都找出来。

常见的加载场景：

1. 应用启动

2. 登录注册

3. 上传，下载

4. 加载大量图片文字的情况，图片列表等

5. 下拉刷新

6. 上拉加载数据

7. 点赞

8. 进入新页面

9. 手机付款

第二步：采取对应的解决办法

梳理完了App中的加载场景后，接下来我们针对不同的加载场景采取对应的解决办法即可，这里为什么是对应的解决办法呢？因为接下来要讲的解决办法也不是你想怎么用就怎么用的，我们要根据情况来选择

第一个办法：选用加载策略

下面是一些常见的加载策略，我们可以针对不同的加载场景，选用合适的加载策略。

1、分步加载：

优先加载占网络资源较小的元素。如先文字和默认图标后图片，图片加载完成前使用占位符显示。

２、懒加载（又称为延迟加载）

在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src=”xxx”>的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量，不仅浪费了流量，速度也很慢。

但是，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。