`

提高flex应用性能方法(一)

    博客分类:
  • Flex
 
阅读更多
在RIA应用开发过程中,性能一直是我们关注的一个重点;生成swf文件的大小,内存、cpu资源消耗,事件响应等,都将影响用户在浏览或者使用过程中的体验;
    这就要求我们在平时的开发过程中养成良好的编程习惯,合理使用组件,避开一些较消耗资源的因素。本文将针对这些问题展开一些讨论:
    1、初始化对象时优化:
        1.1、可能的话使用AS来创建你的组件/类(通常通过代码绘制和创建的实例运行效率更高(如使用graphics绘制图形))
        1.2、为property分配初始化默认值:(如:<mx:TextArea text="hi" width="100" />)
        1.3、连接对象:
            1.3.1、将新的对象添加到已显示的列表中
            1.3.2、绑定事件处理函数:<mx:Button click="goNext()" />;
            1.3.3、数据绑定:<mx:label text="{city}" />;
            1.3.4、监听Effect效果:<mx:label showEffect="{fade}"/>;
        1.4、延迟对象创建(默认延迟实例化Flex在启动时不会构建任何子对象视图):
            1.4.1、直到对象需要显示时再创建实例;
            1.4.2、使用Flex中的导航容器(如According、ViewStack、TabNavigator)中内置的推迟实例化功能;
            1.4.3、子ViewStack容器比自定义容器更简单高效
        1.5、依次顺序创建:
            1.5.1、启动过程中错开对象的创建
            1.5.2、使用creationPolicy属性优化启动时间及顺序(如下:顺序依次创建)
            <mx:Applicaion>
            <mx:Panel width="250" heigth="100" creationPolicy="queued"> //顺序创建组件,想插队的话设置creationIndex
                <mx:label text="one" />
            </mx:Panel>
            <mx:Panel width="250" heigth="100" creationPolicy="queued">
                <mx:label text="two" />
            </mx:Panel>
            </mx:Applicaion>
            1.5.3、谨慎使用<mx:Repeater>:
                1.5.3.1、不推荐使用 <mx:Repeater>创建立重复组件
                     糟糕的:<mx:VBox>
                            <mx:Repeater id ="r" dataProvider="{arry}">
                                <mx:Image source="r.currentItem.url" />
                                </mx:Repeater>
                            </mx:VBox>
                 推荐:<mx:List dataProvider ="{arry}">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:Image source="{dataObject.url}" />
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:List>
                说明:直接创建组件放在Scroll中效率更高
    2、优化你的布局和组件大小:
        2.1、定义:
            尽可能在初始化和创建的过程中为所有组件设置其位置和大小
            <mx:Application>
                <ms:HBox>
                    <mx:Button label="1" />
                    <mx:Button label="2" />
                </ms:HBox>
                <mx:textArea width="100%" height="100%" text="text" />
            </mx:Application>
        2.2、描述(尽可能多的使用绝对定位和缩放):
            2.2.1、设置(需要知道所有动态设置大小,自适应都将涉及到大量的运算):从下至上(从内向外)遍历可视组件树
                2.2.1.1、为类似Button 、TextArea的组件设置大小
                2.2.1.2、为HBox组件设置大小
                2.2.1.3、为主Applicaton设置大小
            2.2.2、布局:从上至下(从外向内)遍历可视组件树:
                2.2.2.1、给Application设置大小,为HBox textArea设置位置
                2.2.2.2、给HBox设置大小,为Button设置位置
            2.2.3、运算法则:设置属性n为数字或者对象
        2.3、减少并避免容器多层嵌套:
            2.3.1、尝试使用HBox 和VBox代替Grid
            2.3.2、避免在Applicaton的VBox外再嵌套一个Panel
            2.3.3、不要在MXML组件的根节点下嵌套一个子容器
            2.3.4、推荐使用Canvas这种效率最高的容器
            2.3.5、警告:一个容器通常推荐只包含一个子节点
        2.4 、避免重复设置和布局:
            2.4.1、场景1:当请求的图片较多时(如超过25个),建议所有图片都装载完成后再循环设置其大小和布局
            2.4.2、场景2:当有多个窗体都需要请求WebService时,循环WebService响应,只改变请求窗体的大小
            2.4.3、备注:将请求延迟到窗体创建完成(在 Layout完成之后),在请求和响应的过程中尽量不要使用几何图形方面的变化,尽可能错开请求或者响应的消息队列
    3、优化呈现(Rendering):
        3.1、重绘区域:
            3.1.1、如果一个对象的属性发生了变化,哪么它的边框是“重绘区”
            3.1.2、可视化“显示重绘区域”(调试播放器适用)
            3.1.3、对象重叠区域的重绘
        3.2、缓存位图保持原有状态(cachePolicy):
            3.2.1、如果缓存位图为true,对象和它的子对象都呈现为屏幕外(内存)视图
            3.2.2、如果对象重叠重绘区和对象没有改变则使用缓存位图
        3.3、缓存位图是一把双刃剑:
            3.3.1、如果对象缓存了位图,当对象改变时开消是昂贵的
            3.3.2、如缓存了位图在应用 resize Effect /resize浏览器窗口时都会损失性能
            3.3.3、建议仅在短时间内缓存位图
        3.4、影响呈现(Rendering)速度的因素:
            3.4.1、重设、重绘区域;建议:重构UI
            3.4.2、缓存位图(帮助/损失)
            3.4.3、所有矢量图重绘区;建议:简化矢量图形状、在重设大小和状态转换过程中隐藏子节点;
            3.4.4、混合文本和矢量图形
            3.4.5、使用剪切遮罩(如加载组合大图剪切应用小图,减少多次图片请求加载)
            3.4.6、合理使用filters(如创建阴影)
            3.4.7、其它后台处理过程(如建议将Effect延迟至后台处理)
    4、其它优化:
        4.1、移除没有使用的UI或者事件监听(或者变成弱应用):
            myViewStack.removeChild(childView);
            childView.removeEventListener("click",clickHandler) ;
        4.2、清除没有被引用或者使用的数据:
            myProperty = null;
            myWebservice.getAddressBook.clear.Result();
        4.3、使用样式:
            4.3.1、改变和重设样式代价最昂贵:
                 StyleManager.styles.Button.setStyle("color",0xff0000);
            4.3.2、内联样式的代价与对象的数量成正比的:
                myVBox.setStyle("color",0xff0000);
            4.3.3、在初始化的过程中尽早的设定样式(在initialize时而不是在createComplete时)初始化设置样式应用使用<mx:Style>标签:
                <mx:Style>Button{color:#0xf0000}</mx:Style>
                <mx:VBox id="myVBox" color="oxffffff"/>
            4.3.4、避免使用setStyle()如确实需要,则应在实例化节点时尽早调用
        4.4、使用内存分析工具(profiling tools)检测资源使用情况查找内存泄露 :
            4.4.1、方法调用频繁
            4.4.2、方法持续时间
            4.4.3、堆栈调用
            4.4.4、对象实例总数
            4.4.5、对象大小
            4.4.6、垃圾收集... ...
        4.5、根据功能模块化动态装载(不要让用户为他可能不会用到的功能模块买单,尽管用户在首次切换时可能需要花费比较多的代价)
    5、减少和压缩SWF体积
        5.1、减少内置资源(如字符集,图片,视频,音频(Embeded)标签)等)的加载;使用外部文件尽量运行时载入而不是编译时嵌入
        5.2、禁止调试,同时删除一些专们为记录调试环境的数据和方法
        5.3、避免引入一些不必要的包和类;
        5.4、使用RSL分离和缓存框架(framework.swc)以减小生成文件体积:




以下是一网络资源记下来参考:
Flex性能优化常用手法总结:
内存释放优化原则
    1. 被删除对象在外部的所有引用一定要被删除干净才能被系统当成垃圾回收处理掉;
    2. 父对象内部的子对象被外部其他对象引用了,会导致此子对象不会被删除,子对象不会被删除又会导致了父对象不会被删除;
    3. 如果一个对象中引用了外部对象,当自己被删除或者不需要使用此引用对象时,一定要记得把此对象的引用设置为null;
    4. 本对象删除不了的原因不一定是自己被引用了,也有可能是自己的孩子被外部引用了,孩子删不掉导致父亲也删不掉;
    5. 除了引用需要删除外,系统组件或者全局工具、管理类如果提供了卸载方法的就一定要调用删除内部对象,否则有可能会造成内存泄露和性能损失;
    6. 父对象立刻被删除了不代表子对象就会被删除或立刻被删除,可能会在后期被系统自动删除或第二次移除操作时被删除;
    7. 如果父对象remove了子对象后没有清除对子对象的引用,子对象一样是不能被删除的,父对象也不能被删除;
    8. 注册的事件如果没有被移除不影响自定义的强行回收机制,但有可能会影响正常的回收机制,所以最好是做到注册的事件监听器都要记得移除干净。
    9. 父对象被删除了不代表其余子对象都删除了,找到一种状态的泄露代码不等于其他状态就没有泄露了,要各模块各状态逐个进行测试分析,直到测试任何状态下都能删除整个对象为止。
内存泄露举例:
    1. 引用泄露:对子对象的引用,外部对本对象或子对象的引用都需要置null;
    2. 系统类泄露:使用了系统类而忘记做删除操作了,如BindingUtils.bindSetter(),ChangeWatcher.watch()函数时候完毕后需要调用ChangeWatcher.unwatch()函数来清除引用 ,否则使用此函数的对象将不会被删除;
    类似的还有MUSIC,VIDEO,IMAGE,TIMER,EVENT,BINDING等。
    3. 效果泄露:当对组件应用效果Effect的时候,当本对象本删除时需要把本对象和子对象上的Effect动画停止掉,然后把Effect的target对象置null; 如果不停止掉动画直接把 Effect置null将不能正常移除对象。
    4. SWF泄露:要完全删除一个SWF要调用它的unload()方法并且把对象置null;
    5. 图片泄露:当Image对象使用完毕后要把source置null;(为测试);
    6. 声音、视频泄露: 当不需要一个音乐或视频是需要停止音乐,删除对象,引用置null;
内存泄露解决方法:
    1. 在组件的REMOVED_FROM_STAGE事件回掉中做垃圾处理操作(移除所有对外引用(不管是VO还是组件的都需要删除),删除监听器,调用系统类的清除方法)
    先remove再置null, 确保被remove或者removeAll后的对象在外部的引用全部释放干净;
    2. 利用Flex的性能优化工具Profile来对项目进程进行监控,可知道历史创建过哪些对象,目前有哪些对象没有被删除,创建的数量,占用的内存比例和用量,创建过程等信息;
总结:关键还是要做好清除工作,自己设置的引用自己要记得删除,自己用过的系统类要记得做好回收处理工作。 以上问题解决的好的话不需要自定义强制回收器也有可能被系统正常的自动回收掉。

摘自:http://blog.csdn.net/xingjunli/archive/2010/01/14/5186058.aspx


分享到:
评论

相关推荐

    Flex应用程序开发

    ### Flex应用程序开发:深入理解与实践 #### 一、Flex概览 Flex是Adobe Systems Incorporated推出的一款用于构建高质量的Rich Internet Applications(RIA)的开源框架。它基于Flash平台,允许开发者使用标准的Web...

    Flex 应用程序性能: 改善客户端应用程序和服务器性能的技巧与技术

    本文旨在探讨提升 Flex 应用程序性能的方法和技术,分为客户端和服务器端两个方面。 #### 客户端性能优化 ##### 缩短启动时间 启动时间对于用户感知的性能至关重要。为了减少启动时间,可以通过以下几种方法来实现...

    flex企业应用开发实践.pdf

    ### Flex应用性能优化 性能优化是任何企业级应用开发中不可忽视的环节。本书的最后一部分着重讨论了Flex应用的性能优化策略,包括但不限于代码优化、资源加载策略、缓存机制、网络通信优化等方面。通过这些优化措施...

    Flex应用程序性能改善技巧

    Flex应用程序性能改善技巧是开发人员在构建富互联网应用时必须关注的重要领域。Flex作为一个基于ActionScript和Flash Player的开发框架,提供了丰富的用户界面组件和强大的数据处理能力,但如果不加以优化,可能会...

    企业应用FLEX开发实战

    开发者将了解到如何使用这些工具创建第一个简单的FLEX应用程序。 第二章至第四章可能深入讲解组件库的使用,包括各种UI组件如按钮、文本框、数据网格等,以及如何自定义组件以满足特定需求。此外,这一部分还会涉及...

    ArcGIS API for Flex应用开发

    - **定义与背景**:ArcGIS API for Flex 是一款由 Esri 提供的用于构建高性能地理信息系统 (GIS) 的开发工具包。它允许开发者利用 Adobe Flex 技术快速创建复杂的地理空间应用程序。Flex 是一种开源的软件开发工具包...

    17个典型的Flex应用案例介绍

    本篇文章将深入探讨17个典型的Flex应用案例,这些案例展示了Flex在不同领域的广泛应用和卓越性能。 1. **Vook com**:Vook是一款结合了文字、视频和互动元素的创新阅读体验平台。Flex的多媒体功能在此得以充分发挥...

    flex性能测试PPT

    - 分析系统业务流程和架构,了解Flex应用的工作原理。 - 明确用户需求,分解测试目标,例如响应时间、并发用户数等。 - 定义性能测试的概念,如在线用户、并发用户和资源使用率。 2. **创建脚本**: - 使用工具...

    Flex 桌面应用

    此外,对于Flex的桌面应用,开发者还需要熟悉Adobe AIR,它是Adobe提供的一个跨平台运行时环境,允许Flex应用运行在用户的桌面系统上,就像原生应用一样。开发者可以利用AIR提供的本地文件系统访问、网络通信以及...

    loadrunner for flex引用包

    在进行Flex应用的性能测试时,LoadRunner是一个不可或缺的工具。LoadRunner for Flex是HP公司推出的一款强大性能测试工具,专为Flex应用程序...在实际工作中,还要不断学习和实践,以应对日益复杂的Flex应用性能挑战。

    避免Flex RSL重复load 提高module加载性能的swc

    Flex RSL(Runtime Shared Libraries)是Adobe Flex框架中的一种机制,用于优化应用程序的加载和运行时性能。RSLs是一组预编译的库,包含了常见的Flex组件和类,允许多个应用程序共享这些资源,减少网络传输的数据量...

    FLEX企业应用开发实战PDF

    9. **部署和发布**:最后,书会讲解Flex应用程序的打包、部署和发布策略,包括在不同的服务器平台(如Tomcat、IIS)上的部署方法。 10. **最佳实践和案例分析**:书中还会包含一些企业级应用开发的最佳实践,以及...

    flex性能优化文档

    Flex性能优化是一个重要的主题,...总之,优化Flex应用性能涉及多个层面,包括资源加载策略、代码结构优化和内存管理。通过综合运用这些技巧,可以显著改善Flex应用的启动速度和整体响应性,从而提供更流畅的用户体验。

    ArcGIS Server Flex 应用视频

    10. **性能优化**:探讨如何提高Flex应用的性能,包括合理使用缓存、减少网络请求、优化地图渲染等技巧。 通过这些视频教程,开发者不仅可以学会如何构建基本的Flex地图应用,还能掌握高级功能的实现,从而充分利用...

    Flex第一步

    - **性能优化**:通过改进编译器和运行时环境,提高应用性能。 - **跨平台拓展**:虽然Flex已经支持多种平台,但仍在探索更多可能性。 - **社区支持**:尽管Adobe宣布不再积极发展Flex,但开源社区仍然活跃,持续为...

    Flex 性能简介.pdf

    #### Flex应用程序的性能改善 Flex之所以能够在服务器端表现出色,部分原因在于其独特的架构设计。与传统的Web应用程序相比,Flex应用程序通过减少与服务器之间的交互次数,减轻了服务器端的负担。此外,Flex利用了...

    flex_与JSP性能比较分析

    这种设计模式使得Flex应用程序即使面对高并发请求也能保持较低的服务器CPU占用率,进而提高整体系统的响应速度和吞吐量。 #### 七、总结 综上所述,通过对比Flex与JSP在相同应用场景下的性能表现,我们可以得出...

    flex应用anychart

    而AnyChart,作为一个跨平台的JavaScript图表库,能够无缝地与Flex结合,为Flex应用提供高质量、高性能的图表功能。 集成AnyChart到Flex应用的过程并不复杂。在提供的压缩包文件“AnyChartFlexComponent.swc”中,...

    Flex 应用内存泄露的分析与诊断

    Flex 应用内存泄露的分析与诊断主要集中在 Flex 应用程序中由于内存管理不当...通过谨慎处理对象引用、正确管理事件监听器和利用调试工具,可以有效地减少 Flex 应用中的内存泄露问题,从而提高应用的性能和稳定性。

    Flex 性能优化全集

    通过对Adobe Flex应用程序进行细致的性能优化,不仅可以提升用户体验,还能有效减少服务器负载,提高整体系统效率。开发者应该密切关注应用的实际运行情况,适时调整优化策略,以应对不断变化的需求和技术环境。

Global site tag (gtag.js) - Google Analytics