内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

解决移动端滑动卡顿的问题

2017-09-16 15:35 出处:清屏网 人气: 评论(0

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

一、 -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);
        }
}
分享给小伙伴们:
本文标签: 移动端滑动卡顿

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.