前端优化-改善滑动流畅度的几类方法
Posted 寒玉知
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端优化-改善滑动流畅度的几类方法相关的知识，希望对你有一定的参考价值。
很多时候，在我们写完前端页面以后，在谷歌模拟器上测试ios和android测试都没问题、堪称完美。当我们真机测试时，拿起安卓手机一测，哇塞完美十分流畅！然后兴高采烈的换用iOS手机测试，手指轻轻一滑动，我屮艸芔茻怎么回事.......一脸懵逼，怎怎怎怎怎么这么卡，完全是js写的生硬的滑动效果啊，手指离开，滑动立马停下，蓝瘦！！！
骚年莫慌，我这有一锦囊妙计，不妨一试------>>>
首先说一下滑动干涩的原因：
1.滑动的部分不是body的直接子元素。
对于iOS的滑动加速问题，默认只会给body的滚动添加加速效果，在其他的元素下面就不会有这种一泻千里的滑动效果了。
类似于下面这种的结构
<body> <div class="container"> <div class="section></div> <div class="section></div> <div class="section></div> <div class="section></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饭量还不小，这样就很消耗用户的电量，所以要适可而止，不能见一个加一个，这样就不好啦
以上是关于前端优化-改善滑动流畅度的几类方法的主要内容，如果未能解决你的问题，请参考以下文章