CODEWITHSUNDEEP
javascriptangularjsrendering
Vic
Vic

Reputation: 133

Angular: rendering a lot of DOM Elements faster

I work on a calendar application which is developed with Angular and I'm exposed to a rendering performance problem. I took a look to a lot of subjects about the rendering performance of the ngRepeat, I tried bindonce but I'm still stuck.

I created a plunker to show you my problem. http://plnkr.co/edit/UHVC5a?p=preview - it reproduces the logic of my application.

Let says it's a calendar with 5 rows (one per week) with 150 events per row (I know that's a big number but for someone very busy it's common).

As you can see, the rendering is very slow. Is it something that I can improve? Do you have any thoughts?

Thanks you very much.

Upvotes: 4

Views: 2870

Answers (1)

Michal Charemza
Michal Charemza

Reputation: 27012

I notice that the template for each event uses a few bindings. A few suggestions:

  • It might be worth investigating if using something like https://github.com/pasvaz/bindonce would speed it up.

  • Or you could set the HTML of each element manually in the directive, rather than using bindings.

  • There is an asynchronous function getColor in each directive use. Does this mean there will be 150*5 = 750 calls to the server? It might be worth re-thinking that architecture, as that is quite a lot, and likely to take time no-matter how fast the Angular becomes

  • If those asynchronous calls are indeed necessary/don't each call the server, then you could only change the $scope variables in all the instances of the directives at once / or grouped, say by adding the promises to an array, periodically checking it to run some functions on the resolved ones, or using $q.all.

Upvotes: 2

Related Questions