角NG-重複靜態內容（性能問題）

我使用一個<tbody>內嵌套ng-repeat生成動態內容的表（該表的內容是由後臺發送，是不可預測的）角NG-重複靜態內容（性能問題）

由於這表已經在一個自己使用ng-repeat的指令中，如果我想引起任何改變，我可以用一個新的id請求一個新表。

問題是，當這個表大約有1000行長，或者如果我在界面中加載了多個表時，一切都會變得遲緩。

出於測試目的，我創建的表HTML這樣的：

for(var line = 0; line < $scope.content.tableBody.length; line++){ 
    testTable += "<tr>" 
    for(var cell = 0; cell < $scope.content.tableHead.length; cell++){ 
     testTable += "<td style='background-color: WHITE'>" 
     testTable += $scope.content.tableBody[line][$scope.content.tableHead[cell]].value 
     testTable += "</td>" 
    } 
    testTable += "</tr>" 
}

和使用ng-bind-html來證明這一點。性能差異巨大。當然，我不想放鬆角度之間的所有緩解（如ng-class,ng-style,ng-if），但似乎所有由ng-repeat生成的範圍都會導致性能下降。我試圖用一個綁定::,track by $index等，但沒有成功。

是否可以使用ng-repeat，並且在加載所有內容後，只需將其內容設爲「靜態」即可？（與我的範圍，$ watcher等）

來源

2017-03-16 DMurta

這是角1個缺點之一：因爲它是高層次的，它的速度慢......我不相信還有很多工作要做，在這裏，除了切換到角2或React :) –

如果列表是靜態的，請使用一次性綁定。它極大地提高了性能。使用它就像'

' –

是的，一次性綁定有幫助。另外，你可以嘗試使用$ compile將指令呈現給靜態HTML。 – estus

在嘗試通過一次性綁定和track by $index ng-repeat中的一些調整來解決我的問題後，我找到的解決方案是連接一個字符串導致tbody與相同我之前在2個嵌套的ng-repeats中使用的邏輯。然後使用我在另一篇文章中發現的指令將該字符串「嵌入」到我的html中。

delph.directive('compile', ['$compile', function ($compile) { 
return function(scope, element, attrs) { 
    var listener = scope.$watch(
     function(scope) { 
      // watch the 'compile' expression for changes 
      return scope.$eval(attrs.compile); 
     }, 
     function(value) { 
      // when the 'compile' expression changes 
      // assign it into the current DOM 
      element.html(value); 

      // compile the new DOM and link it to the current 
      // scope. 
      // NOTE: we only compile .childNodes so that 
      // we don't get into infinite loop compiling ourselves 
      $compile(element.contents())(scope); 

     } 
    ); 


}; 
}]);

內存消耗過大的改善

來源

2017-03-21 22:09:06 DMurta

角NG-重複靜態內容（性能問題）

回答

相關問題