移动端滑动卡顿问题

移动端手指触摸屏幕过于频繁，移动端会出现卡顿的现象，下面介绍几种顺畅滚动的解决办法。

一、 -webkit-overflow-scrolling

iOS中独有的属性，属性控制元素在移动设备上是否使用滚动回弹效果.

overflow: scroll;
-webkit-overflow-scrolling: touch;//这个属性可以实现，手指离开屏幕会惯性滑动一段距离

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。/
-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 */

二、-webkit-transform: translateZ(0px);

熟悉浏览器渲染过程的小伙伴都知道。
页面绘制的过程分为三个部分：layout、paint和合成。layout负责计算DOM元素的布局关系，paint负责将DOM元素绘制成位图，合成则负责将位图发送给GPU绘制到屏幕上。
当某个DOM元素开启硬件加速之后，浏览器会为此元素单独创建一个“层”。当有单独的层之后，此元素的repaint操作将只需要更新自己，不用影响到别人。
哪些会CSS属性会创建新的层呢？
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

* It's the root object for the page
* It has explicit CSS position properties (relative, absolute or a transform)
* It is transparent
* Has overflow, an alpha mask or reflection
* Has a CSS filter
* Corresponds to <canvas> element that has a 3D (WebGL) context or an * * * accelerated 2D context
* Corresponds to a <video> element

* 根元素
* position：absolute/relative ，+z-index(不为auto）
* display: flex|inline-flex +z-index(不为auto）
* position: fixed
* transform 不为 "none"
* -webkit-overflow-scrolling：touch
* opacity属性值小于 1 的元素
* mix-blend-mode属性值不为 "normal"的元素
* filter值不为“none”的元素
* perspective值不为“none”的元素
* isolation 属性被设置为 "isolate"的元素
* will-change

三、函数节流

参考：http://blog.csdn.net/u013510614/article/details/5192077
1、每当触发touchmove事件时，先延后执行相应的操作，设置一个定时器。如果在定时期间内又出现新的touchmove事件，则取消刚刚的操作，重新设一个定时器。以保证一连串的触发动作后，最后一个动作才真正的去执行相应的操作。
2、只有第一条显然是不够的，如果用户一直不断的触发，就会一直得不到响应。所以还有设一个固定的时间间隔，记住上一次执行操作的时间，比较本次和上一次执行了操作的时间差，大于固定的时间间隔的话，强制执行。

var previous = null;
var atleast = 10;
$('body').on('touchmove', function (e) {
        var now = +new Date();
        if(!previous){
            previous = now;
        }
        if (now - previous > atleast){
            method();//要执行的操作
            // 重置上一次开始时间为本次结束时间
            previous = now;
        }
        else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                checkScroll(e);
            },200);
        }
}