Angular:渲染大量DOM元素的速度更快

Angular: rendering a lot of DOM Elements faster

本文关键字：元素 速度 DOM Angular      更新时间：2024-02-13

我开发了一个使用Angular开发的日历应用程序，遇到了渲染性能问题。我看了很多关于ngRepeat渲染性能的主题，我尝试了bindonce，但我仍然被卡住了。

我创建了一个plunker来向你展示我的问题。http://plnkr.co/edit/UHVC5a?p=preview-它再现了我的应用程序的逻辑。

假设这是一个有5行（每周一行）的日历，每行有150个活动（我知道这是个很大的数字，但对于非常忙碌的人来说，这很常见）。

正如您所看到的，渲染非常缓慢。这是我可以改进的地方吗？你有什么想法吗？

非常感谢。

我注意到每个事件的模板都使用了一些绑定。几个建议：

  • 如果使用类似https://github.com/pasvaz/bindonce会加快速度。

  • 或者，您可以在指令中手动设置每个元素的HTML，而不是使用绑定。

  • 每个指令使用中都有一个异步函数getColor。这是否意味着将有150*5=750个呼叫到服务器？架构可能值得重新思考，因为这是相当多的，而且无论Angular以多快的速度成为都可能需要时间

  • 如果这些异步调用确实是必要的/不是每次都调用服务器，那么您只能同时/或分组地更改指令的所有实例中的$scope变量，例如，将promise添加到数组中，定期检查它以在已解析的数组上运行一些函数，或使用$q.all。

相关文章：