簡單是美——提升您Flex應用性能

    在RIA應用開發過程中,性能一直是我們關注的一個重點;生成swf文件的大小,內存、cpu資源消耗,事件響應等,都將影響用戶在瀏覽或者使用過程中的體驗;

    這就要求我們在平時的開發過程中養成良好的編程習慣,合理使用組件,避開一些較消耗資源的因素。本文將針對這些問題展開一些討論:
    1、初始化對象時優化:
        1.1、可能的話使用AS來創建你的組件/類(通常通過代碼繪制和創建的實例運行效率更高(如使用graphics繪制圖形))
        1.2、為property分配初始化默認值:(如:
        1.3、連接對象:
            1.3.1、將新的對象添加到已顯示的列表中
            1.3.2、綁定事件處理函數:;
            1.3.3、數據綁定:;
            1.3.4、監聽Effect效果:;
        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屬性優化啟動時間及順序(如下:順序依次創建)
            
            //順序創建組件,想插隊的話設置creationIndex
                
            

            
                
            

            

            1.5.3、謹慎使用:
                1.5.3.1、不推薦使用創建立重復組件
                     糟糕的:
                            
                                
                                

                            

                 推薦:
                            
                                
                                    
                                

                            

                        

                說明:直接創建組件放在Scroll中效率更高
    2、優化你的布局和組件大小:
        2.1、定義:
            盡可能在初始化和創建的過程中為所有組件設置其位置和大小
            
                
                    
                    
                

                
            

        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時)初始化設置樣式應用使用標簽:
                Button{color:#0xf0000}
                
            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)以減小生成文件體積:




以下是一網絡資源記下來參考:

內存釋放優化原則
    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來對項目進程進行監控,可知道歷史創建過哪些對象,目前有哪些對象沒有被刪除,創建的數量,占用的內存比例和用量,創建過程等信息;
總結:關鍵還是要做好清除工作,自己設置的引用自己要記得刪除,自己用過的系統類要記得做好回收處理工作。 以上問題解決的好的話不需要自定義強制回收器也有可能被系統正常的自動回收掉。




These are some ways to reduce the code or memory, select an author of the network.


1. Avoid the new operator when creating Arrays
    var a = [];
NOT:
    var a = new Array();
2. Arrays are expensive to create, do so conservatively
    var vanityCollection01 : Array = new Array();
    var vanityCollection02 : Array = new Array();
    var vanityCollection03 : Array = new Array();
    var vanityCollection04 : Array = new Array();
3. Fastest way to copy an array:
    var copy : Array = sourceArray.concat();
4. Setting values in Arrays is slow
    employees.push( employee );
    employees[2] = employee;
5. Getting values from Arrays is twice as fast as setting
    var employee : Employee = employees[2];
6. Use static for properties methods that do not require an object instance
    StringUtils.trim( "text with space at end " );
    Class definition:
    package
    {
    public final class StringUtils
    {
    public static function trim( s : String ) : String
    {
    var trimmed : String;
    // implementation... 
    return trimmed;
    }
    }
    }
7. Use const for properties that will never change throughout the lifecycle of the application
    public const APPLICATION_PUBLISHER : String = "Company, Inc.";
8. Use final when no subclasses need to be created of a class
    public final class StringUtils
9. Length of method/variable names doesn’t matter in ActionScript 3.0 (true in other langs)
    someCrazyLongMethodNameDoesntReallyImpactPerformanceTooMuch();
10. One line assignments DO NOT buy any performance (true in other langs)
    var i=0; j=10; k=200;
11. No difference in memory usage between an if statement and a switch statement
    if ( condition )
    {
    // handle condition 
    }
IDENTICAL MEMORY USAGE:
    switch ( condition ) {      
    case "A":          
    // logic to handle case A      
    break;            
    case "B":          
    // logic to handle case B       
    break;
    }
12. Rank your if statements in order of comparisons most likely to be true
     if ( conditionThatHappensAlot ) {
    // logic to handle frequently met condition 
    } else if ( conditionThatHappensSomtimes )  {      
    // handle the case that happens occaisonally } else  {      
    // handle the case that doesn’t happen that often 
    }
13. AVM promotes int to Number during calculations inside loops (VM has been changing, from 9 to 10, so int, uint and number conversions aren’t as slow as they used to be.)
14. Resolve issues of promotion, unknown, or incorrect object types
15. Use uint sparingly, it can be slow (VM has been changing, from 9 to 10, so int, uint and number conversions aren’t as slow as they used to be.)
     var footerHex : uint = 0x00ccff;
16. Use integers for iterations
    (var i: int = 0; i < n; i++)
NOT
    for (var i: Number = 0; i < n; i++)
17. Don’t use int with decimals
    var decimal : Number  = 14.654;
NOT:
     var decimal : int  = 14.654;
18. Multiply vs. Divide: instead of 5000/1000 use: 5000*0.001
19. Locally store function values in for and while statements instead of repeatedly accessing them
     for (..){ a * 180 / Math.PI; }
    declare: toRadians = a*180/Math.PI; 
    outside of the loop
20. Avoid calculations and method calls in loops
     var len : int = myArray.lengh;  
     for (var i=0;i<len;i++){}
NOT:
     for (var i=0;i< myArray.lengh;i++){ }
21. Use RegEx for validation, use string methods for searching
     // postal code validation example using regular expressions
    private var regEx:RegExp = /^[A-Z][0-9][A-Z] [0-9][A-Z][0-9]$/i;
    private function validatePostal( event : Event ) : void
    {      
    if( regEx.test( zipTextInput.text ) )
    {
    // handle invalid input case 
    }
    // search a string using String methods 
    var string : String = "Search me";
    var searchIndex : int = string.indexOf( "me" ); 
    var search : String = string.substring(searchIndex,searchIndex+2);
22. Reuse objects to maintain a “memory plateau” DisplayObjects, URLLoader objects
23. Follow the Flex component model:
     createChildren(); commitProperties(); updateDisplayList();
24. Only use Datagrids as a last resort (make sure you can’t implement in a regular List first)
25. Avoid Repeaters for scrollable data
26. Avoid the setStyle() method (One of the most expensive calls in the Flex framework)
27. Using too many containers dramatically reduces the performance of your application
    
    
    
    
    
    
    

    
    
    
    
    

    

    

    

    

28. You do not need to always use a container tag as the top-level tag of components Totally valid component, no top level container needed:
    <mx:Image xmlns:mx="//www.adobe.com/2006/mxml"
    source="avatar.jpg" width="200" height="200" />
29. Remove unnecessary container wrappers to reduce container nesting
30. Avoid: The VBox container inside an tag, (eliminates redundancy)
    
    
    
    

    
    
    
    
    

    

31. Avoid: VBox container inside an mx:Application tag, (eliminates redundancy)
    
     
    
    
    

NOT:
    
     
    
    
    
    

    

32. Set the recycleChildren property to true to improve a Repeater object’s performance (re-uses previously created children instead of creating new ones)
    
    <![CDATA[
    [Bindable]         
    public var repeaterData : Array = ["data 1", "data 2"];
    ]]>
    

    
    
    

33. Keep framerate set at 60 fps or lower
    
    <mx:Application xmlns:mx=//www.adobe.com/2006/mxml  
    frameRate="45">
    
34. Avoid multiple display manipulations per frame
35. Code against ENTER_FRAME events instead of Timer events
    public function onEnterFrame( event : Event ) : void
    { }
    private function init() : void {
    addEventListener( Event.ENTER_FRAME, onEnterFrame );
    }
NOT:

    public function onTimerTick( event : Event ) : void
    {
    } 
    private function init() : void {      
        var timer : Timer = new Timer();
        timer.start();
        timer.addEventListener( TimerEvent.TIMER, onTimerTick );
    }
36. To defer object creation over multiple frames use:
    
37. Alpha = 0 is not the same as visible = false (Objects marked invisible are passed over)
    loginButton.visible = false; 
    NOT:
    loginButton.alpha = 0;


來源:Richard_jun的CSDN博客

上一篇: 史上最全ajax全套張巖林

下一篇: 能說明你的JS技術很爛的五個原因

分享到: 更多
赛车6码平刷 北京pk10官方投注平台 天津时时开奖客户端 5分快3计划软件哪个好用 彩票1.998双面盘 篮球比分直播网360 重庆时时现场开奖结果软件 福建时时助手 快三三期计划软件下载 ag动物狂欢赌博 重庆时时开奖结果记录 七星彩开奖结果今天今晚 多赢人工计划 重庆时时彩到底有多假 七星彩开奖走势图表 后三包胆什么意思