I just figured what's slowing down entire page.
I have a directive that updates date, based on Resig's prettyDate jquery plugin, showing in convenient format how long ago the event took place... The directive itself build around the angular's sample that they use on the documentation page here's the sample.
it works perfectly if you have a few elements on the page, but once you put more it slows down the entire page, because it's constantly updating the time, even if you put longer interval between the updates it still will update simultaneously all the elements.
Can you guys suggest any solution to that? Is it possible somehow to update them asynchronously or I know it sounds silly like in a different thread or something like that.
How do people generally solve that, how do you update thousands of elements without sacrificing performance?
.
Do you need it to update every second? How about every minute instead?
Instead of having each directive run its own timer, create a timerService. Inject this service into each directive. Have the directive $watch a service property (e.g., currentTime) for change, and update its view when it changes.
If you don't want all of the dates updating at the same time, you could create an array of timers inside the timerService (and stagger when you update each element of the array) and have each directive's link function select a random entry from the array to watch.