与AngularJS的NG-重复渲染IE11慢/冻结 [英] IE11 slow / freeze with AngularJS's ng-repeat rendering

问题描述

目前我有一个非常sublte问题IE11和AngularJS解决。

我的页面由两个嵌套的NG-重复创建标签集的任何标签内的表。

在这里，code： http://pastebin.com/0fffPz5Z

在code，每个应用程序的对象大约有1.000项的相关对象。
随着浏览器，Safari浏览器和Mozilla我没有问题，一切都是超快！随着IE11的页转到慢，IE11告诉我太慢页的剧本的消息....

我创建了一个IE11接口的这个结果分析：
https://www.dropbox.com/s/y5xuystxht6gjkr /IE11-interface-profiling.png?dl=0

这是另一个IE11的错误？对不起，我的英语和事先的任何建议表示感谢。

编辑：目前（对于调试的宗旨）我删除了所有TD的内容......在IE11仍然太慢。 :(

 ＆LT;标签集NG秀=applicationsLoading！＆GT;
                ＆LT;标签NG重复=＆GT由application.name应用程序的轨道;
                    ＆LT;制表标题＆GT;
                        ＆LT; EM类=发发时钟-O FA-FW＆GT;＆LT; / EM＆GT; {{ 应用名称 }}
                    ＆LT; /制表标题＆GT;
                    ＆LT; D​​IV＆GT;
                        ＆LT;！ -  START表响应 - ＆GT;
                        ＆LT; D​​IV CLASS =表响应＆GT;
                            ＆LT;表类=表表边框的表格悬停表条纹＆GT;
                                ＆LT;＆THEAD GT;
                                ＆所述; TR＆GT;
                                    百分位＆GT;＆LT; /第i
                                    百分位＆GT;＆LT; /第i
                                    百分位＆GT;＆LT; /第i
                                    百分位＆GT;＆LT; /第i
                                    百分位＆GT;＆LT; /第i
                                    百分位＆GT;＆LT; /第i
                                    百分位＆GT;＆LT; /第i
                                ＆LT; / TR＆GT;
                                ＆LT; / THEAD＆GT;
                                ＆LT;＆TBODY GT;
                                ＆LT; TR NG重复=项application.items轨道由item.itemid＆GT;
                                    ＆LT; TD＆GT;＆LT; / TD＆GT;
                                    ＆LT; TD＆GT;＆LT; / TD＆GT;
                                    ＆所述; TD＆GT;
                                    ＆LT; / TD＆GT;
                                    ＆LT; TD＆GT;＆LT; / TD＆GT;
                                    ＆LT; TD＆GT;＆LT; / TD＆GT;
                                    ＆所述; TD＆GT;
                                    ＆LT; / TD＆GT;
                                    ＆LT;！ - 图或历史记录列 - ＆GT;
                                    ＆所述; TD＆GT;
                                    ＆LT; / TD＆GT;
                                ＆LT; / TR＆GT;
                                ＆LT; / TBODY＆GT;
                            ＆LT; /表＆gt;
                        ＆LT; / DIV＆GT;
                        ＆LT;！ - 茶几响应 - ＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; /标签＆gt;
            ＆LT; /标签集＆GT;
 

解决方案

Angularjs有渲染每页绑定的限制（在一些文章可以发现，这是2000左右绑定）。目前，您刚刚遇到这种情况。之所以浏览器和Mozilla工作的顺利进行是对他们的DOM操作优化的更好。
为了提高你的表现尝试：

• 避免NG重复使用排序（插入排序前吧）


• 使用单向绑定（::语法）


• 删除不必要的手表


• 优化消化周期


• 使用分页


• 替换angularjs纳克重复使用reactjs视图（在数据真正的大量的情况下）

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 optimized better. In order to improve your performance try to:

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

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