Question

I have been creating a Javascript/jQuery heavy application for Windows Phones and iPhones.
The app is very nearly complete (bar a few little features), however the performance slowly degrades after periods of use on a Windows Phone 7 (IE9 Mango).

It starts off very fast, but after a few DOM changes (appending and removing etc) – Clicking buttons has a bit of lag – then almost a whole second of lag per click a little while after that!

I was just wondering if there was a way to “refresh” the DOM? or some way of resetting the DOM cache (if it even has one?)

Maybe I’m missing something obvious…

Any ideas?

Thanks people!

Answer 1

Since you say performance slowly degrades, there is a good chance this is a memory problem.

You can test your page on desktop to see if you have the similar problem. Here are ways to test:

• http://ajax.dynatrace.com/ajax/en/
  This is the best tool if you want to improve performance in IE. It is complex, but shows an incredible amount of data about your site.

• http://gent.ilcore.com/2011/08/finding-memory-leaks.html You can also use chrome memory profiling, like the article describes.

Also these would improve performance:

• Optimize jQuery selectors
• Don’t make DOM manipulation in loops, store your html in a string or array, and append that to the DOM
• Try techniques mentioned here : http://www.youtube.com/watch?v=mHtdZgou0qU