如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题

通过一个早上的百度搜索和与前端开发高手的技术探讨得知以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;哎!!!!!,果然太年轻.

据说是因为这行代码启用了硬件加速特性,所以滑动很流畅。但是这个属性也会相对耗费更多内存。在流畅的滑动效果和耗费内存之间,我选择了前者。

  后来深入研究了一下该属性。具体深入点如下:

  实际上,Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。创建时的堆栈如下:

Thread 1, Queue : com.apple.main-thread #0 0x00086723 in -[UIScrollView initWithFrame:] () #1 0x004ec3bd in -[UIWebOverflowScrollView initWithLayer:node:webDocumentView:] () #2 0x001f1769 in -[UIWebDocumentView webView:didCreateOrUpdateScrollingLayer:withContentsLayer:scrollSize:forNode:allowHorizontalScrollbar:allowVerticalScrollbar:] () #3 0x01d571bd in __invoking___ () #4 0x01d570d6 in -[NSInvocation invoke] () #5 0x01d5724a in -[NSInvocation invokeWithTarget:] () #6 0x027fb6a1 in -[_WebSafeForwarder forwardInvocation:] () #7 0x027fb8ab in __44-[_WebSafeAsyncForwarder forwardInvocation:]_block_invoke_0 () #8 0x04ac753f in _dispatch_call_block_and_release () #9 0x04ad9014 in _dispatch_client_callout () #10 0x04ac97d5 in _dispatch_main_queue_callback_4CF () #11 0x01d09af5 in __CFRunLoopRun () #12 0x01d08f44 in CFRunLoopRunSpecific () #13 0x01d08e1b in CFRunLoopRunInMode () #14 0x01cbd7e3 in GSEventRunModal () #15 0x01cbd668 in GSEventRun () #16 0x00032ffc in UIApplicationMain () #17 0x00002ae2 in main at /Users/liuhx/Desktop/UIWebView_Research/WebViewResearch/main.mm:16

  实际创建的是UIWebOverflowScrollView,它继承自UIScrollView,声明为:

@class DOMNode, UIWebDocumentView, UIWebOverflowContentView, UIWebOverflowScrollListener; @interface UIWebOverflowScrollView : UIScrollView { UIWebDocumentView *_webDocumentView; UIWebOverflowScrollListener *_scrollListener; UIWebOverflowContentView *_overflowContentView; DOMNode *_node; BOOL _beingRemoved; } @property(nonatomic, getter=isBeingRemoved) BOOL beingRemoved; // @synthesize beingRemoved=_beingRemoved; @property(retain, nonatomic) DOMNode *node; // @synthesize node=_node; @property(retain, nonatomic) UIWebOverflowContentView *overflowContentView; // @synthesize overflowContentView=_overflowContentView; @property(retain, nonatomic) UIWebOverflowScrollListener *scrollListener; // @synthesize scrollListener=_scrollListener; @property(nonatomic) UIWebDocumentView *webDocumentView; // @synthesize webDocumentView=_webDocumentView; - (void)setContentOffset:(struct CGPoint)arg1; - (void)_replaceLayer:(id)arg1; - (void)prepareForRemoval; - (void)fixUpViewAfterInsertion; - (id)superview; - (void)dealloc; - (id)initWithLayer:(id)arg1 node:(id)arg2 webDocumentView:(id)arg3; @end

  其还有一个子View作为ContentView,是给WebCore真正用作渲染overflow型内容的layer的容器。UIWebOverflowContentView的声明为:

@interface UIWebOverflowContentView : UIView { } - (void)_setCachedSubviews:(id)arg1; - (void)_replaceLayer:(id)arg1; - (void)fixUpViewAfterInsertion; - (id)superview; - (id)initWithLayer:(id)arg1; @end

  再往底层跟,都是CALayer的操作。以上两个类都是UIKit层的实现,需要WebCore有硬件加速的支持才有实际意义,相关的逻辑被包含在ACCELERATED_COMPOSITING这个宏里。

  原理说了一大堆,我表示一句也没看明白。不过呢,作为知识的分享者就应该要时时刻刻以最简单明了的说法阐述问题,所以总结以下几点供大家参考:

    1. 从SVN log看,在WebKit 108400版本左右才支持,所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。
    2. 从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件,所以效率很高。
    3. 从实际开发的角度讲,采用这样的做法相对是耗更多内存的,最好是在产生了非常大面积的overflow时才应用。

苹果手机overflow:auto的卡顿的更多相关文章

  1. [Android Pro] ScrollView嵌套RecyclerView时滑动出现的卡顿

    reference to : http://zhanglu0574.blog.163.com/blog/static/113651073201641853532259/ ScrollView嵌套Rec ...

  2. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  3. ionic overflow:auto失效

    事情的起因是 同事上传一个很宽的table文件,因为手机屏幕宽度有限,因此要求 用户可以水平滚动页面,这样table的内容通过滚动就可以实现啦. 当时感觉很简单 给table外面的容器加个overfl ...

  4. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  5. IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨

    IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...

  6. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  7. overflow:auto/hidden的应用

    一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset=&quo ...

  8. ie6,ie7下设置overflow:auto下滚动条不起作用

    今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...

  9. 让overflow:auto页面滚动条出现时不跳动

    今天看到一篇张鑫旭的文章,转载过来.https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-j ...

随机推荐

  1. 支持Java Spring MVC

    Java Spring MVC能很方便在后台返回JSON数据,所以与MiniUI进行数据交互非常简单. 1)后台处理: 在MVC控制器中,可以通过方法参数接收数据,也可以通过Request接收更复杂的 ...

  2. 支持ASP.NET WebService

    ASP.NET WebService默认返回的数据格式是XML,但也能返回JSON格式. 如何让MiniUI组件支持ASP.NET WebService? 只需要: 1) 引用miniui-webse ...

  3. 对于C(n,k)取模

    2016.1.26 法一:直接根据定义式,求乘法逆元即可 法二:借助关于n!mod p,那么根据C(n,k)的定义式并结合乘法逆元即可求解. 法三:借助卢卡斯定理求解 特别注意:在C(n,k)模p等于 ...

  4. RIO-SEIO水泵流量表

    http://rio-seio.com/TW/products_pumps/Rio_plus.html 流量表:

  5. beagleBone black 中QT的移植

    收到板子后默认是Debian系统.gcc -v 后发现其编译链是:arm-linux-gnueabihf http://pan.baidu.com/s/1pJrAvsn 有相关工具下载,里面有这个 解 ...

  6. Git Pro - (1) 基础

    近乎所有操作都可本地执行 在Git中的绝大多数操作都只需要访问本地文件和资源,不用连网. 三种状态 对于任何一个文件,在 Git 内都只有三 种状态:已提交(committed),已修改(modifi ...

  7. R连接Mysql时,中文显示为问号的解决方案

    1.打开Mysql安装目录下的my.ini文件,将其中的default-character-set= 均设置为GBK 2.在管理工具——数据源(ODBC)中将创建好的数据源作如下设置:

  8. JSP+Servlet中使用jspsmartupload.jar进行图片上传下载

    JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post&quo ...

  9. 慕课网-Java入门第一季-7-3 Java 中无参带返回值方法的使用

    来源:http://www.imooc.com/code/1579 如果方法不包含参数,但有返回值,我们称为无参带返回值的方法. 例如:下面的代码,定义了一个方法名为 calSum ,无参数,但返回值 ...

  10. IP地址

    if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/.test($.trim($('#add ...