使用AngularJS的ng-repeat渲染缓慢/冻结IE11

Question

目前我有一个非常明显的问题需要解决IE11和AngularJS.

我的页面由两个嵌套的ng-repeat组成,用于创建一个带有任何选项卡内表格的tabset.

这里的代码:http://pastebin.com/0fffPz5Z

在代码中,每个应用程序的对象都有大约1.000个项目的相关对象.使用Chrome,Safari和Mozilla我没有问题,一切都是超高速的!使用IE11页面变慢,IE11向我显示一个太慢的页面脚本的消息....

我用这个结果创建了一个IE11界面的分析:https://www.dropbox.com/s/y5xuystxht6gjkr/IE11-interface-profiling.png？dl = 0

这是另一个IE11的错误??? 对不起我的英语,并提前感谢任何建议.

编辑:目前(为"调试"目的)我删除了所有td的内容...... IE11仍然太慢.:(

                <tabset ng-show="!applicationsLoading">
                <tab ng-repeat="application in applications track by application.name">
                    <tab-heading>
                        <em class="fa fa-clock-o fa-fw"></em> {{ application.name }}
                    </tab-heading>
                    <div>
                        <!-- START table responsive-->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in application.items track by item.itemid">
                                    <td></td>
                                    <td></td>
                                    <td>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                    </td>
                                    <!-- Graph or History column -->
                                    <td>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- END table responsive-->
                    </div>
                </tab>
            </tabset>

Answer 1

AngularJs对每页渲染绑定有限制(在某些文章中,您可以发现它约为2000个绑定).目前你刚刚面临这种情况.chrome和Mozilla顺利运行的原因是它们的DOM操作得到了更好的优化.为了提高您的表现,请尝试:

• 避免在ng-repeat中使用sort(在插入之前对其进行排序)
• 使用一次性绑定(:: syntax)
• 删除不必要的手表
• 优化摘要周期
• 使用分页
• 用ReactJs组件替换angularjs ng-repeat(如果数据量非常大)