数据绑定对象的角度性能限制:我现在放弃AngularJS吗？

Question

在本文下面的讨论中,Renan Cakirerk评论说,根据Angular开发人员的说法,Angular UI性能可能会降低到2000个数据绑定对象之外.

这让我认真考虑用Angular追求我的非平凡应用程序是一个好主意.一个好的应用程序毕竟是一个快速的应用程序 我不想花几个月的时间来建造一些最终被咬的东西.

我有兴趣听听Angular 非平凡应用程序构建者的消息

• 人们成功用于处理性能下降的一般策略
• 基于我的要求和设计模式的具体策略(下)
• 我是否应该在项目的早期阶段完全放弃Angular以避免迫在眉睫的"停止"

等待可能的"ES6电源和性能Object.observe未来"和未来版本的风险太高,这可能会让开发人员对$apply/ $digest循环进行更细粒度的控制,从而$scope可以触发有限的脏检查"(Brian Frichette提到这些在同一个讨论中.)我想知道复杂的应用程序今天在v1.2.15上可以很快.

关于我的问题/解决方案的更多细节

我正在构建一个具有非常丰富功能的应用程序,其中每个对象(例如用户)具有许多可以对其执行的功能,例如将它们链接到其他用户,更改其属性,向其发送消息等.

该规范在此对象上有超过20个函数:可放置区域,上下文敏感的工具栏图标(例如,当您选择某些文本时,Word具有出现在鼠标附近的迷你工具栏的方式).

这些选项需要隐藏和显示基于某些鼠标操作,如悬停和拖动,并依赖于特定用户对象的状态(许多图标和拖放选项将在某些情况下显示而不是其他情况)

现在,我开始构建它的方法是将每个单独的图标和拖放区域,拖动句柄等作为单独的数据绑定元素与ng-show(或类似)键入我们的自定义业务逻辑.

例如

<user>
  <menuicon1 ng-show="business-logic1"/>
  <menuicon2 ng-show="business-logic2"/>
  <dropzone1 ng-show="business-logic3"/>
  <draghandle ng-show="business-logic4"/>
  <changessavedicon ng-show="business-logic5"/>
  .....
</user>

假设上面的2000理论极限是可怕的,那么20个自定义可显示的可隐藏位意味着100个用户(使用惊人的ng-repeat显示)是我的极限!也许显示100是愚蠢的,我可以通过过滤等攻击这个,但在我看来,除以20大大减少了我的对象"带宽".当老板希望增加10个功能时会发生什么？

如果我以jQuery方式执行此操作,我可能会根据需要构建和销毁许多图标和菜单项.每个悬停/拖动的响应性稍差,但至少应用程序可以按比例缩放对象的数量.

Answer 1

2014 年的答案应该是：是的，现在就放弃 Angular。

与 Urban_racoons 所说的相反，页面上很容易有 100-200 个用户可以看到并与之进行有意义交互的项目。

例如，7 天显示屏上的 Google 日历在我的显示器上显示 18 小时的 1/2 小时块。如果ng-class每人各有一只，那么您就有 252 块手表。但如果您想要所有 Google 日历功能，那么您想要的就很多了ng-clicks。ng-if

另一方面，在我自己的应用程序中，只有标题、一些面板、左侧导航菜单（约 5 个项目）和详细信息窗格（详细信息窗格中包含约 5 个选项卡和约 30 个项目），我有超过 3000 个手表（感谢到ng-stats）。

不仅如此，仅渲染这 30 个项目就需要超过 2 秒 - Chrome devtools Profiles 选项卡显示所有controllersBoundTranscludes、nodeLinkFns 和ngWatchIfActions （ng-if本来应该是救世主，但我每个项目都有一些，所以有时间评估这些并渲染结果相加）。

问题是，如果我这样做了，我就该死了（ng-if到处放 s 意味着显示隐藏的项目时重新渲染时间很ng-if慢，甚至ng-infinite-scroll很迟缓），如果我不这样做，我就该死了（把ng-shows 意味着手表加起来不可接受的水平）。

所以我不得不诉诸一系列的技巧和优化，例如

• ng-if/ng-show黑客
• ng-show通过使用和 禁用其下方范围内的所有手表来缓存内容“屏幕”，ng-repeat类似于Radek 的技术
• 使用viewport-watch仅启用列表中显示项目的监视

在我看来，这些优化应该出现在 Angular 核心中。

2016 年更难的问题已经写好了 1000 行代码：我现在应该放弃 AngularJS 吗？