前端优化-改善滑动流畅度的几类方法

前端优化-改善滑动流畅度的几类方法
很多时候,在我们写完前端页面以后,在谷歌模拟器上测试iOSAndroid测试都没问题、堪称完美。当我们真机测试时,拿起安卓手机一测,哇塞完美十分流畅!然后兴高采烈的换用iOS手机测试,手指轻轻一滑动,我屮艸芔茻怎么回事…一脸懵逼,怎怎怎怎怎么这么卡,完全是js写的生硬的滑动效果啊,手指离开,滑动立马停下,蓝瘦!!!

骚年莫慌,我这有一锦囊妙计,不妨一试------>>>

首先说一下滑动干涩的原因:

1.滑动的部分不是body的直接子元素。

对于iOS的滑动加速问题,默认只会给body的滚动添加加速效果,在其他的元素下面就不会有这种一泻千里的滑动效果了。

类似于下面这种的结构

<body>
  <div class="container">
     
div>
div>
div>
div> div> body>

此时,滚动的元素是 .container ,默认是没有滚动加速效果的,如果想要一泻千里的效果咋整呢?简单啊,去掉 .container 层不就得了,完美解决!

擦啊 我 .container是有用的,不能去啊!

好吧,那只能使用第二种方法了

第二种方法就是给 内容滚动的div加个

 -webkit-overflow-scrolling : touch;

拿起手机一试, 啊 ,爽!

2.页面使用了太多的css3动画效果

当页面使用了过多的css3动画效果,那么也会出现这种问题,滑动的好难受,赶紧放下手机缓会儿神。

这种情况下,我们可以通过使用GPU加速来解决这一问题。

当我们的css3动画效果是2D的时候,系统是不会启动GPU加速的,此时,如果我们使用了过多的2D动画,我们手机的CPU大大就会感觉身体被掏空,又要处理逻辑运算,又要运算那么多的变换矩阵,CPU :总有叼前端想害朕!

不必惊慌,此时,只要我们给CPU找个帮手,帮他计算那些大量的变换矩阵,CPU就会很开心啦,你说是不,开心到飞起呢。

如何让CPU来做这些工作呢?

只要我们的变换是3D的,那么GPU就会屁颠屁颠的来帮忙啦,就算不是3D的,我们也要伪装成3D的变换,哈哈哈,骗取劳动力比如 我们使用 transform:scale(2,2) ; 的时候,可以写成transform:scale3d(2,2,1) ;这样,我们Z轴是没有变化的,但是GPU还是来帮忙啦。

还有一种方法是通过css给要变换的元素添加 will-change:transform ;属性,就是在变换前,提前告诉设备,注意了啊,我要变形啦!让系统提前做好准备,这样在变形的时候,系统就不会束手无策啦,也就不会那么卡啦。

这个属性也是不能滥用,俗话说适可而止,滥用伤身。
(完)

但是 GPU来帮忙不是白帮的,就算不给前,一天三顿饭总得管的,而且GPU饭量还不小,这样就很消耗用户的电量,所以要适可而止,不能见一个加一个,这样就不好啦

你可能感兴趣的:(Html+Javascript)