AngularJS動態表性能

Question

我目前正在爲相當複雜的報表創建一個表。 它工作但性能很差，建表需要4-5s。

---

的要求爲表如下：

1. 表的列被動態地確定。有一組固定的列開始，然後是一個動態部分，然後是另一個固定集。
2. 每個單元的內容也是動態確定的。我的意思不僅僅是單元格的數據發生了變化，而且它呈現的方式也發生了變化。一些細胞簡單地輸出的值，一些提供輸入等

---

的當前溶液工作大致如下：

1. 定義內置並加載到該列的表的 scope。

2. ng-repeat每排叫了過來，然後在每列

3. 在每個小區內我撥打電話到一個特殊的指令，以顯示該單元格，其編譯另一個指令。

---

這種特殊的指令看起來是這樣的，它編譯單元格的（編程確定）的指令，並取代了「cellDirective」節點的內容：

directives.directive('cellDirective', ['$compile', function ($compile) { 

    return { 
     link: function (scope, elem, attrs) { 
      scope.$watch(
       function (scope) { 
        return scope.$eval(attrs.cellDirective); 
       }, 
       function (value) { 
        // profiler suggests that this is the bottleneck 
        elem.html(value); 
        $compile(elem.contents())(scope); 
       } 
      ) 
     } 
    } 

}]); 

而且模板調用它：

<tr ng-repeat="rows in rows"> 
    <td ng-repeat="column in columns"> 
     <div cell-directive="column.getDirective(row)"></div> 
    </td> 
</tr> 

---

我面臨的問題是性能不佳。生成表需要4-5秒，這是一個問題，因爲用戶可以選擇過濾顯示的數據（包括更改列），並且每次執行任何操作時都必須經歷延遲。我也擔心大數據集會發生什麼。

我已經做了一些挖掘和發現：

1. 對於〜100行中的應用程序結合手錶。似乎建議的限制是2000，所以顯然我已經完結了。
2. 在Chrome的探查見到這種情景，我可以看到的執行時間的大部分花費指令編譯步驟內發生

---

我正在尋找任何建議改善這一性能表。

我曾考慮過爲整行構建一個模板並在一個步驟中編譯它，但一直未能成功實現這樣的系統。

感謝您的任何幫助。

Answer 1

有幾件事情，你可以做，以減少觀察者，同時建立你的表。下面是一些建議：在任何不需要總是觀看（例如，也許name字段將不會每id改變，在這種情況下，你可以使用{{::item.name}}）

1）一次性綁定。

2）使用表庫。 UI-Grid非常受歡迎，目前正在進行大量的開發。

3）Virtualization可能會有幫助，但只有100行，它不會是一個很大的好處。

對於過濾，只需在行上重複使用trackBy就可以大大提高重新渲染元素的時間。

你還提到在動態列之前和之後有幾個靜態列。考慮從ngRepeat中抽取出來，以便它們不必檢查每個摘要循環。這將僅消除數百名觀察者。