写点什么

移动端 H5 页面懒加载优化

2019 年 9 月 20 日

移动端 H5 页面懒加载优化

当一个页面需要展示的数据量较大时,为了使用户获得最佳使用体验,我们常选择分页的方式进行展示数据,减少单次显示数据来降低服务器响应时间以及页面渲染时间,从而降低页面首屏时间。


PC 端常见两种交互方式,通过分页控件的方式,用户点击下一页或指定页数进行跳转,另一种是通过懒加载的方式,通过监听页面滚动,在页面内容快展示完时请求下一页的数据并 append 到页面中。


而在移动端,我们更想让用户无感知地浏览到页面最后一页,保证了信息阅读的连续、流畅,既然这样,滚动懒加载的方式处理分页就成了不二之选。


备注:默认引入 jQuery/zepto


监听滚动

页面中,在文档底部到视窗底部的距离低于某个阈值时,触发下一页数据请求,我们这里设置距离低于 200px 时,触发请求。


function load() {
console.log('loading'); }
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); var scrollHeight = $(document).height(); var distance = scrollHeight - scrollTop - windowHeight; if(distance < 200 ){ load(); } });
复制代码



现在已经完成了最基本的功能需求,但因为绑定的 scroll 事件,页面滚动时就会触发,因此,内容底部和视窗底部的距离小于 200px 时,页面继续滚动,loading 会被继续触发,这就丧失了分页的意义,所以在这里需要对加载的触发进行稀释。


事件稀释

我们设定一次请求触发后,需保持 60ms 安静,即这 60ms 不会出现二次触发请求事件,以保证这是一次稳定的请求触发。假设第一次触发的 60ms 内被被第二次触发,第一次作废,从第二次重新开始计时 60ms。


    $(window).scroll(function(){            if (timeoutId) {                    clearTimeout(timeoutId);                    }                timeoutId = setTimeout(function() {                    // var scrollTop = $(this).scrollTop();
var scrollTop = $(window).scrollTop; var windowHeight = $(window).height(); var scrollHeight = $(document).height(); var distance = scrollHeight - scrollTop - windowHeight; if(distance < 200 ){ lazyLoad(); } }, 60) });
复制代码



稀释后,触发条件间接变成在页面滚动停止时,发出数据请求。但一个新问题出现,如果请求返回稍慢,用户等不及,一直在页面底部摩擦摩擦,导致请求被多次发出,并且异步请求返回的顺序可能打乱原有数据顺序,第 2、3 页请求发出去,返回的数据顺序可能先是第 3 页再是第 2 页,这时候就该给请求加把锁。



事件锁

var loading = false;
function append() { console.log('append element to document'); }
function load() {
loading = true; $.ajax({ url: 'api.xxx.com'
}).done(function(res) { append(); loading = false; }) }
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); var scrollHeight = $(document).height(); var distance = scrollHeight - scrollTop - windowHeight; if(distance < 200 && !loading ){ load(); } });
复制代码


通过给请求添加 loading 状态,同一时间只允许一个请求执行,当已存在未返回请求时,新的请求不会被触发。



UI 优化

作为开发者,我们清楚知道触发数据加载的过程,清楚触发的时机以及请求的过程,但用户看到的只是页面拉到了底部(请求还没响应),用户以为已经显示全部数据了,实际只是分页数据还没加载出来,等页面真正看完全部数据,用户却可能认为还会有下一页,不断上拉页面,试图拉出隐藏于某处的一些数据。


一个用户体验优秀的前端页面,应该具有准确传递信息的能力,这些功能实现成本很低,但可以带来更好的用户体验。


所以,在数据加载时,在页面底部添加一个加载的 GIF 动画,缓解用户的焦虑,“放轻松,系统正全力加载中~”,数据加载到最后一页时,用户还准备上拉加载时,发现加载 GIF 被 “到底了~” 文案取代。



容错处理

程序不可能 100% 依照我们编写的逻辑运行,上面介绍的内容都是在数据正常返回的情况下,如遇到接口异常时,请求没有拿到想要的数据,请求已经返回错误,通过在将加载动画替换为重新加载的点击按钮,通过用户点击触发二次请求。


scroll 兼容问题

scroll 目前仍存在兼容问题,视 webview 而定,iOS 7 及之前在 scroll 时会暂停 CSS3 animation 和 javascript 运行,但一些 APP 内定制的 webview 仍会存在这样的问题,所以,在实现相同需求前,请花一点时间验证。


以上,就是我在做滚动加载过程中的一点总结,辛苦期间启蒙大大、顾老师、宇航大大不厌其烦的解答。


本文转载自公众号贝壳产品技术(ID:gh_9afeb423f390)。


原文链接:


https://mp.weixin.qq.com/s/83euut430ZGn-crgqMW3cA


2019 年 9 月 20 日 17:291862

评论

发布
暂无评论
发现更多内容

我的程序跑了60多小时,就是为了让你看一眼JDK的BUG导致的内存泄漏。

why技术

Java 源码 jdk 并发 bug

微信小程序使用GoEasy实现websocket实时通讯

GoEasy消息推送

小程序 websocket 即时通讯

​中国SaaS处在什么阶段?

ToB行业头条

数据库周刊32丨Oracle自治数据库大动作;腾讯云MySQL 8.0上线;华为数据库工程师认证发布;update引起业务卡顿;PostgreSQL安全加固;openGauss单机安装;中国DBA联盟"ACDU"邀您加入……

墨天轮

MySQL 数据库 oracle postgresql

MySql的Dockerfile编写

玏佾

Redis基础:redis特点

奈学教育

redis

一口气讲透一致性哈希(Hash),助力「码农变身」

码农神说

一致性算法 一致性哈希 一致性hash 一致性Hash算法

如何把百万级别的订单根据金额排序

码哥字节

数据结构 排序算法

猿灯塔:spring Boot Starter开发及源码刨析(四)

猿灯塔

Java 猿灯塔 spring Boot Starter

《中国区块链产业园15强名录》

CECBC区块链专委会

Worktile完成新一轮融资,将发力研发管理赛道

Worktile

融资

阿里拍卖,能不能拍到点儿上?

ToB行业头条

讲烂了的mysql,今天再给大家重温一下

爱嘤嘤嘤斯坦

Java MySQL 数据库 编程 mysql事务

为什么单元测试不是持续交付的唯一答案

禅道项目管理

持续集成 单元测试

架构师是怎样炼成的 6-1

闷骚程序员

Markdown工具Typora结合gitee码云图床自动上传云端图片

Flychen

Typora markdown gitee

啃碎并发(10):内存模型之内部原理

猿灯塔

Spring Boot 2.3.0正式发布:优雅停机、配置文件位置通配符新特性一览

YourBatman

spring springboot

你有认真了解过自己的“Java对象”吗

海星

Java JVM

企业的数字化转型探索

松子(李博源)

企业架构 数字化 企业数字化转型

解读:新基建为区块链带来的新机遇

CECBC区块链专委会

三大 OSS 缓存加速系统巅峰对决

苏锐

hadoop cache JuiceFS JindoFS Performance

腾讯的ToB梦想

ToB行业头条

话题讨论|在编程中,有哪些好习惯是应该一直坚持下去的?

InfoQ写作平台官方

写作平台 话题讨论 话题

【融云分析】融云实时音视频 SDK 对智能硬件的视频适配

Geek_116789

Redis基础:redis特点

古月木易

redis

将设计模式应用到日常的curd中—分离关联查询

LSJ

Java 设计

统一物品编码 破解追溯“断链”困局

CECBC区块链专委会

吴恩达推荐笔记:22张图总结深度学习全部知识

程序员生活志

学习 吴恩达

2020,是中国SaaS行业的机遇之年?

ToB行业头条

火焰图:全局视野的Linux性能剖析

Marionxue

演讲经验交流会|ArchSummit 上海站

演讲经验交流会|ArchSummit 上海站

移动端 H5 页面懒加载优化-InfoQ