I've got an angular app and I integrated it with UI Bootstrap project. I'm using regular

The modal dialog with dropdown containing 750 records, when one of the items is selected and clicked "Ok" or "Cancel", the modal and the overlay fades out without any delay.

Here's the plunker:Modal dialog with 750 records

If the modal dialog with dropdown containing around 10k+ records, and one of the items is selected from the list. Clicking "Ok" or "Cancel" is not hiding the modal dialog right away, instead I'm having a 8-10 second delay on Chrome, I've not tested on IE yet.

Here's the plunker:Modal dialog with 10k+ records

Question: Why I'm having performance hit with more data?

I've got an angular app and I integrated it with UI Bootstrap project. I'm using regular

The modal dialog with dropdown containing 750 records, when one of the items is selected and clicked "Ok" or "Cancel", the modal and the overlay fades out without any delay.

Here's the plunker:Modal dialog with 750 records

If the modal dialog with dropdown containing around 10k+ records, and one of the items is selected from the list. Clicking "Ok" or "Cancel" is not hiding the modal dialog right away, instead I'm having a 8-10 second delay on Chrome, I've not tested on IE yet.

Here's the plunker:Modal dialog with 10k+ records

Question: Why I'm having performance hit with more data?

• javascript
• jquery
• html
• angularjs
• twitter-bootstrap-3

• 9 10K records!! Are you serious? Which user will navigate through them? It is performance hit. You are rendering 10K <option> nodes. You are having a performance hit, because the browser needs to maintain those 10K <option> nodes and render them. BTW 750 <option> are also way to impractical, from usability perspective. – Sarbbottam Commented Jul 30, 2014 at 21:20
• 1 Dude your question has bee famous :P facebook./bluecollared/photos/… – Praful Bagai Commented Aug 5, 2014 at 7:00
• Haha, wow. I took that screenshot and posted it on twitter saying I got a little chuckle. I didn't expect it to get passed around like that. Sorry orif :P – ChevCast Commented Aug 10, 2014 at 5:03

3 Answers 3

You are slowing the whole entire browser down by grabbing the DOM by the neck and pouring 10,000 <option> nodes down its throat. You need to lazy load your data somehow. Ever noticed on sites like Twitter, Facebook, and others that when you scroll to the bottom of the page it will begin loading more records from the server? Good apps will start to garbage collect old records that have been scrolled up as well.

When you scroll through your Facebook news feed it's not loading all your friends post since 2007 into the browser all at the same time. Once a maximum number of posts exists in the DOM Facebook will start removing the oldest ones you scrolled up to make room for more and grab fresh posts from the server so you can continue scrolling. You can even see your browser scroll bar jump up as you scroll down because more posts are being added to the DOM.

No browser is going to be able to handle that much data. The browser is not a database. I'm amazed your plunker with 10k records is as performant as it is! Haha. A dropdown is not what you want to display that data. You're going to have to sit down and think of a better way to show that data to the user. My first thought is to provide a filterable list that initially contains the top 25 most selected options or something, then typing in a search field causes it to load a new list from the server that matches the search criteria. Only you will know what your users will actually want, but I assure you it's not a dropdown list with 10k+ options.

Example:

Notice how the browser scroll bar jumps up a bit when it gets to the bottom. Twitter gets to the bottom and then loads more data to scroll through. It will eventually start cleaning up data at the top of the page as well if I scroll far enough.

Modern browsers can handle a lot, but 10,000+ <option> nodes is pushing it overboard.

The browser can handle a large number of values in a dropdown list, but a dropdown list isn't meant for such a task. Not to mention the users will have a hard time selecting an appropriate value, even if you sort them alphabetically.

You would be much better off using an input text box instead of a dropdown.

jQueryUI has some nice autoplete features that would improve not only the performance of your web application, but also make the user experience much more bearable. I would any day prefer to type out one of the 10,000 options provided to me than search for them in a dropdown using a mouse and select them.

Here's an example on jsfiddle with ~8.5k records for a performance test.

Let me quickly tell you few points:

1. It is a usability bug to scroll through 10K records. Consider someone going through 10K options and selecting the one which they want. Not a good idea.

2. Performance issue:

   • If the options were rendered from a back-end in a traditional way (non-Angular way) then it would just take time to load but after that the performance won't be such an issue.
   • Since, you are using AngularJS with ng-options, the options are populated in the front-end and you have all the data in Angular's scope. To perform, two-way binding, Angular always does a dirty-checking in each 'digest cycle' which loops through each and every data element in $scope and causes that delay.

Solution:

1. Use Select2's "Loading Remote Data". Select2 is a jQuery based replacement for select boxes.
2. Consider using the AngularUI's Select2 wrapper instead of directly using it.