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

Posted by unbug on Sep 19, 2012 in CSS3, Mobile Web App, OPOA | 1 comment

许多前端同行抱怨iScroll4的各种问题。就我个人而言，我不同意将这些问题归咎于iScrol4，因为iScrol4进入，无论是捕获touch事件，还是使用transform处理滚动，并将cubic-bezier应用于transition，以实现高效、平稳的滚动。我们都知道这些原理。更多的原则细节可以参考[翻译]手把手教你在iOS上写Mobile Web 实现Fixeded应用实现Fixed Position和模拟滚动一文。这篇文章解释了另一个被许多人误解为iScroll4 问题是内容多的页面闪烁。现象表现为：

1.在滑动过程中，当手指释放时，滚动区域的元素会微微闪烁

2.手指在图片缩放过程中明显闪烁

3.从mobileilios上的mobile safari打开或第三方应用程序打开后，切回主屏幕，然后切回页面时明显闪烁

4.页面在开始时闪烁

在ipad2中，在这些情况下会有闪光，new ipad上会明显看到。

以下是分析原因和解决方案：

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

overflow-y: scroll ;overflow-x: hidden ;-webkit-overflow-scrolling: touch;

实现固定区域内的滚动。当采用这种方法实现滚动时，上述现象也会不同程度地出现，特别是1、2。然后我们可以得出结论，不是iScroll4 原因。那到底是什么原因呢？

在绘制页面时，webkit将结构分为各种层，当层足够大时，就会变成大的平铺层。每次页面结构发生变化时，webkit不需要渲染整个页面，而是渲染相应的层，这对渲染速度非常重要。webkit将在内存中缓存各层分配一定大小的“备份存储区”，即绘制层的上下文。各种效果(动画、3D变换等。)可以通过这个上下文轻松实现。).“备份存储区”内存占用的大小不仅取决于层次，还取决于设备和显示模式。假设这是普通屏幕下的1。：1，但在Retina屏幕下是1：2的，而且放大的时候这个量会成倍增加；图为10X10，普通屏幕分布为10X10，Retina最初为20X20。这也说明Retina消耗的内存更多。这也表明Retina消耗更多的内存。当层很大时，这意味着“备份存储区”会消耗更多的内存。为了避免这一点，webkit不会绘制一个大层来存储一个大页面。例如，铺装层将分为许多块进行绘制，即尽可能占用尽可能小的内存，只渲染视觉范围内的部分。这就是为什么当我们在大页面上滚动时，我们会发现下面的内容慢慢显示，上面的内容也慢慢显示。

以下是webkit分层绘制的场景：

1. 页面主容器永远是独立的平铺层
2. 绘制密集型元素时，如<video>, <canvas>
3. 应用3D transformations的元素，包括translate3d， rotate3d, translateZ
4. Filters等内容被加强时， masks, reflections, opacity, transitions, animations
5. 在某些特殊情况下，如position:fixed, -webkit-overflow-scroll:touch
6. 任何覆盖已知层的内容

这对我们解决闪动问题有什么帮助？根据上页的说明，我们很容易知道iScroll4的滚动区域是一个大的独立层，webkit不会绘制和渲染如此大层的整个分布内存。因此，只要缓存滚动区域视觉范围的列表元素，就可以解决这个问题。强制缓存webkit意味着将它们独立成一层，而且这层当然不会很大，否则会被视为平铺层。列表中的元素不会像页面主容器那样大。实现方法是将列表项置于上述6个场景中，例如：

#wrap>section>article{-webkit-transform:translateZ(0);}/*注意这里*//*< p id = "wrap" >     < section >         < article >1</ article >         < article >2</ article >         < article >3</ article >     </ section ></ p >