Angularjs 如何优化使用ng repeat和ng include构建的嵌套表加载?

Angularjs 如何优化使用ng repeat和ng include构建的嵌套表加载?,angularjs,Angularjs,目前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

目前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>

{{cell.data}
意外的单元格类型

使用Angular,您可以通过创建自定义指令来优化可能需要优化的内容。如果遇到嵌套ng重复的性能问题,可能是时候使用自己的指令以编程方式构建表的DOM元素了。这将大大加快速度,减少开销,因为由自定义指令创建的$watchs和scope将更少。

谢谢。没错,但我觉得指令有点反模式。当您从html转换为指令时,您将从声明式和简短的代码转换为命令式和冗长的代码。虽然我不确定。不管怎样,我们决定对网格使用闭包,对其他所有东西使用角度闭包。是的,一般来说,优化有时会感觉像反模式。我知道我对前一段时间编写的图形处理引擎做了一些性能调整,代码从简单易懂变成了完整的意大利面条。。。但是速度快了好几倍。每次我试着进去清理它时,我都无法绕过一些使它“脏”的优化。哈哈。。。哦,好吧。我想这就是我们得到报酬的工作。