移动端无限加载是一种很常见的需求,但是随着数据量的增加,浏览器(软件)所需要的资源也越来越多.而系统分配给每一个程序的资源也是有限的.这时就会出现卡顿,影响用户体验,下面我们就一起来探讨解决这个问题.
最近有一个模仿抖音的需求,要求像抖音一样上下左右滑动切换,只不过我们将视频换成了图片,话不多说,看效果:
问题
1.加载速度慢
2.随着数据的增加,后面变得及其卡顿
怎么解决
一、 加载速度慢
经分析发现,加载速度慢有以下两个原因:
1.图片资源加载慢
2.图片虚化背景在图片加载后,在通过 css3 滤镜实现,增加了 gpu 的计算量,导致加载速度慢
后来将图片上传到阿里云 oss 静态资源服务器,大大加快了图片加载的速度,但是整个加载过长依然慢,可以得出是由于 gpu 计算量太大所导致,然后使用 canvas 滤镜来绘制虚化背景,经测试变得更慢了,猜想是 canvas 进一步增加了计算量.后来发现阿里云 oss 自带高斯模糊,只需要在图片路径后添加下面的参数即可.
1 | ?x-oss-process=style/blur50-50 |
二、随着数据的增加,后面变得及其卡顿
这个问题明显是图片太多,且每一个左右滑动的 slider 都是一个独立的对象,过多的左右 slider 占用了太多的内存.所以我们直接隐藏多余的左右 slider,让页面最多只显示 3 个所有滑动的 slider,这样处理后,动画的流程性得到极大的提升.
上面这个 demo 是从项目中抽出来的部分东西,所以还存在一些问题,但也基本能够解决无限加载卡顿的问题了
[越努力，越幸运！]