創建自定義組件時的性能問題。需要TIPS

Question

我正在將excel桌面應用程序轉換爲flex。很明顯，excel具有更好的網格功能，但它看起來更好，所以我試圖手動重新創建它，而不是使用spark advanceddatagrid/datagrid。爲此，我創建了大量的組，並將每個單元格作爲嵌入標籤的邊框容器。它看起來不錯，但是在我遍歷我的arraycollection時繪製每個組件時需要花費一些時間。

的代碼類似於此

for each(var factor:Factor in this._model.assessment.factors) 
      { 
       //draw factor header 
       var factorHeaderBackground:BorderContainer = new BorderContainer(); 
       factorHeaderBackground.setStyle("backgroundColor", "0x2d4a6c"); 
       factorHeaderBackground.width = 1370; 
       factorHeaderBackground.height = 30; 

       var factorNameLabel:Label = new Label(); 
       factorNameLabel.percentWidth = 100; 
       factorNameLabel.setStyle("verticalAlign", "middle"); 
       factorNameLabel.setStyle("horizontalAlign", "middle"); 
       factorNameLabel.setStyle("textAlign", "center"); 
       factorNameLabel.setStyle("fontSize", "18"); 
       factorNameLabel.setStyle("color", "white"); 
       factorNameLabel.text = factor.name; 
       factorNameLabel.verticalCenter = 1; 

       factorHeaderBackground.addElement(factorNameLabel) 
       this.chart.addElement(factorHeaderBackground); 
       for each (var metric:Metric in factor.children) 
       { 
        var headerGroup:HGroup = new HGroup(); 
        headerGroup.gap = 0; 
        /** 
        * this adds the first section of the header (far left) 
        * */ 
        var criteriaColumn:VGroup = new VGroup(); 
        criteriaColumn.gap = 0; 

        var topCriteriaHeader:HGroup = new HGroup(); 
        topCriteriaHeader.gap = 0; 
        var bottomCriteriaHeader:HGroup = new HGroup(); 
        bottomCriteriaHeader.gap = 0; 

        //draw top section of criteria header 
        var metricNumberBackground:BorderContainer = new BorderContainer(); 
        metricNumberBackground.setStyle("backgroundColor", "0x6699CC"); 
        metricNumberBackground.width = 70; 
        metricNumberBackground.height = 30; 

        var metricNumberLabel:Label = new Label(); 
        metricNumberLabel.percentWidth = 100; 
        metricNumberLabel.setStyle("verticalAlign", "middle"); 
        metricNumberLabel.setStyle("horizontalAlign", "middle"); 
        metricNumberLabel.setStyle("textAlign", "center"); 
        metricNumberLabel.text = 'Metric ' + metric.measureNumber; 
        metricNumberLabel.verticalCenter = 1; 

        metricNumberBackground.addElement(metricNumberLabel); 

        var metricNameBackground:BorderContainer = new BorderContainer(); 
        metricNameBackground.setStyle("backgroundColor", "0x6699CC"); 
        metricNameBackground.width = 300; 
        metricNameBackground.height = 30; 

        var metricNameLabel:Label = new Label(); 
        metricNameLabel.percentWidth = 100; 
        metricNameLabel.setStyle("verticalAlign", "middle"); 
        metricNameLabel.setStyle("horizontalAlign", "middle"); 
        metricNameLabel.setStyle("textAlign", "center"); 
        metricNameLabel.setStyle("fontSize", "16"); 
        metricNameLabel.setStyle("fontWeight", "bold"); 
        metricNameLabel.text = metric.name; 
        metricNameLabel.verticalCenter = 1; 

        metricNameBackground.addElement(metricNameLabel); 
        topCriteriaHeader.addElement(metricNumberBackground); 
        topCriteriaHeader.addElement(metricNameBackground); 

        criteriaColumn.addElement(topCriteriaHeader); 

        //draw bottom section of criteria header 
        var blankBackground:BorderContainer = new BorderContainer(); 
        blankBackground.setStyle("backgroundColor", "0x6699CC"); 
        blankBackground.width = 70; 
        blankBackground.height = 30; 

        var criteriaNameBackground:BorderContainer = new BorderContainer(); 
        criteriaNameBackground.setStyle("backgroundColor", "0x6699CC"); 
        criteriaNameBackground.width = 300; 
        criteriaNameBackground.height = 30; 

        var criteriaNameLabel:Label = new Label(); 
        criteriaNameLabel.percentWidth = 100; 
        criteriaNameLabel.setStyle("verticalAlign", "middle"); 
        criteriaNameLabel.setStyle("horizontalAlign", "middle"); 
        criteriaNameLabel.setStyle("textAlign", "center"); 
        criteriaNameLabel.setStyle("fontSize", "14"); 
        criteriaNameLabel.setStyle("fontWeight", "bold"); 
        criteriaNameLabel.text = "Criteria"; 
        criteriaNameLabel.verticalCenter = 1; 

        criteriaNameBackground.addElement(criteriaNameLabel); 
        bottomCriteriaHeader.addElement(blankBackground); 
        bottomCriteriaHeader.addElement(criteriaNameBackground); 

        criteriaColumn.addElement(bottomCriteriaHeader); 

        /** 
        * this adds the second section of the header 
        * */ 
        var currentColumn:VGroup = new VGroup(); 
        currentColumn.gap = 0; 

        var bottomCurrentHeader:HGroup = new HGroup(); 
        bottomCurrentHeader.gap = 0; 

        //draw top section of current header 
        var currentBackground:BorderContainer = new BorderContainer(); 
        currentBackground.setStyle("backgroundColor", "0x6699CC"); 
        currentBackground.width = 300; 
        currentBackground.height = 30; 

        var currentLabel:Label = new Label(); 
        currentLabel.percentWidth = 100; 
        currentLabel.setStyle("verticalAlign", "middle"); 
        currentLabel.setStyle("horizontalAlign", "middle"); 
        currentLabel.setStyle("textAlign", "center"); 
        currentLabel.setStyle("fontSize", "18"); 
        currentLabel.setStyle("fontWeight", "bold"); 
        currentLabel.text = 'Current'; 
        currentLabel.verticalCenter = 1; 
        currentBackground.addElement(currentLabel); 

        currentColumn.addElement(currentBackground); 

        //draw bottom section of current header 
        var ratingBackground:BorderContainer = new BorderContainer(); 
        ratingBackground.setStyle("backgroundColor", "0x6699CC"); 
        ratingBackground.width = 60; 
        ratingBackground.height = 30; 

        var ratingLabel:Label = new Label(); 
        ratingLabel.percentWidth = 100; 
        ratingLabel.setStyle("verticalAlign", "middle"); 
        ratingLabel.setStyle("horizontalAlign", "middle"); 
        ratingLabel.setStyle("textAlign", "center"); 
        ratingLabel.setStyle("fontSize", "10"); 
        ratingLabel.setStyle("fontWeight", "bold"); 
        ratingLabel.text = "Rating"; 
        ratingLabel.verticalCenter = 1; 

        ratingBackground.addElement(ratingLabel); 
        bottomCurrentHeader.addElement(ratingBackground); 

        var manualUpDownBackground:BorderContainer = new BorderContainer(); 
        manualUpDownBackground.setStyle("backgroundColor", "0x6699CC"); 
        manualUpDownBackground.width = 60; 
        manualUpDownBackground.height = 30; 

        var manualUpDownLabel:Label = new Label(); 
        manualUpDownLabel.percentWidth = 100; 
        manualUpDownLabel.height = 30; 
        manualUpDownLabel.setStyle("verticalAlign", "top"); 
        manualUpDownLabel.setStyle("horizontalAlign", "middle"); 
        manualUpDownLabel.setStyle("textAlign", "center"); 
        manualUpDownLabel.setStyle("fontSize", "10"); 
        manualUpDownLabel.setStyle("fontWeight", "bold"); 
        manualUpDownLabel.text = "Manual" + "\nUp/Down"; 
        manualUpDownLabel.verticalCenter = -6; 

        manualUpDownBackground.addElement(manualUpDownLabel); 
        bottomCurrentHeader.addElement(manualUpDownBackground); 

        var standardWeightingBackground:BorderContainer = new BorderContainer(); 
        standardWeightingBackground.setStyle("backgroundColor", "0x6699CC"); 
        standardWeightingBackground.width = 60; 
        standardWeightingBackground.height = 30; 

        var standardWeightingLabel:Label = new Label(); 
        standardWeightingLabel.percentWidth = 100; 
        standardWeightingLabel.height = 30 
        standardWeightingLabel.setStyle("verticalAlign", "top"); 
        standardWeightingLabel.setStyle("horizontalAlign", "middle"); 
        standardWeightingLabel.setStyle("textAlign", "center"); 
        standardWeightingLabel.setStyle("fontSize", "10"); 
        standardWeightingLabel.setStyle("fontWeight", "bold"); 
        standardWeightingLabel.text = "Standard" + "\nWeighting"; 
        standardWeightingLabel.verticalCenter = -6; 

        standardWeightingBackground.addElement(standardWeightingLabel); 
        bottomCurrentHeader.addElement(standardWeightingBackground); 

        var customWeightingBackground:BorderContainer = new BorderContainer(); 
        customWeightingBackground.setStyle("backgroundColor", "0x6699CC"); 
        customWeightingBackground.width = 60; 
        customWeightingBackground.height = 30; 

        var customWeightingLabel:Label = new Label(); 
        customWeightingLabel.percentWidth = 100; 
        customWeightingLabel.height = 30; 
        customWeightingLabel.setStyle("verticalAlign", "top"); 
        customWeightingLabel.setStyle("horizontalAlign", "middle"); 
        customWeightingLabel.setStyle("textAlign", "center"); 
        customWeightingLabel.setStyle("fontSize", "10"); 
        customWeightingLabel.setStyle("fontWeight", "bold"); 
        customWeightingLabel.text = "Custom" + "\nWeighting"; 
        customWeightingLabel.verticalCenter = -6; 

        customWeightingBackground.addElement(customWeightingLabel); 
        bottomCurrentHeader.addElement(customWeightingBackground); 

        var scoreBackground:BorderContainer = new BorderContainer(); 
        scoreBackground.setStyle("backgroundColor", "0x6699CC"); 
        scoreBackground.width = 60; 
        scoreBackground.height = 30; 

        var scoreLabel:Label = new Label(); 
        scoreLabel.percentWidth = 100; 
        scoreLabel.setStyle("verticalAlign", "middle"); 
        scoreLabel.setStyle("horizontalAlign", "middle"); 
        scoreLabel.setStyle("textAlign", "center"); 
        scoreLabel.setStyle("fontSize", "10"); 
        scoreLabel.setStyle("fontWeight", "bold"); 
        scoreLabel.text = "Score"; 
        scoreLabel.verticalCenter = 1; 

        scoreBackground.addElement(scoreLabel); 
        bottomCurrentHeader.addElement(scoreBackground); 

        currentColumn.addElement(bottomCurrentHeader); 

        headerGroup.addElement(criteriaColumn); 
        headerGroup.addElement(currentColumn); 
        headerGroup.addElement(rationaleColumn); 
        headerGroup.addElement(futureColumn); 
        headerGroup.addElement(futureRationaleColumn); 

        this.chart.addElement(headerGroup); 

        var criteriaLength:int = metric.children.length; 
        var criterionCounter:int = 0; 

        for each (var criterion:Criterion in metric.children) 
        { 
         criterionCounter += 1; 

         var criteriaGroup:HGroup = new HGroup(); 
         criteriaGroup.gap = 0; 

         //adds name column 
         var criterionNumberBackground:BorderContainer = new BorderContainer(); 
         criterionNumberBackground.setStyle("backgroundColor", criterion.isCritical ? "0xFF9933" : "0xFFFFFF"); 
         criterionNumberBackground.width = 70; 
         criterionNumberBackground.height = 60; 

         var criterionNumberLabel:Label = new Label(); 
         criterionNumberLabel.percentWidth = 100; 
         criterionNumberLabel.setStyle("textAlign", "center"); 
         criterionNumberLabel.setStyle("horizontalAlign", "middle"); 
         criterionNumberLabel.setStyle("verticalAlign", "middle"); 
         criterionNumberLabel.setStyle("fontSize", "12"); 
         criterionNumberLabel.text = criterion.measureNumber; 
         criterionNumberLabel.verticalCenter = 1; 

         criterionNumberBackground.addElement(criterionNumberLabel); 
         criteriaGroup.addElement(criterionNumberBackground); 

         //adds criteria description column  
         var criterionDescriptionBackground:BorderContainer = new BorderContainer(); 
         criterionDescriptionBackground.width = 300; 
         criterionDescriptionBackground.height = 60; 

         var criterionDescriptionLabel:Label = new Label(); 
         criterionDescriptionLabel.percentWidth = 100; 
         criterionDescriptionLabel.setStyle("textAlign", "left"); 
         criterionDescriptionLabel.setStyle("horizontalAlign", "middle"); 
         criterionDescriptionLabel.setStyle("verticalAlign", "middle"); 
         criterionDescriptionLabel.setStyle("fontSize", "12"); 
         criterionDescriptionLabel.text = criterion.description; 
         criterionDescriptionLabel.verticalCenter = 1; 

         criterionDescriptionBackground.addElement(criterionDescriptionLabel); 
         criteriaGroup.addElement(criterionDescriptionBackground); 

         //add current standard rating column 
         var criterionCurrentStandardRatingBackground:BorderContainer = new BorderContainer(); 
         criterionCurrentStandardRatingBackground.setStyle("backgroundColor", criterion.score.currentStandardRatingType.color().toString()); 
         criterionCurrentStandardRatingBackground.width = 60; 
         criterionCurrentStandardRatingBackground.height = 60; 

         var criterionCurrentStandardRatingLabel:Label = new Label(); 
         criterionCurrentStandardRatingLabel.percentWidth = 100; 
         criterionCurrentStandardRatingLabel.setStyle("verticalAlign", "middle"); 
         criterionCurrentStandardRatingLabel.setStyle("horizontalAlign", "middle"); 
         criterionCurrentStandardRatingLabel.setStyle("textAlign", "center"); 
         criterionCurrentStandardRatingLabel.setStyle("fontSize", "12"); 
         criterionCurrentStandardRatingLabel.text = criterion.score.currentStandardRatingType.toString(); 
         criterionCurrentStandardRatingLabel.verticalCenter = 1; 

         criterionCurrentStandardRatingBackground.addElement(criterionCurrentStandardRatingLabel); 
         criteriaGroup.addElement(criterionCurrentStandardRatingBackground); 

         //add current manual/upgrade combobox column     
         var criterionCurrentManualUpgradeDowngradeComboBox:ComboBox = new ComboBox(); 
         criterionCurrentManualUpgradeDowngradeComboBox.width = 60; 
         criterionCurrentManualUpgradeDowngradeComboBox.height = 60; 
         criterionCurrentManualUpgradeDowngradeComboBox.dataProvider = rateTypeComboBoxItems; 
         BindingUtils.bindProperty(criterionCurrentManualUpgradeDowngradeComboBox, "selectedItem", criterion.score, "currentUpgradeDowngradeRatingType"); 
         BindingUtils.bindProperty(criterion.score, "currentUpgradeDowngradeRatingTypeFromComboBox", criterionCurrentManualUpgradeDowngradeComboBox, "selectedItem"); 
         criterionCurrentManualUpgradeDowngradeComboBox.verticalCenter = 1; 
         criterionCurrentManualUpgradeDowngradeComboBox.labelField = "Text"; 

         criteriaGroup.addElement(criterionCurrentManualUpgradeDowngradeComboBox);        

         var totalGroup:HGroup = new HGroup(); 
         totalGroup.gap = 0; 

         //draw last row for each criterion 
         if(criterionCounter == criteriaLength) 
         { 
          //stores weights for current/future 
          var totalCurrentStandardWeight:Number = metric.AggregateWeights(true, true); 
          var totalCurrentCustomWeight:Number = metric.AggregateWeights(true, false); 
          var totalFutureStandardWeight:Number = metric.AggregateWeights(false, true); 
          var totalFutureCustomWeight:Number = metric.AggregateWeights(false, false); 
          //adds total column 
          var criterionTotalBackground:BorderContainer = new BorderContainer(); 
          criterionTotalBackground.setStyle("backgroundColor", "0xa6a6a6"); 
          criterionTotalBackground.width = 370; 
          criterionTotalBackground.height = 15; 

          var criterionTotalLabel:Label = new Label(); 
          criterionTotalLabel.percentWidth = 100; 
          criterionTotalLabel.setStyle("textAlign", "center"); 
          criterionTotalLabel.setStyle("horizontalAlign", "middle"); 
          criterionTotalLabel.setStyle("verticalAlign", "middle"); 
          criterionTotalLabel.setStyle("fontSize", "12"); 
          criterionTotalLabel.setStyle("fontWeight", "bold"); 
          criterionTotalLabel.text = metric.name + "Criteria Total"; 
          criterionTotalLabel.verticalCenter = 1; 

          criterionTotalBackground.addElement(criterionTotalLabel); 
          totalGroup.addElement(criterionTotalBackground); 

          //add rating dummy column 
          var criterionRatingFillerBackground:BorderContainer = new BorderContainer(); 
          criterionRatingFillerBackground.setStyle("backgroundColor", "0xa6a6a6"); 
          criterionRatingFillerBackground.width = 60; 
          criterionRatingFillerBackground.height = 15; 

          totalGroup.addElement(criterionRatingFillerBackground); 

          //add manual up/down dummy column 
          var criterionUpDownFillerBackground:BorderContainer = new BorderContainer(); 
          criterionUpDownFillerBackground.setStyle("backgroundColor", "0xa6a6a6"); 
          criterionUpDownFillerBackground.width = 60; 
          criterionUpDownFillerBackground.height = 15; 

          totalGroup.addElement(criterionUpDownFillerBackground); 

          //add current standard weight column 
          var criterionCurrentStandardWeightingTotalBackground:BorderContainer = new BorderContainer(); 
          criterionCurrentStandardWeightingTotalBackground.setStyle("backgroundColor", totalCurrentStandardWeight < 100 ? "0xf4f120" : "0xa6a6a6"); 
          criterionCurrentStandardWeightingTotalBackground.width = 60; 
          criterionCurrentStandardWeightingTotalBackground.height = 15; 

          var criterionCurrentStandardWeightingTotalLabel:Label = new Label(); 
          criterionCurrentStandardWeightingTotalLabel.percentWidth = 100; 
          criterionCurrentStandardWeightingTotalLabel.setStyle("verticalAlign", "middle"); 
          criterionCurrentStandardWeightingTotalLabel.setStyle("horizontalAlign", "middle"); 
          criterionCurrentStandardWeightingTotalLabel.setStyle("textAlign", "center"); 
          criterionCurrentStandardWeightingTotalLabel.setStyle("fontSize", "12"); 
          criterionCurrentStandardWeightingTotalLabel.text = totalCurrentStandardWeight.toString(); 
          criterionCurrentStandardWeightingTotalLabel.verticalCenter = 1; 

          criterionCurrentStandardWeightingTotalBackground.addElement(criterionCurrentStandardWeightingTotalLabel); 
          totalGroup.addElement(criterionCurrentStandardWeightingTotalBackground); 
         } 
         this.chart.addElement(criteriaGroup); 
         this.chart.addElement(totalGroup); 
        } 
       } 
      } 

它結束了在所有的數據迭代後看起來像這樣。約150 - 200行。 enter link description here

我拿出了一些代碼，這樣它的可讀性就更高了，你不必滾動很遠，但是你可以獲得我在這裏所做的一切。有一個更好的方法嗎？因爲我每次迭代創建大量組件，是否甚至有可能讓它更快地執行？任何提示讚賞，在用戶界面方面我不能更快樂，但表現是荒謬的。

Answer 1

我建議使用以下兩種招數：

1. 將可組合的東西到單個獨立的組件（例如每個行作爲成分）。我經歷過，這通常會加速一些事情。

2. 通過創建第一個10-20行（填充可見屏幕）創建快速渲染的幻覺，然後每5-10毫秒創建一行（數字只是爲了給出一個想法，並且它們依賴於你的情況）。這樣您的網頁將保持響應並且顯示更快。

希望它有幫助！

Answer 2

你可以在這裏做的是一個性能測試，以確定一些少量的迭代需要多長時間（以毫秒爲單位獲得調用前後的時間）。找出你可以推進到1/24秒。這就是Flex中幀間的多少時間。對所述行數執行數據網格數據提供程序更新，然後對下一批執行callLater（）。 callLater的字面意思是「在下一幀」

請謹慎操作。由於在Flash幀之間需要發生的所有其他事情，CallLater在未來不會一致。