(转)深入理解flash重绘

深入理解Flash Player重绘

Flash Player 会以SWF内容的帧频速度来刷新需要变化的内容,而这个刷新的过程,我们通常称为“重绘(redraw)”,相信即便是初级的菜鸟也知道,只要使用的是Debug版本的Flash Player, 右键菜单里就会有“Show Redraw Regions (显示重绘区域)” 这个选项,当此选项打开的时候,我们就能清楚地看到此刻场景内被重绘的区域。

那么什么情况下会发生重绘呢??
1、最常见的是情况就是舞台上的可视组件在形状、位置、状态(alpha, scale…)发生改变的时候会触发Flash Player 的重绘。
2、当一个DisplayObject的层级(ChildIndex)发生改变的时候也会导致重绘。
3、当你将一个Sprite / MovieClip 的buttonMode 设置为 true 的时候,即便是单帧动画,重绘会在MouseEvent.MOUSE_DOWN的时候触发。又或者你对DisplayObject设置层级的时候,即便DisplayObject的层级没有发生改变,也会使得 Flash Player对此显示对象进行重绘。
既然重绘是为了能够将显示内容进行更新,那么一个Flash应用程序就不可避免的要触发重绘。而重绘却是性能消耗的主要根源,一个有经验的Flash开发人员写出的Flash应用,其性能可能70% - 90%(甚至更高)是消耗在重绘上,那么提高Flash应用程序的运行效率和减少重绘有着莫大的关系。
要减少重绘,首先我们需要对单位每帧重绘大小这个概念进行量化:重绘的大小应该取决于数量和面积。数量取决(但不是完全取决)于可视范围内的需要更新的显示对象的数量,假设场景上有两个闪烁的小圆点并且宽和高都为20,那么重绘的数量为3,而重绘的总面积就为: 20 * 20 * 3 = 1200 (平方像素)。

简单的看看上面的公式是不是觉得重绘面积的计算很容易呢?那么继续估计下下面这个情况的重绘面积是多少:

如果你计算的结果是: 20 * 20 * 6 = 2400 (平方像素),那么恭喜你,答错了…
根据上面的介绍,重绘的大小理应就是重绘的数量 * 单个区域的面积,可是为什么说这个情况就错呢?让我们看看问题究竟出在什么地方:

让人觉得奇怪的地方出现了,重绘区域的数量依旧是3,而面积却增大了不少,按照图上给出的坐标信息,我们不难算出,总重绘面积的大小为:
20 * (70 – 20 + 20) * 3 = 4200 (平方像素),比起预先估算的 2400 (平方像素)整整大了 75%!
或许从这个地方开始,大家就开始觉得困惑了。的确,Flash Player的重绘面积并没有按照我们之前的设想那样来计算,但是依旧能找到一些规律,仔细来看以下几种况:

如果你够细心,应该不难看出每次 Flash Player 重绘的区域不会超过3个,即便舞台上有多于三个的显示对象需要被重绘,Flash Player 会将其中的两个或者多个集合(根据位置来判断)在一起,然后重绘在一个大区域里面,至此,我们暂时可以将上面两个重绘法则命名为三区域法则就近合并法则,通过总结出来的这两个法则,我们就能更加容易地理解Flash Player 重绘的机制,以及解释在日常调试中遇到的一些重绘现象了。比如QQ牧场里几个靠得比较近得小动物被放在一个区域里面重绘,而有些动物则不然,被单独重绘。
当我们了解了重绘机制后,那么接下来就应该进一步去了解如何避免多余的重绘,下面列举的方法可能大部分都是被大家所熟悉的。
1、当一个带有动画效果的DisplayObject在不显示的时候,不仅仅是将其 visible 属性设置为 false, 因为重绘依旧会进行,这里你可以选择暂停掉动画,又或者利用removeChild(displayObject) 直接将此对象移除出显示列表。
2、不出现在可视范围内外观变化的显示对象其实是不会发生重绘的,这点相信是Flash本身做了优化,也就是说我的Stage.stageWidth 和 Stage.stageHeight 都为200的情况下,一个处在舞台上的变化的显示物体,坐标为(200, 200) 宽高都为10,此时Flash Player重绘内容并不会包括此对象,新版本的Flash Player 甚至在浏览器窗口最小化的时候会关闭掉所有的重绘,这个时候你往往会发现CPU占用率骤降,但是应用程序依旧在运行。
3、在设置DisplayObject的层级的时候请先做一个判断:

运气好的话,这个判断最高能带来200%以上的效率提升。
4、当你的Sprite / MovieClip 设置 cacheAsBitmap = true 这个属性的时候,当此显示对象内很小的一个区域(甚至是被遮盖着的物体)发生变化,会导致整个Sprite / MovieClip重绘。
5、尽量确保活动的显示内容在非可见区域被暂停活动或者干脆直接移除出显示列表,这里提到的不可视区域不仅仅是舞台外不可见的,还包括舞台内被其他物体遮盖住的显示对象。

正如之前提到的,重绘是Flash Player性能消耗的主要大户,所以去优化减小重绘区域面积,减少不必要的重绘操作次数,往往能够带来比较大的性能优化回报。

(转)深入理解flash重绘,布布扣,bubuko.com

时间: 2024-09-29 22:46:46

(转)深入理解flash重绘的相关文章

你真的了解回流和重绘吗

回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是一直不是很清楚这两步具体做了什么事情.最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合自己的体会,写了这篇文章,希望可以帮助到大家. 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面.(这个渲染过程来自MDN) 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成C

页面优化,谈谈重绘(repaint)和回流(reflow)

一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重绘和回流. 二.重绘和回流是什么 怎么去理解这两个概念呢?从字面上理解,重绘,重新绘画,重新上色,较难产生联想的是回流. 我们都知道,一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render树(渲染树),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的

【开发必看】你真的了解回流和重绘吗?

本文由云+社区发表 回流和重绘可以说是每一个web开发者都经常听到的两个词语,可是可能有很多人不是很清楚这两步具体做了什么事情.最近有空对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家. 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,优化性能,可以跳到后面.(这个渲染过程来自MDN) 浏览器渲染过程 添加描述 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成

[转] 你真的了解回流和重绘吗

浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面.(这个渲染过程来自MDN) 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小) Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝

理解浏览器的重绘与回流(repaint&&reflow)

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一.  浏览器渲染过程 渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 浏览器解析HTML的基本过程: 1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件 2  浏览器载入html代码,发现标签内有一个标签引用外部css文件 3 浏览

怎样理解重流和重绘

下面是一些相关概念:  1. 重流: reflow, 重绘: repaint 2. 重流必定导致重绘, 重绘不一定重流 3. 布局改变会发生重流, 元素颜色等改变只会发生重绘 下面是通过减少重流/重绘次数而优化页面性能的一些手段:  1. 减少js中的dom操作, 若必须, 则尽量将读取dom和写入dom的操作放在一起, 便于浏览器累积dom变动, 一次执行, 减少重绘. 2. 缓存dom信息, 多次使用, 不要重复读取dom节点. 3. 不要一项一项地改变样式, 尽量用 css class一次

【Fanvas技术解密】HTML5 canvas实现脏区重绘

先说明一下,fanvas是笔者在企鹅公司开发的,即将开源的flash转canvas工具. 脏区重绘(dirty rectangle)并不是一门新鲜的技术了,这在最早2D游戏诞生的时候就已经存在. 复杂的术语或概念就不多说,简单说,脏区重绘就是每一帧绘制图形界面的时候,只重新绘制有变化的区域,而不是全屏刷新.很明显,这肯定能带来性能的提升. 举个例子,看下边两个图:   假设这里是动画的连续2帧,那么从第一帧到第二帧,其实变化的只有蝴蝶的区域.那么所谓的脏区就是两个图片的红色框之和,要把上一帧的蝴

高性能WEB开发:重排与重绘

DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为"帧"或"盒",符合CSS模型的定义,理解页面元素为一个具有填充

iOS 视图:重绘与UIScrollView(内容根据iOS编程编写)

我们继续之前的 Hypnosister 应用,当用户开始触摸的时候,圆形的颜色会改变. 首先,在 JXHypnosisView 头文件中声明一个属性,用来表示圆形的颜色. #import "JXHypnosisView.h" @interface JXHypnosisView () /** 颜色 */ @property (nonatomic,strong) UIColor * circleColor; @end @implementation JXHypnosisView - (in