运用webkit绘制渲染页面原理解决iscroll4闪动的问题

原：http://www.iunbug.com/archives/2012/09/19/411.html

已经有不少前端同行抱怨iScroll4的各种问题，我个人并不赞同将这些问题归咎于iScroll4,因为iScroll4进无论是touch事件的捕获，还是使用transform来处理滚动，以及将cubic-bezier应

用到transition上实现高效的平滑滚动，这些原理我们都是已知的。更多原理细节可以参看[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动 一文。此文则来解释另一个

被很多人误解为iScroll4 造成的问题，那就是内容多的页面闪动的问题。现象表现为：

1.滑动过程中，滚动区内的元素在释放手指时出现细微闪动

2.图片缩放过程中释放手指时明显闪动

3.iOS上从mobile safari打开或第三方应用内打开后，切回主屏幕再切回页面时明显闪动

4.页面初始时闪动

大致这些情况下会有闪动，在ipad2,new ipad上会明显看得出。

下面就来分析产生的原因和解决办法：

首先，我们知道iOS5给我们带来了

overflow-y: scroll;

overflow-x: hidden;

-webkit-overflow-scrolling: touch;

实现固定区域内的滚动，当应用这种方式实现滚动时，上面的提到的现象也会不同程度的出现尤其是1，2.是那么我们就可以断定不是iScroll4 的原因了。那么究竟是什么原因呢？

这对我们解决闪动问题有什么帮助呢？按上页的说明，和iScroll4实现原理我们很容易知道，iScroll4作用的滚动区是一个很大的独立层，webkit是不会将这么大的层整个分配内存绘制渲染的，所以，只要将滚动区域可视范围的列表项元素缓存起来就解决这个问题了。记webkit强制缓存起来即是将他们独立成一个层，而且这个层当然不会很大否则会被视为平铺层处理了。一般列表里项里的元素不会像页面主容器一样的大的。实现方式就是将列表项置身于上面的6个场景中，比如:

        #wrap>section>article{-webkit-transform:translateZ(0);}/*注意这里*/

        <div id="wrap">

            <section>

                <article>1</article>

                <article>2</article>

                <article>3</article>

            </section>

        </div>