使用 AngularJS 的 ng-repeat 渲染使 IE11 变慢/冻结 [英] IE11 slow / freeze with AngularJS's ng-repeat rendering

问题描述

目前我有一个非常微妙的问题需要用 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 仍然太慢.:(

 <tab ng-repeat="application in applications track by application.name"><标签标题><em class="fa fa-clock-o fa-fw"></em>{{ 应用名称 }}</tab-heading><div><!-- 开始表响应--><div class="table-responsive"><table class="table table-bordered table-hover table-striped"><头><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tr ng-repeat="item in application.items track by item.itemid"><td></td><td></td><td></td><td></td><td></td><td></td><!-- 图形或历史列--><td></td></tr></tbody>

<!-- END 表响应-->

</tab></tabset>

解决方案

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

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

Currently I have a very sublte problem to solve with IE11 and AngularJS.

My page consists of two nested ng-repeat to create a tabset with a table inside any tab.

Here the code: http://pastebin.com/0fffPz5Z

In the code, each application's object have around 1.000 item's related objects. With a Chrome, Safari and Mozilla I have no problem, all is superfast! With IE11 the page go slow and IE11 show me the message of a too slow page's script....

I've created an IE11 interface's profiling with this result: https://www.dropbox.com/s/y5xuystxht6gjkr/IE11-interface-profiling.png?dl=0

Is this another IE11's bug??? Sorry for my English and thanks in advance for any suggestion.

Edit: Currently (for "debug" purpose) I removed all td's content... the IE11 is still too slow. :(

                <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 has limits for rendering bindings per page (In some articles you can find that it is around 2000 bindings). Currently you've just faced this situation. The reason why chrome and Mozilla work smoothly is that DOM operations for them are optimized better. In order to improve your performance try to:

• avoid using sort in ng-repeat (sort it before insertions)
• Use one-time bindings (:: syntax)
• Remove unnecessary watches
• Optimize digest cycles
• Use pagination
• Replace angularjs ng-repeat with ReactJs components (in case of really big amount of data)

这篇关于使用 AngularJS 的 ng-repeat 渲染使 IE11 变慢/冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！