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的层级的时候请先做一个判断:
if(myContainer.getChildIndex(myChild)!=0)
{
myContainer.setChildIndex(myChild,0);
}
运气好的话,这个判断最高能带来200%以上的效率提升。
4、当你的Sprite / MovieClip 设置 cacheAsBitmap = true 这个属性的时候,当此显示对象内很小的一个区域(甚至是被遮盖着的物体)发生变化,会导致整个Sprite / MovieClip重绘。
5、尽量确保活动的显示内容在非可见区域被暂停活动或者干脆直接移除出显示列表,这里提到的不可视区域不仅仅是舞台外不可见的,还包括舞台内被其他物体遮盖住的显示对象。
正如之前提到的,重绘是Flash Player性能消耗的主要大户,所以去优化减小重绘区域面积,减少不必要的重绘操作次数,往往能够带来比较大的性能优化回报。
分享到:
相关推荐
通过以上这些技巧,开发者可以显著提升Flex应用程序的运行效率,提供更加流畅的用户体验。对于深入学习和实践,可以查阅"Flex应用程序性能改善技巧.pdf"文档,它将提供更多细节和示例。记住,性能优化是一个持续的...
通过对Adobe Flex应用程序进行细致的性能优化,不仅可以提升用户体验,还能有效减少服务器负载,提高整体系统效率。开发者应该密切关注应用的实际运行情况,适时调整优化策略,以应对不断变化的需求和技术环境。
- **性能优化技巧**:如合理使用数据绑定、减少不必要的重绘和布局计算等,以提高Flex应用的运行效率。 通过学习这些Flex知识,开发者不仅可以掌握创建富有吸引力和互动性的Web应用的技能,还能理解如何有效地管理...
理解如何优化Flex应用,如减少重绘、优化数据结构和算法,以及利用异步编程等,将对提升应用质量产生积极影响。 总的来说,《Flex企业应用开发实战》这本书将带领读者从基础到高级,全面掌握Flex技术在企业级应用...
《Flex Application Performance: Tips and Techniques》主要探讨了提升Flex应用性能的各种技巧和技术,适用于希望优化客户端应用以及服务器端性能的开发者。该文档由Brandon Purcell和Deepa Subramanian共同撰写,...
10. **优化与性能**:优秀的源代码会考虑到性能问题,如减少重绘、优化数据绑定和使用缓存。学习这些最佳实践可以帮助我们写出更高效、更流畅的Flex应用。 通过深入研究“Flex实际应用源代码”,开发者不仅可以了解...
- **高性能**:Spark布局引擎通过优化渲染路径和减少不必要的重绘操作,显著提升了应用的性能表现。 #### 三、未来的FXG格式 FXG格式作为一种新的矢量图形格式,对于Adobe Flex 4来说具有重要意义。FXG不仅能够...
此外,了解性能优化技巧,如减少重绘、缓存位图和有效使用事件监听器,对于提升应用性能至关重要。 十、Flex源码学习 提供的源码可以帮助学习者深入理解Flex的实际应用,通过分析和修改代码,可以提升对Flex的理解...
9. **性能优化**:书中可能涵盖如何通过优化布局、减少重绘和重排,以及正确使用缓存策略来提升Flex应用的性能。 10. **调试和测试**:Flash Builder 4内置了强大的调试工具,包括断点、变量监视、性能分析等,帮助...
第二十六至第三十章可能会讨论Flex应用的优化和性能调试,如减少组件重绘、缓存策略、内存管理和加载优化。 最后,第三十一章可能是总结和实践项目,将前面所学的知识综合运用到一个完整的Flex与Java集成的案例中。...
- 性能优化:减少不必要的重绘,使用正确的数据结构,优化网络通信等。 7. **游戏设计原则**: - 用户体验:考虑游戏界面的易用性和美观性,确保操作流畅,反馈及时。 - 可扩展性:设计良好的模块化结构,方便...
自定义标题栏可能会增加页面渲染的复杂度,因此需要注意优化CSS选择器的使用,减少不必要的重绘和回流。 3. **用户体验**: 设计时应充分考虑用户的使用习惯,比如保留返回按钮等常用的操作选项,使用户能够快速...
2. 考虑性能优化,如使用CSS动画代替JavaScript动画,减少重排和重绘。 3. 对触摸设备的支持,确保在手机和平板上的良好交互体验。 总结,实现Flex翻书效果涉及到了Flexbox布局、CSS3动画、3D变换以及JavaScript...
在开发过程中,理解如何优化布局、减少重绘、有效使用内存和处理异步操作是提升Flex应用性能的关键。 总之,Flex教程将引导你掌握这个强大的开发框架,通过学习,你将能够创建出功能丰富、交互性强的Web、移动和...
同时,性能优化是提升用户体验的关键,如减少组件重绘、优化数据处理等方式可以有效提升应用性能。 总的来说,"Flex中文帮助文档"涵盖了Flex开发的各个方面,从基础概念到高级技术,从开发环境的搭建到实际项目的...
总之,“Flex技术中文帮助”文档将全面覆盖Flex开发的各个方面,无论你是初学者还是经验丰富的开发者,都能从中获得宝贵的指导,提升你的Flex应用开发技能。通过深入学习和实践,你将能够利用Flex的强大功能构建出...
在Flex开发中,ItemRenderer是一种强大的机制,它允许开发者自定义数据列表或组合框等容器中每一项的显示方式。ItemRenderer是...理解并熟练运用ItemRenderer是提升Flex应用专业性和用户体验的关键技巧之一。
7. **性能优化**:针对Flex应用的性能提升技巧,如减少重绘、优化数据结构、缓存计算结果等,以提高应用的响应速度和效率。 8. **测试和部署**:如何创建测试用例,使用自动化测试工具,以及将Flex应用发布到不同...
9. **优化和性能**:Flex应用需要考虑性能问题,如减少不必要的重绘,使用优化的数据结构和算法,以及有效地管理内存。 10. **发布和部署**:最后,游戏会编译为SWF文件,通过Flash Player或Adobe AIR在Web上运行。...
例如,减少不必要的重绘,或者使用位图缓存来提升渲染速度。 8. **用户体验设计**:在实现鱼眼特效时,除了技术实现,还要考虑用户体验。特效应该增强而不是干扰用户的导航,确保用户能够轻松理解和使用鱼眼菜单。 ...