当前位置: 首页 > 面试题库 >

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

仲智
2023-03-14
问题内容

目前,我有一个非常微妙的问题要用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(如果确实有大量数据)


 类似资料:
  • 问题内容: 我有一个用于渲染表单元格的指令(请参阅我在这里如何编译它的方法,基本上是在[Angular.js指令模板中使用父/继承作用域中的变量,现在在两个s中使用,一个用于行,一个对于列,所以基本上 包含50行和8列的列,对(渲染)性能产生了很大的影响(无论如何还是很明显的)。 所以我一直在寻找一种改善它的方法。首先,我尝试摆脱对列的内部重复,创建一个在内部对列进行迭代的方法,找到它们的模板,创

  • 问题内容: 我正在尝试将$ sce.trustAsHtml()与ng- repeat中的对象属性一起使用。结果是HTML完全空白。不过,使用ngSanitize可以正确输出HTML。 顺便说一下,我正在使用AngularJS v1.3.0-beta.3。不知道是否有错误或我做错了什么。 问题答案: 您不能在表达式中使用(除非是的属性),因为表达式是在的上下文中求值的。 最干净的方法是使用。 第二种

  • 问题内容: 嗨,我有一个简单的ng-repeat-start和end用例,并且工作正常,当我想添加一个内部ng-repeat时出现了问题。这是我的代码 内部ng-repeat到td元素中不起作用,在检查html源代码时看到ngRepeat注​​释,但未创建td元素。 我的丑陋的解决方法(假设我知道该向量的大小)是: 问题答案: 从那时起,我不确定是否使用角度1.1.6,并且在1.1.5或1.0.7

  • 问题内容: 渲染模板后如何运行方法?我要设置和之后,我需要使用JQuery进行更改(例如,在模板内容的DOM中)。正在“之前”渲染工作(模板的DOM尚不可用)。谢谢。 问题答案: 创建在链接函数中运行代码的指令。构建模板后,将调用链接功能。 请参阅ng-click以获取想法。

  • 问题内容: 我知道如何在AngularJS中创建 视图 条件,该条件将根据条件显示或隐藏dom元素: 但是如何创建确定是否渲染div 的 渲染 条件? 问题答案: 针对angularjs 1.1.5及更高版本用户的更新(在1.0.7中不受支持): 相关提交:https : //github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7

  • 问题内容: 我花了一段时间试图找到一个优雅的解决方案,而我却找到了一个“可行”的解决方案,它感觉不是最简单或正确的做事方式。 所以,我的问题是…如何动态加载指令!在某些情况下,以下是我希望我能摆脱它的方式!除了模板加载之外,我没有包含路由或其他任何内容,而是为下面的控制器分配了ng- controller。 app.js template.html 任何人都可以提供的建议将不胜感激,如果我做任何明