前端優化-改善滑動流暢度的幾類方法
很多時候，在我們寫完前端頁面以後，在谷歌模擬器上測試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飯量還不小，這樣就很消耗用戶的電量，所以要適可而止，不能見一個加一個，這樣就不好啦