javascript - What is the maximum size of data that can be stored in angularjs scope? Performance of the application with heavy s

admin管理员组

文章数量:1344611

Previously i have done some small small examples with Angular JS. I have a doubt on angular $scope in terms capability to store large data sets & performance with large data sets.

Example: In hotel booking systems(like ) , Usually Hotel APIs(Hotelbeds, DOTW...) gives hundreds of hotels for Bangkok, Dubai, Spain... etc like popular destinations.

My Question is,

1. Can Application work without loosing performance when we assign this much data to Angular Scope?

2. What is the maximum size of data that can be stored in Angular Scope?

Previously i have done some small small examples with Angular JS. I have a doubt on angular $scope in terms capability to store large data sets & performance with large data sets.

Example: In hotel booking systems(like http://www.hotels.) , Usually Hotel APIs(Hotelbeds, DOTW...) gives hundreds of hotels for Bangkok, Dubai, Spain... etc like popular destinations.

My Question is,

1. Can Application work without loosing performance when we assign this much data to Angular Scope?

2. What is the maximum size of data that can be stored in Angular Scope?

• javascript
• angularjs
• angularjs-scope

Share Improve this question Follow asked Jul 16, 2013 at 7:20 HearamanHearaman 8,7461313 gold badges4444 silver badges5858 bronze badges 4

• I think this depends of your puter memory man, I haven't use angular still, but I guess they are just storing the data in array or javascript object, which store directly into the memory, I think the problem is more how slow puter can process dom events and dom refresh with LARGE amount of data, than how much you can store. – ncubica Commented Jul 18, 2013 at 14:27
• 1 From my experience, the problem isn't really the size of data but the number of active bindings you have on it. In particular having ng-repeats on huge array will kill your performances. – Yann Commented Jul 18, 2013 at 15:26
• Agree with other ments here, the issue is more to do with creating thousands of DOM elements rather than data or memory footprint from data. If you use things like the ng-grid where virtualization is used only a sub-set of the entire set is ever shown, and so for a list of 2000 items you may only have 50 sets of DOM elements to represent rows (rather than 2000), as you scroll the DOM elements are re-used instead of being destroyed/recreated. Another issue that could be encountered is having lots of watches firing but this is unlikely to cause a bottleneck. – shaunhusain Commented Jul 19, 2013 at 4:18
• Data payloads if you inspect the network tab in the chrome inspector (F12) it will show you the payload size, this is largely dependent on how you structure your data and filter/group it before sending it back from the server, but generally I see data sizes ranging from a few kB to a couple of MB at most. If your data set is larger than this consider pression and other options. Angular or not this data is stored in the browser memory and can consume all of a systems memory if unchecked. – shaunhusain Commented Jul 19, 2013 at 4:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9 +50

In my experience when you work with a large amount of DOM nodes, each one containing several DOM nodes, sooner or later your application performances will be affected: it just happens to all javascript client side applications bacause it depends on your puter cpu and ram.

To avoid the problem it's a best pratice to work with small amount of data in your view and, of course, there are few techniques like infinite scrolling that help reaching the purpose. In general you should show in your view few dom nodes each time a user make an action (like scrolling, page changing, or filtering).

See this interesting article: AngularJS Virtual Scrolling

If you want to check an angularjs application performaces use Batarang

I remend that you stay under 2000 watchers for performance reasons.

There are several ways to count how many you have, but the easiest for a beginner is to use the Angular Watchers Chrome extension.

本文标签：