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

-webkit-overflow-scrolling: touch

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

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

-webkit-transform: translateZ(0px);

熟悉像素管道的同学都知道,页面绘制的过程分为三个部分:layoutpaint 和合成。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

你可能感兴趣的:(前端技术知识)