`
zhangdaiping
  • 浏览: 129425 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

(转)运用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给我们带来了

1
2
3
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是更加消耗内存的。当层很大时,意味着“备份存储区”会消耗更大的内存,为了避免这点,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实现原理我们很容易知道,iScroll4作用的滚动区是一个很大的独立层,webkit是不会将这么大的层整个分配内存绘制渲染的,所以,只要将滚动区域可视范围的列表项元素缓存起来就解决这个问题了。记webkit强制缓存起来即是将他们独立成一个层,而且这个层当然不会很大否则会被视为平铺层处理了。一般列表里项里的元素不会像页面主容器一样的大的。实现方式就是将列表项置身于上面的6个场景中,比如:

1
2
3
4
5
6
7
8
#wrap>section>article{-webkit-transform:translateZ(0);}/*注意这里*/
<div id="wrap">
    <section>
        <article>1</article>
        <article>2</article>
        <article>3</article>
    </section>
</div>
分享到:
评论

相关推荐

    iscroll4

    6. **内存优化**:iscroll4通过动态加载和卸载视口内的内容,实现了内存的高效管理,避免了在大量数据或大页面时的性能问题。 在使用iscroll4时,开发者通常需要按照以下步骤进行: 1. **引入库**:首先,在HTML...

    iscroll4.js

    总结来说,iscroll4.js是HTML5页面滚动效果的优秀解决方案,它的上拉加载和下拉刷新功能极大地增强了用户体验,是现代Web开发中不可或缺的工具。开发者需要掌握其基本用法和事件机制,以便在实际项目中灵活应用。...

    iScroll4框架

    iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一个限定了高度和宽度的...

    iscroll4例子

    **iscroll4详解** iscroll4是一款轻量级的JavaScript滚动插件,由Cubiq组织开发,专门用于处理移动设备上的滚动效果。这个插件主要用于解决在触摸设备上实现流畅、高性能滚动的问题,尤其在处理长列表或者无限滚动...

    iscroll-4.rar

    iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js...旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。

    原生 iscroll-4

    iScroll 是一个轻量级的JavaScript库,专为解决移动设备上的滚动问题而设计。特别是对于那些需要高性能滚动效果的Web应用程序,iScroll 提供了平滑、流畅的滚动体验。iScroll-4 是其一个重要的版本,它在前代基础上...

    iScroll 4.2.5 中文API

    iScroll的诞生源于早期移动浏览器(包括iOS和Android)中缺乏有效的滚动解决方案。为了模拟原生应用中的滚动体验,开发者通常需要借助额外的技术手段。幸运的是,移动WebKit提供了硬件加速的CSS属性,这让iScroll...

    iscroll-4 滚动内容

    iscroll 是一款轻量级的JavaScript库,专为移动设备设计,主要用于解决在iOS、Android等平台上实现流畅的滚动效果的问题。iscroll-4是这个库的一个版本,它提供了一个高效且自定义程度高的解决方案,可以在固定高度...

    iScroll下拉刷新上滑加载

    使用经典插件iScroll4稍作封装,采用ajax请求数据,实现移动端列表页的功能; 1.下拉刷新当前列表页数据; 2.上滑加载更多列表数据; iScroll4简介: iScroll 4 这个版本完全重写了iScroll这个框架的原始代码...

    iscroll5上拉下拉实例完整demo

    iscroll5相较于之前的iscroll4版本,引入了许多改进和新特性。例如,性能优化,支持更复杂的布局(如嵌套滚动),提供了更丰富的API接口,以及更好的触摸事件处理。在这个实例中,我们可以看到如何将这些特性应用到...

    H5使用iscroll-4模拟手机app下拉刷新功能实现demo

    `H5`(HTML5)作为一种强大的网页开发标准,结合`iscroll-4`库,可以有效地解决这个问题,尤其是实现手机App中的下拉刷新功能。下面我们将深入探讨如何使用`iscroll-4`在`H5`页面中实现这一功能。 `iscroll-4`是由...

    iScroll框架

    iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的...

    iscroll.js下载 5.1.3最新版本

    **iscroll.js** 是一个高性能、轻量级的JavaScript滚动库,主要用于解决移动Web端的滚动问题,尤其在处理触摸事件和实现平滑滚动效果时表现出色。它为开发者提供了强大的API接口,使得在网页中实现复杂滚动效果变得...

    iscroll5 refresh 及iscroll4刷新功能

    本文将重点讲解iscroll5的刷新功能及其与iscroll4的区别。 **一、iscroll5的刷新功能(pull-to-refresh)** 1. **基本概念**:Pull-to-refresh,即“下拉刷新”,是移动应用中常见的一种交互模式,用户通过在内容...

    iscroll5.2.0--页面下拉刷新,上拉分页加载

    **iscroll5.2.0** 是一个轻量级、高性能的JavaScript滚动库,由Matteo Spinelli开发,主要用于解决移动端浏览器的滚动问题。它提供了平滑的滚动体验,并支持许多高级特性,如下拉刷新(Pull-to-Refresh)和上拉加载...

    iscroll5 滑动 滚动

    iscroll5是该库的一个版本,专注于解决移动设备上的滚动问题,提供平滑、流畅的滚动体验。在iscroll5中,开发者可以实现自定义滚动条、无限滚动、触摸滑动等多种功能,极大地优化了用户的交互体验。 **一、iscroll5...

    基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo

    总结来说,"基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo"是一个综合运用现代Web技术优化移动设备浏览体验的实例,iscroll4提供了强大的滚动处理,HTML5提供了高效的数据通信和离线存储,而CSS3则让...

Global site tag (gtag.js) - Google Analytics