angularjs - 如何优化使用 ng-repeat 和 ng-include 构建的嵌套表负载？

Question

目前 Chrome 会在大约 6 秒内加载大小为 40x15 的表格。它比 goog.editor.Table 慢得多。我需要至少减少两次加载时间。

<script type="text/ng-template" id="grid_item_renderer.html">
<span ng-switch on="cell.type">
    <textarea ng-switch-when="simple" class="cell-text-area simple-cell" ng-model="cell.data">{{cell.data}}</textarea>
    <span ng-switch-when="grid">
        <table class="declarative-grid-table" border="1" bordercolor="#CCC" cellspacing="0" tabindex="0">
            <tr ng-repeat="row in cell.data.grid" >
                <td ng-repeat="cell in row" class="declarative-grid-cell">
                    <span ng-include="'grid_item_renderer.html'"></span>
                </td>
            </tr>
        </table>
    </span>
    <span ng-switch-default>unexpected cell type</span>
</span>
</script>
<table class="declarative-grid-table" border="1" bordercolor="#CCC" cellspacing="0"  tabindex="0">
<tr ng-repeat="row in declarativeGrid" class="declarative-grid-row">
    <td ng-repeat="cell in row" class="declarative-grid-cell">
        <span ng-include="'grid_item_renderer.html'"></span>
    </td>
</tr>
</table>

Answer 1

使用 Angular，您可以通过创建自定义指令来优化您可能需要的任何内容。如果您遇到嵌套 ng-repeats 的性能问题，可能是时候推出您自己的指令，以编程方式构建表的 DOM 元素。它会更快，开销也更少，因为您的自定义指令创建的 $watches 和范围会更少。