一文了解页面数据加载

　　本文作者详细的跟大家介绍了数据加载的相关知识，一起来文中看看
　　在项目进程中，遇到了一个数据加载常见的问题：前端向服务器发送资源请求，服务端在返回数据的过程中，可能会因为网络或者返回路径出错等问题，导致资源没有办法顺畅的在前端进行展示，可能会出现加载延迟或者加载失败。
　　这时为了保持较好的用户体验，需要给到前端一个加载占位图和加载失败的状态提示。在解决这些问题的过程中，对于数据加载有了更多的认识，并整理了出来。
　　一、加载的业务场景触发事件
　　（1）从后台切回前台（一定时间内）
　　若切到后台并在很短时间内切回前台（视业务需要而定），则不加载新数据，继续显示原页面和提示框；若时间间隔超过一定值，则需要追加事件刷新当前页面并加载新数据。
　　（2）启动APP
　　当异常关闭、应用闪退、进程被杀等情况出现时，点击需要重新启动APP，展示启动页或者直接加载首页。
　　（3）页面内事件触发加载：用户手动加载、系统自动加载
　　用户手动加载，一般通过下拉或者点击操作刷新页面，加载新数据；系统自动加载的方式一般为，当前内容已经展示完毕后随即加载并刷新出新的内容。
　　（4）定时数据刷新
　　一些排行榜或者限时活动，需要在特定时间进行页面刷新和数据加载。
　　（5）实时消息推送
　　IM消息采用实时推送机制，一般不需要用户手动去加载或刷新。
　　二、如何加载加载逻辑
　　（1）懒加载和预加载
　　懒加载（一般默认使用懒加载）：进入页面，再加载数据；
　　预加载（WiFi情况下考虑使用）：预加载数据，再展示页面。
　　（2）整体加载
　　加载完页面所有内容后，再展示给用户，可以保证内容的完整性，应用于一些对内容完整性有要求的页面，如购物车。若加载时间过长，需要给予用户一定反馈和提示。
　　（3）分块加载
　　可以根据资源类型等进行先后加载，比如资讯类文章优先加载文字，其后加载图片。可以保证用户最快获取内容，但是部门内容由于加载慢可能被用户忽略。
　　（4）分页加载
　　对于一些列表或者卡片信息，可以使用自动或者手动的分页加载。这样可以展示比较丰富的内容，但是也对信息的检索带来一定麻烦。
　　（5）分屏加载
　　先加载页面框架，页面滚动到哪里再加载相应内容。适用于一些数据量比较大的页面。
　　（6）智能加载
　　根据用户的网络状况选择不同的加载方案。非WiFi下，暂不加载图片和文字，用户点击确认后，才加载资源；WiFi情况下，加载所有资源。
　　（7）WiFi预先加载读取缓存
　　WiFi情况下预先加载数据，缓存到本地；在没有网络时，直接读取本地缓存。可以解决无网络时获取数据的问题，节省流量，但是会占用本地存储空间。
　　三、加载优化
　　（1）在WiFi条件下，考虑预加载
　　（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检测本地闪屏资源显示闪屏（同时进行登录状态、用户权限、闪屏业务检测）点击跳转到落地页直接进入首页。