页面数据加载全解析

本文作者详细的跟大家介绍了数据加载的相关知识，一起来文中看看~

在项目进程中，遇到了一个数据加载常见的问题：前端向服务器发送资源请求，服务端在返回数据的过程中，可能会因为网络或者返回路径出错等问题，导致资源没有办法顺畅的在前端进行展示，可能会出现加载延迟或者加载失败。

这时为了保持较好的用户体验，需要给到前端一个加载占位图和加载失败的状态提示。在解决这些问题的过程中，对于数据加载有了更多的认识，并整理了出来。

一、加载的业务场景/触发事件

（1）从后台切回前台（一定时间内）

若切到后台并在很短时间内切回前台（视业务需要而定），则不加载新数据，继续显示原页面和提示框；若时间间隔超过一定值，则需要追加事件刷新当前页面并加载新数据。

（2）启动APP

当异常关闭、应用闪退、进程被杀等情况出现时，点击需要重新启动APP，展示启动页或者直接加载首页。

（3）页面内事件触发加载：用户手动加载、系统自动加载

用户手动加载，一般通过下拉或者点击操作刷新页面，加载新数据；系统自动加载的方式一般为，当前内容已经展示完毕后随即加载并刷新出新的内容。

（4）定时数据刷新

一些排行榜或者限时活动，需要在特定时间进行页面刷新和数据加载。

（5）实时消息推送

IM消息采用实时推送机制，一般不需要用户手动去加载或刷新。

二、如何加载/加载逻辑

（1）懒加载和预加载

• 懒加载（一般默认使用懒加载）：进入页面，再加载数据；
• 预加载（Wi-Fi情况下考虑使用）：预加载数据，再展示页面。

（2）整体加载

加载完页面所有内容后，再展示给用户，可以保证内容的完整性，应用于一些对内容完整性有要求的页面，如购物车。若加载时间过长，需要给予用户一定反馈和提示。

（3）分块加载

可以根据资源类型等进行先后加载，比如资讯类文章优先加载文字，其后加载图片。可以保证用户最快获取内容，但是部门内容由于加载慢可能被用户忽略。

（4）分页加载

对于一些列表或者卡片信息，可以使用自动或者手动的分页加载。这样可以展示比较丰富的内容，但是也对信息的检索带来一定麻烦。

（5）分屏加载

先加载页面框架，页面滚动到哪里再加载相应内容。适用于一些数据量比较大的页面。

（6）智能加载

根据用户的网络状况选择不同的加载方案。非Wi-Fi下，暂不加载图片和文字，用户点击确认后，才加载资源；Wi-Fi情况下，加载所有资源。

（7）Wi-Fi预先加载+读取缓存

Wi-Fi情况下预先加载数据，缓存到本地；在没有网络时，直接读取本地缓存。可以解决无网络时获取数据的问题，节省流量，但是会占用本地存储空间。

三、加载优化

（1）在Wi-Fi条件下，考虑预加载

（2）异步处理

例如：支付宝弱网情况下的扣费处理（客户端告知用户扣费成功并将用户扣费行为记录下来，等待网络环境变好之后再上报服务器并进行扣费操作）。

（3）使用缓存

需要注意存储的数据类型、更新规则、是否要清除缓存、清除规则、用户是否可以手动清除。

四、加载的业务流程设计

（1）主流程

触发事件——（加载逻辑）——页面刷新规则（加载多少数据、展示规则）——刷新出新内容——用户提示文案。

（2）分支流程

没有更多新内容、空页面、页面被删除、页面被限制。

（3）异常流程

网络连接失败、刷新操作过于频繁、网络状态切换、弱网、 服务器崩溃。

五、加载的功能流程设计

（1）功能

下拉刷新、点击刷新、系统自动刷新、重新加载按钮。

（2）加载状态展示

网络情况不佳是否有加载占位图、加载进度条（先慢后快）、加载动画、加载成功与失败提示。

六、加载占位图

（1）原理

通过css控制，可以实现加载网络图片时，未加载完成的时候显示本地一张占位图，加载完成后显示网络图片。

（2）设计原则

a. 加载品牌元素或其他元素（提示可能展现的内容）

优点：给予用户预期，提升品牌感知；缺点：需要适配

b. 加载色块：通过读取图片颜色或默认颜色来占位

优点：适配方便，需提供色库，画面不枯燥；缺点：需要调节颜色

c. 加载布局：简单，但是视觉效果有时不够好

d. 加载默认灰色图

e. 使用高斯模糊：效果炫酷；但是有一定功耗，加载慢

七、启动页/闪屏

（1）使用场景

在点击启动APP图标，到APP首页的出现，是存在一个时间，这个时间的长短取决于设备的性能和网络环境，从几百毫秒到几秒不等。在这段空白时间，为了不让用户感到困惑或因为等待而产生焦虑。

iOS的设计规范规定，要在启动APP时，设计一个启动页，来填补这段用户等待的时间。由于APP启动的过程很短，从几百毫秒到几秒不等，所以启动页也被称为闪屏。

但是，现在的启动页不仅仅应用于这一场景。许多启动页还担负了广告展示、H5活动展示、APP跳转等功能。

（2）设计原则

• 快速启动类：和首屏页面类似，最大程度减少割裂感
• 品牌类：提现品牌logo、名称、slogan等元素
• 情感共鸣：弱化品牌元素，增进情感设计
• 广告类：启动页展示广告位，流量变现。一般是先显示品牌页，再显示广告页，用户可以选择跳过
• 节日类：为特定节日量身制作启动页，给用户新鲜感、亲切感
• 其他：例如成为H5页面、其他APP入口等

（3）业务流程

启动APP——检测本地闪屏资源——-显示闪屏（同时进行登录状态、用户权限、闪屏业务检测）——点击跳转到落地页/直接进入首页。

本文由 @lemon 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议