大表中角度表现的策略?

时间:2017-11-14 16:13:01

标签: angularjs performance

我正在开发一个使用AngularJS v1.5.11显示大型数据表的项目 - 它是一个连续构建系统,它显示每个更改的行的表格。源控制。这些列是一些静态"静态"比如有关更改的信息,以及一些动态列,它们显示了各种自动化构建器/测试程序的当前状态。该页面从构建服务器轮询几个不同的REST端点,并使用来自许多不同构建机器的当前结果更新页面。

我对该页面进行了一些改进以添加其他信息,现在我因为观察者太多而遇到了性能问题。整页摘要经常发生,观察者数量达到数千,导致一些交互操作有几秒钟的延迟。

我已经在适用的情况下使用::("一次性绑定")语法,但观察者最重要的用途是显示构建/测试结果以及那些需要的列随着新数据的进入而更新。在这些情况下,一次性绑定没有意义。

我已经提出了一个解决方案,其中涉及禁用旧行上的观察者,因为在某一点之后我们可以猜测某个特定行不会再被更新(一旦所有构建者都转移到处理更近期的变化)。我使用类似this page的东西,有一个suspendable指令,可以在事件中从一行中删除观察者。

我有一些问题,我有暂停观察者的方法

  1. 有时这些旧行确实获得了与我们的启发式相反的新数据,该启发式停用该行,例如:有人返回并手动重新运行旧版更改。然后该行无法显示最新数据
  2. 有一些互动" ng-click"无法在已停用的行上运行的功能。
  3. 我遇到的另一个问题是,目前该表仅限于有限数量的行,但我希望它在用户向下滚动时自动添加行("无限滚动")所以他们可以查看旧数据。这将大大增加行数,从而增加观察者的性能问题。

    我的问题:

    1. 除了我正在做的事情(一次性绑定和禁用观察者)之外,是否还有其他任何性能策略?

    2. 其他人如何在Angular中处理这样的问题,或者Angular是否真的不适合这种高密度信息显示? (使用jQuery的类似页面的先前实现运行得更快,因为一旦它添加了一行,它几乎不会单独存在,它只是位于DOM中而不会在每次新数据进入时产生任何额外成本)

    3. 我意识到我已经使用了旧版本的Angular,并且Angular2应该更适合性能。新版本中哪些具体功能可能有助于解决这些问题?

1 个答案:

答案 0 :(得分:0)

很难在没有代码或示例的情况下提供有针对性的答案,但这里有一些建议可以帮助您

  1. 运行NgStats并查看观察者数量和摘要循环的速度。这将有助于您的工作重点。
  2. 一次性绑定是个好主意。如果您仍然看到性能问题,请查看您的ng-repeat代码。
  3. 使用track by
  4. 改善ng-repeat
  5. 确保您永远不会绑定到ng-repeat="$ctrl.mySortedData()"<div>{{$ctrl.getTitle()}}</div>这样的函数,因为它会使摘要周期变慢。
  6. 有些开发人员认为ng-bind的性能优于处理栏
  7. 如果您还没有,请转到使用Angular组件的单向绑定,它会帮助
  8. 这是一种蛮力方法,但我发现它有时会有所帮助:注释掉页面的各个部分,看看哪些特定部分导致最慢的速度(参见#1)。一旦确定了这些区域,就可以将时间集中在那里。
  9. 减少观察人数是提高绩效的关键。它可以像使用ng-switch而不是3 ng-ifs一样简单。
  10. 与Angular无关,但是浏览器表格本身很慢,如果可能,请考虑转移到div + css样式的显示。
  11. 就我个人而言,我能够使用上述方法渲染数千个屏幕元素而不会出现明显的性能下降。我从来没有暂停观察者和听起来像难以维护的东西。我个人不建议这样做。