数据角性能极限绑定对象：我现在放弃AngularJS？ [英] Angular performance limit on data bound objects: Do I abandon AngularJS now?
问题描述
在下面<一的讨论href=\"http://$c$c.tutsplus.com/tutorials/3-reasons-to-choose-angularjs-for-your-next-project--net-28457\">this文章有由雷南Cakirerk到，根据一个角度开发，角UI性能可能会降低超出了2000年的数据绑定对象的影响的评论。
In the discussion below this article there's a comment by Renan Cakirerk to the effect that, according to an Angular developer, Angular UI performance might degrade beyond 2000 data-bound objects.
这让我认真考虑是否追求我的角度不平凡的应用程序是一个不错的主意。出色的应用是一个快速的应用程序毕竟。我并不想投资建设个东西在年底咬伤。
It made me seriously consider whether pursuing my non-trivial app with Angular is a good idea. A good app is a fast app after all. I don't want to invest months building something to be bitten at the end.
我感兴趣的是从角听到的非普通关于
I am interested in hearing from Angular non-trivial app builders about
- 常规策略的人已经成功地用于处理性能下降
- 针对策略
- 是否我应该干脆在早期阶段的项目弃角，以避免迫在眉睫的磨停止
根据我的要求和设计模式（如下图）
这是太大的风险，等待可能的ES6功率和PERF恩赐像 Object.observe 和未来版本的可能会更多的开发者细粒度的控制在 $适用 / $消化周期，使 $范围 - 有限脏检查可以触发（布赖恩Frichette在同样的讨论中提到这些）。我想知道，复杂的应用程序可以在今天快上v1.2.15。
It's too much of a risk to wait for the possible "ES6 power and perf boons like Object.observe" and future versions that will might developers more fine-grained control on the $apply / $digest cycle so that $scope-limited dirty-checking can be triggered" (Brian Frichette mentions these in the same discussion). I want to know that complex apps can be fast today on v1.2.15.
我的问题/解决方案的更多细节...
More details about my problem/solution...
我要建一个应用程序具有非常丰富的功能，其中每个对象（如用户）有很多功能可以做它，例如，将它们链接到其他用户，更改其属性，向他们发送消息等。
I'm building an app with very rich functionality, where each object (eg user) has many functions that can be done to it, eg linking them to other users, changing their properties, sending them messages, etc.
该规范有向上的这个对象的20种功能：投掷的区域，上下文敏感的工具栏图标（如道路Word有迷你工具栏显示在鼠标靠近时，你选择一些文本）
The spec has upwards of 20 functions on this object: droppable zones, context sensitive toolbar icons (eg the way Word has mini-toolbars that appear near the mouse when you select some text).
这些选项需要隐藏和基于某些鼠标操作表演，喜欢徘徊和拖动，并且依赖于特定的用户对象的状态（很多图标和下降的选项将在某些情况下显示，而不是别人）
These options need to hide and show based on certain mouse actions, like hovering and dragging, and depend on the state of the particular user object (many icons and drop options will show in some circumstances and not others)
现在，我已经一路的开始建设这个是让每个单独的图标拖放区域，拖动手柄等作为与NG-秀（或类似）的独立数据绑定元素这是键入到我们自定义的业务逻辑。
Now, the way I've started building this is to have each individual icon and drop area, drag handle, etc as a separate data-bound element with an ng-show (or similar) that's keyed into our custom business logic.
例如：
<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个自定义showable可隐藏位是指100个用户（使用惊人的NG-重复所示）是我的极限！也许显示100是愚蠢的，我可以用过滤等攻击这一点，但在我看来，20分大大减少了我的对象带宽。而当老板希望会发生什么加10更多的功能？
Assuming the 2000 theoretical limit above is to be feared, then 20 custom showable hideable bits means 100 users (shown using the amazing ng-repeat) is my limit! Maybe showing 100 is silly and I can attack this with filtering etc, but it seems to me that dividing by 20 drastically reduces my object "bandwidth". And what happens when the boss wishes to add 10 more functions?
如果我是这样做的jQuery的方式，我可能会构建，并根据需要摧毁许多图标和菜单项。每悬停/阻力略少响应，但至少该应用程序可以扩展对象数量的方式。
If I were doing this the jQuery way, I'd probably construct and destroy many of the icons and menu items as needed. Slightly less responsive per hover/drag, but at least the app can scale the number of objects that way.
推荐答案
在2014年的答案应该是：是的，现在放弃角
The answer in 2014 should have been: Yes, abandon Angular now.
柜台urban_racoons说的话，很容易有一个页面上100-200项，用户可以看到和有意义的互动。
Counter to what urban_racoons says, it's easy to have 100-200 items on a page that the user can see and meaningfully interact with.
7天显示例如谷歌日历有18个小时的半小时块显示我的显示器上。如果你有一个纳克级为每一个，你有252的手表就在那里。但是你要 NG-点击， NG-如果■如果你希望所有的称誉，谷歌日历功能。
Eg Google calendar on the 7 day display has 18 hours of 1/2 hour blocks showing on my monitor. If you had one ng-class for each one, you've got 252 watches right there. But you want ng-clicks, ng-ifs galore if you want all that Google calendar functionality.
在另一方面，在我自己的应用程序，只有一个头，一些面板，左侧导航菜单（〜5项）和详细信息窗格用〜5个选项卡，并〜在详细信息窗格30个项目，我有> 3000手表（感谢 NG-统计信息）。
On the other hand, in my own app, with only a header, some panels, a left nav menu (~5 items) and detail pane with ~5 tabs and ~30 items in the detail pane, I have >3000 watches (thanks to ng-stats).
不仅如此，渲染只是那些30个项目花费超过2秒 - 铬devtools配置文件选项卡说，这是所有的 controllersBoundTransclude S， nodeLinkFn 和 ngWatchIfAction S（ NG-如果应该是救世主，但我有一个几个每件左右的时间来评估这些和渲染的结果加起来）。
Not only that, rendering just those 30 items takes over 2 seconds - Chrome devtools Profiles tab says it's all the controllersBoundTranscludes, nodeLinkFns and ngWatchIfActions (ng-if was supposed to be the saviour, but I have a few per item so time to evaluate those and render the result adds up).
问题是我该死，如果我（把 NG-如果到处都是指显示由 NG-无限滚动迟缓）和该死的，如果我不（把 NG-节目 s表示手表加起来到不可接受的程度）。
The problem is I'm damned if I do (put ng-ifs everywhere means re-render time when showing the items hidden by the ng-if is slow, and even ng-infinite-scroll is sluggish) and damned if I don't (put ng-shows means the watches add up to unacceptable levels).
所以我不得不求助于一堆黑客和优化技术，如
在
So I am having to resort to a bunch of hacks and optimisations, such as the
-
NG-如果/NG-节目黑客 - 缓存屏用
NG-节目与NG-重复并禁用所有手表它下面范围的东西，如拉狄克的
技术 - 使用视手表在列表上显示的项目只启用手表
内容
ng-if/ng-showhack- caching "screens" of content by using
ng-showwithng-repeatand disabling all the watches on scopes below it with something like Radek's technique - use viewport-watch to only enable watches on displayed items in lists
在我看来，这应该的优化来的角核心。
In my opinion these optimisations should come in the Angular core.
在2016年更难回答的问题，与已经写入code的行1000：我应该放弃现在AngularJS？
The harder question in 2016, with 1000s of lines of code already written: Should I abandon AngularJS now?
这篇关于数据角性能极限绑定对象：我现在放弃AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
