关于 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 样式的显示。

    • 就我个人而言，我可以使用上述方法渲染数千个屏幕元素，而不会显着降低性能。我从来不需要暂停观察者，听起来很难维护。我个人不建议这样做。

    相关讨论