关于移动端滑动卡顿现象的解决方案

-webkit-overflow-scrolling: touch

IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

overflow: scroll; //该属性随着手指离开立即停止
-webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动

-webkit-transform: translateZ(0px);

熟悉像素管道的同学都知道，页面绘制的过程分为三个部分：layout、paint 和合成。layout负责计算 DOM 元素的布局关系，paint 负责将 DOM 元素绘制成位图，合成则负责将位图发送给 GPU 绘制到屏幕上。
当某个 DOM 元素开启硬件加速之后，浏览器会为此元素单独创建一个“层”。当有单独的层之后，此元素的repaint操作将只需要更新自己，不用影响到别人。
能够单独提升层的css属性有

// 根元素
* 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