在ng重複事件結束後Dom凍結

Question

我一直在研究這個問題幾個星期，並嘗試了幾個方案來解決它。

首先問題：

我們有有一些重大的性能問題的角度應用（滯後性，抗凍DOM，響應速度慢等）。目前我們有許多嵌套的ng-repeats遍歷數組。 當最大和最長的ng-repeat完成時，我做了一個角度指令來創建'alert'。

ng-repeat會在幾秒鐘內彈出（彈出）以確認它。我可以看到從ng-repeat生成的行出現在DOM上。 奇怪的部分...領先：所以現在DOM已經呈現，並且ng-repeat結束事件被觸發。奇怪的部分是這是頁面最慢的部分。在Chrome的Windows任務管理器中，我可以看到我的瀏覽器實例的內存正在迅速攀升至250,000kb以上，並且我的CPU使用率爲25左右。

頁面現在被凍結，我無法打開更多選項卡或者考慮更多的重複。 EV等待5分鐘以上後，頁面響應速度非常慢，延遲時間至少爲5秒。

---

事情我已經嘗試：

1. Batarang和角度探查。我已經最小化了一些觀察者並添加了許多單向綁定。這對於速度沒有幫助。
2. 刪除大對象（來自ng-repeat）的確會使頁面更快，但會打破頁面。所以這告訴我問題是由於對象的大小？對？
3. 我目前打破了我的重複成一個指令，並在那裏處理它。它仍然非常緩慢。

---

最後的問題：

沒有人有任何想法，爲什麼我的應用程序是緩慢的（幾乎凍結）的NG-重複完成後？此外，有沒有人知道爲什麼一旦我的重複發生，我的Chrome內存資源使用率上升，直到我得到'糟糕，鉻沒有響應窗口'。 （我使用了MemoryProfiler，我很確定它不是內存泄漏。）

*圖像1直接位於ng-repeat的DOM呈現之後。
*拍攝Image1後5分鐘拍攝圖像2。 DOM一直被凍結和不動。 **注意，更高的內存使用情況。**

圖片3是Chrome瀏覽器開發工具問題的特寫檢查。

---

有人問我張貼一些代碼，原來我不是要發佈我的代碼，因爲它相當大，IDK的這將是多麼有用： （我對DOM等元素，這僅僅是個問題代碼，使得它非常緩慢。在重複導致writerRateConfig滯後。）

````

<tbody ng-repeat="rateConfiguration in writerRateConfig track by $index"> 
     <!--<tbody ng-repeat="rateConfiguration in writerSkinnyRate track by $index">--> 
     <tr ng-repeat="rate in ::rateConfiguration.rates"> 

       <td class="one-percent no-wrap centered"> 
        <span ng-show="writer.controlled && $index == 0" title="" data-toggle="tooltip"> 
         <button ng-disabled="licenseDetail != 2" securitydisable actions="LicenseDetailsIncludeExclude" class="btn btn-default btn-icon narrow" data-toggle="modal" ui-sref="SearchMyView.DetailLicense.StepsModal.WritersIsIncluded({config:rate,files:licenseAttachments,recording:recording,writer:writer,product:product,modalSize:'sm',rate:rateConfiguration })"> 
          <span class="icon include" ng-show="rate.writerRateInclude"></span> 
          <span class="icon exclude" ng-show="!rate.writerRateInclude"></span> 
         </button> 
        </span> 
       </td> 
       <td class="fifteen-percent"><span ng-show="$index == 0"><span ng-class="rate.configuration_id | returnConfigurationIcon"></span><span ng-bind="rate.configuration_name"></span><span ng_if="rate.configuration_upc">(<span ng-bind="rate.configuration_upc"></span>)</span></span></td> 
       <td> 
        <span ng-show="writer.controlled && $index == 0" title="{{rate.writersConsentType.description}}" data-toggle="tooltip" data-placement="right"> 
         <button ng-disabled="!buttons.writerConsentBtn" securitydisable actions="LicenseDetailWriterConsent" class="btn btn-default btn-sm" data-toggle="modal" ui-sref="SearchMyView.DetailLicense.StepsModal.WritersConsent({config:rate,files:licenseAttachments,recording:recording,writer:writer,product:product,modalSize:'md' })"> 
          <span ng-bind="rate.writersConsentType.writersConsentType"></span> 
         </button> 
        </span> 
       </td> 
       <td class="fifteen-percent top"> 
        <span ng-show="$index == 0"> 
         <span ng-repeat="status in ::rateConfiguration.specialStatusList" class="badge"> 
          <span ng-if="status.lU_SpecialStatuses"><span ng-bind="status.lU_SpecialStatuses.specialStatus"></span></span> 
          <span ng-if="!status.lU_SpecialStatuses"><span ng-bind="status.specialStatus"></span></span> 
         </span> 
        </span> 
       </td> 
       <td class="fifteen-percent" ng-if="writer.controlled == true"><span ng-show="$index == 0"><span ng-bind="rate.rateType.rateType"></span></span></td> 
       <td class="fifteen-percent" ng-if="writer.controlled == false"><span ng-show="$index == 0">N/A</span></td> 
       <td class="five-percent" ng-if="writer.controlled == false">N/A</td> 
       <td class="five-percent centered" ng-if="writer.controlled == true" ng-show="writer.statPrcentageVisible == true"><span ng-bind="rate.percentOfStat"></span></td> 
       <td class="ten-percent" ng-if="writer.controlled == true" ng-show="writer.escalatedRateVisible == true"><span ng-bind="rate.escalatedRate"></span></td> 
       <td class="five-percent" ng-if="writer.controlled == false">N/A</td> 
       <td class="five-percent" ng-if="writer.controlled == true" ng-show="writer.escalatedRateVisible == true"><span ng-bind="rate.rate"></span></td> 
       <td class="five-percent" ng-if="writer.controlled == true"><span ng-bind="rate.proRataRate"></span></td> 
       <td class="five-percent" ng-if="writer.controlled == false">N/A</td> 
       <td class="five-percent" ng-if="writer.controlled == true"><span ng-bind="rate.perSongRate"></span></td> 
       <td class="ten-percent centered" ng-if="writer.controlled == false">N/A</td> 
       <!--Display License Date, Signed Date or Effective Date--> 
       <td class="ten-percent" ng-show="writer.controlled == true && $index==0"><span ng-bind="rate.licenseDate | timezone | date:'MM/dd/yyyy'"></span></td> 

       <td class="ten-percent centered" ng-show="writer.controlled == true"> 
        <span ng-show="$index==0"> 
         <button ng-disabled="paidQuarterDisabled" securitydisable actions="LicenseDetailsPaidQuarter" class="btn btn-default btn-sm" ui-sref="SearchMyView.DetailLicense.StepsModal.PaidQuarter({licenseId:licenseDetail.licenseId,config:rate,recording:recording,writer:writer,product:product, modalSize:'sm' })"> 
          <span ng-bind="rateConfiguration.paidQuarter"></span> 
         </button> 
        </span> 
       </td> 
      </tr> 

     </tbody> 

````

Answer 1

如果狀態太多可能會導致Angular繼續運行一個消化週期。嘗試將您的邏輯移動到您的控制器。

if(thisdata == that){$scope.showThis = whatever} 

注意：不要讓100米範圍或者是因爲你最終機智同樣的問題。讓他們成爲您重複中每件商品的「價值」。您可以使用angular.forEach來設置控制器中的值。這就是我的全部。希望這可以幫助！快樂的編碼！