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

  • Z时代
  • 2024-01-10
  • 分类：问答

目前，我有一个非常微妙的问题要用IE11和AngularJS解决。

我的页面由两个嵌套的ng-repeat组成，以创建一个选项卡集，其中任何选项卡中都有一个表。

这里的代码：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>

回答：

AngularJs对每页呈现绑定有限制（在某些文章中，您会发现它大约有2000个绑定）。目前，您刚刚遇到这种情况。chrome和Mozilla能够顺利运行的原因是，针对它们的DOM操作得到了更好的优化。为了提高性能，请尝试：

  • 避免在ng-repeat中使用sort（在插入之前对其进行排序）

  • 使用一次性绑定（::语法）

  • 删除不必要的手表

  • 优化摘要周期

  • 使用分页

  • 用ReactJs组件替换angularjs ng-repeat（如果确实有大量数据）

以上是 IE11使用AngularJS的ng-repeat渲染缓慢/冻结 的全部内容， 来源链接： utcz.com/qa/404426.html

回到顶部