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

爱被打了一巴掌 2021-07-04 16:06 560阅读 0赞

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

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

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

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

对于`iOS`的滑动加速问题，默认只会给`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`饭量还不小，这样就很消耗用户的电量，所以要适可而止，不能见一个加一个，这样就不好啦