`

提高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企业应用开发实战源代码

    9.6 有关提高Flex应用性能的技巧 294 9.7 小结 299 第10章 Flex企业应用开发的其他技术 300 10.1 与网页进行交互 300 10.1.1 通过参数接受外部信息 300 10.1.2 使用navigateToURL方法调用JavaScript 302 ...

    《Flex 4实战》.pdf

    Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。《Flex 4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。《Flex 4实战》从基础讲起,介绍了有关表单和数据的知识...

    Flex4实战完整版(1)

    Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。 《Flex4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。本书从基础讲起,介绍了有关表单和数据的知识,然后...

    《Flex与ActionScript程序开发》[PDF]

    相信读者在学习完本书后,在使用Flex进行组件开发和数据处理、使用Flex高效制作皮肤、将Flex与 Flash紧密结合、使用Flex与服务器端语言通信、对Flex应用进行优化等方面都会有深刻的理解和掌握。  本书的所有实例...

    [Flex与ActionScript.3程序开发].陈爽,付凯.扫描版

    相信读者在学习完《Flex与ActionScript 3程序开发》后,在使用Flex进行组件开发和数据处理、使用Flex高效制作皮肤、将Flex与Flash紧密结合、使用Flex与服务器端语言通信、对Flex应用进行优化等方面都会有深刻的理解...

    Flex4实战-Flex in Action

    Flex已经从原来构建Flash应用程序的一种方式发展成为 一个丰富的体系。Flex 4中引入了新的UI组件,提供了更好 的性能监控,并且大大提高了编译速度。  《Flex 4实战》是一本全面的指南,为Web设计人员和 开发...

    Flex4实战完整版(2)

    Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。 《Flex4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。本书从基础讲起,介绍了有关表单和数据的知识,然后...

    flex 4实战

    Flex已经从原来构建Flash应用程序的一种方式发展成为 一个丰富的体系。Flex 4中引入了新的UI组件,提供了更好 的性能监控,并且大大提高了编译速度。  《Flex 4实战》是一本全面的指南,为Web设计人员和 开发人员...

    FLEX4实战.pdf 中文完整版

    Flex已经从原来构建flash应用程序的一种方式发展成为一个丰富的体系。Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。

    flex3的cookbook书籍完整版dpf(包含目录)

    编译和部署使用RSL的Flex应用程序 25.6节. 在Flex Builder调试中创建和监视表达式 25.7节. 在Flex Builder中安装Ant窗口 25.8节. 为自动通用任务创建一个Ant构建文件 25.9节. 使用mxmlc和Ant编译Flex应用程序 25.10...

    flexibility:Xamarin.Forms FlexLayout示例以多种方式设置样式

    促进扁平化,从而提高性能的视图层次结构 取决于内容的间距和分布的布局 需要适应各种不同屏幕尺寸的布局 FlexLayout和CSS需要Xamarin.Forms 3.0.0+ 我还用略有不同的方法为每个页面设置样式,包括: 直接造型 ...

    优化ADOBE_FLASH_平台的性能

    • 提高 ActionScript 3.0 性能 • 加快呈现速度 • 优化网络交互 • 使用音频和视频 • 优化 SQL 数据库性能 • 基准测试和部署应用程序 此文档重点介绍针对移动浏览器中运行的应用程序的最佳做法。不过,大多数...

    Flex电源模块宣布推出1/4砖式大功率1300W DC-DC转换器

    Flex电源模块(Flex Power Modules)宣布推出一款非隔离式数字IBC(中间总线转换器)DC-DC转换器——BMR490,其输出功率为1300W,采用1/4砖外形尺寸。新型转换器在对价格敏感的设计中结合了极高的功率密度和出色的...

    《ActionScript 3.0 语言和组件参考》中文官方版本,无错

    ■ 一个新增的 ActionScript 虚拟机,称为 AVM2,它使用全新的字节码指令集,可使性能 显著提高 ■ 一个更为先进的编译器代码库,它更为严格地遵循 ECMAScript (ECMA 262) 标准, 并且相对于早期的编译器版本,可...

    actionscript3.0编程

    ■ 一个扩展并改进的应用程序编程接口 (API),拥有对对象的低级控制和真正意义上的面 向对象的模型 ■ 一种基于即将发布的 ECMAScript (ECMA-262) 第 4 版草案语言规范的核心语言 18 ActionScript 3.0 简介 ■ 一个...

    优化网站性能提高网站速度访问速度的14条实践

    ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实现的功能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做...

    优化网站性能的14条军规快速提高网站访问速度

    ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实现的功能。比如Google几乎已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做...

    基于Vue 全家桶实现网易云音乐 WebApp

    vue-router:为单页面应用提供的路由系统,使用了 Lazy Loading Routes 技术来实现异步加载优化性能 vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷 vue-lazyload:实现图片懒加载,节省用户流量,优化...

Global site tag (gtag.js) - Google Analytics