关于 angularjs:大表中 Angular 性能的策略?

Strategies for Angular Performance in Large Table?

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

我对页面进行了很多改进以添加更多信息,现在由于观察者过多,我遇到了性能问题。整页摘要频繁出现,观察者数以千计,导致一些交互操作有几秒的延迟。

我已经使用了 :: ("one-time-binding") 语法进来。一次性绑定在这些情况下没有意义。

我已经提出了一个解决方案,该解决方案涉及禁用旧行上的观察者,因为在某一点之后,我们可以猜测特定行将不再更新(一旦所有构建器都转移到处理最近的更改)。我正在使用类似于这个页面的东西,有一个 suspendable 指令,可以在事件发生时从一行中删除观察者。

我在使用暂停观察者的方法时遇到了几个问题

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

    我的问题:

  • 除了我正在做的事情(一次性绑定和禁用观察者)之外,还有什么其他的性能策略会有所帮助吗?

  • 其他人如何在 Angular 中解决此类问题,或者 Angular 是否真的不适合这种高密度信息显示? (以前使用 jQuery 实现的类似页面运行得更快,因为一旦添加了一行,它就几乎不用管它了,它只是坐在 DOM 中,每次新数据进入时不会产生任何额外成本)

  • 我意识到我使用的是旧版本的 Angular,而 Angular2 的性能应该更好。较新版本中的哪些特定功能可能有助于解决这些问题?


  • 没有代码或示例很难给出直接的答案,但这里有一些建议可以帮助你

  • 运行 NgStats 并查看您的观察者数量以及您的摘要循环的速度。这将有助于集中精力。
  • 一次性绑定是个好主意。如果您仍然看到这方面的性能问题,我会查看您的 ng-repeat 代码。
  • 使用 track by 改进 ng-repeat
  • 确保您永远不会绑定到函数,即 ng-repeat="$ctrl.mySortedData()"{{$ctrl.getTitle()}},因为它会使摘要循环变慢。
  • 有趣的是,一些开发人员认为 ng-bind 的性能优于把手
  • 如果您还没有,请转到与 Angular 组件绑定的一种方式,它会有所帮助
  • 这是一种蛮力方法,但我发现它有时会有所帮助:注释掉页面的部分以查看哪些特定部分导致速度最慢(请参阅#1)。一旦你确定了这些区域,你就可以把时间集中在那里。
  • 减少观察者的数量是性能的关键。它可以像使用 ng-switch 而不是 3 ng-ifs 一样简单。
  • 与 Angular 无关,但浏览器渲染表格本身的速度很慢,如果可能,请考虑移至 div css 样式的显示。
  • 就我个人而言,我可以使用上述方法渲染数千个屏幕元素,而不会显着降低性能。我从来不需要暂停观察者,听起来很难维护。我个人不建议这样做。