webkit在繪制頁面時會將結構分為各種層，當層足夠大時就會變成很大的平鋪層。這樣一來webkit在每次頁面結構發生變化時不需要都渲染整個頁面而是渲染對應層了，這對渲染速度來說相當的重要。webkit會給各種層分配一定大小的“后備存儲器”在內存里緩存起來，這就是繪制層的上下文，通過這個上下文就可以很容易的實現各種效果（動畫，3D變換等），“后備存儲器”內存占用大小不僅依層而定，跟設備和顯示方式也是有關的，假設這在普通屏幕下是1：1的，但在Retina屏幕下則是1：2的，並且放大時這個量會成倍增加；一張圖片是10X10，普通屏幕分配的就是10X10，Retina初始則是20X20。這也表明Retina是更加消耗內存的。當層很大時，意味着“后備存儲器”會消耗更大的內存，為了避免這點，webkit並不會繪制一個很大的層來存儲一個很大的頁面，比如說平鋪層則會拆分成很多的塊來繪制，即盡占用盡可能小的內存，只是將可視范圍內的那部分渲染出來。這就是為什么我們在大頁面滾動時會發現下面的內容慢慢顯示，向上滾動時上面的內容還慢慢顯示的原因。
以下則是webkit划分為層繪制的場景：
- 頁面主容器永遠是獨立的平鋪層
- 繪制密集型元素時，如<video>, <canvas>
- 應用3D transformations的元素，包括translate3d, rotate3d, translateZ
- 內容被加強時，如Filters, masks, reflections, opacity, transitions, animations
- 某些特殊的情況下也會，如position:fixed, -webkit-overflow-scroll:touch
- 任何在已知層上覆蓋的內容
webkit是不會將這么大的層整個分配內存繪制渲染的，所以，只要將滾動區域可視范圍的列表項元素緩存起來就解決這個問題了。
解決方法：
<div class="J-slider" style="width:320px;height:600px">
<div class="J-scroller" style="width:960px;height:600px;>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
假如以上結構的多圖左右移動查看， J-scroller是一塊很大的動畫移動層，我們對J-scroller設置了 translate3d(x,y,z) 以及transition 動畫，
此時iphone查看移動時會有閃屏現象，因為webkit是不會將J-scroller這么大的層整個分配內存繪制渲染。
這時候我們需要將滾動區域可視范圍的列表項item元素緩存起來
.item{
-webkit-transform: translate3d(0,0,0);
}
另外：當translate使用2d而非3d的呈現方式時，我們要設置當前動畫移動元素的呈現方式為3d，它的所有子元素背面隱藏
.J-scroller{
-webkit-transform-style: preserve-3d;
}
.J-scroller item{
-webkit-backface-visibility: hidden;
}
參考鏈接： http://www.tuicool.com/articles/rYby6v