一文了解页面数据加载
本文作者详细的跟大家介绍了数据加载的相关知识，一起来文中看看~
在项目进程中，遇到了一个数据加载常见的问题：前端向服务器发送资源请求，服务端在返回数据的过程中，可能会因为网络或者返回路径出错等问题，导致资源没有办法顺畅的在前端进行展示，可能会出现加载延迟或者加载失败。
这时为了保持较好的用户体验，需要给到前端一个加载占位图和加载失败的状态提示。在解决这些问题的过程中，对于数据加载有了更多的认识，并整理了出来。
一、加载的业务场景/触发事件
（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 。
关键字：数据加载
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！