I have developed my first web application. It is running, and doing what it is supposed to, but some pages have performance issues. I have tuned the application in several areas, but I am completely lost with one issue:
I have a calendar with events, that toggles invisible or visible when a user toggles options. The whole thing is updated client side, with the use of javascript, and JQuery functions. The update is just a little too slow.
I had no experience in debugging this, so I took a guess based on previous reading, that nested tables might be the culprit. I worked for several hours on untangling these as this article describes. Then it was the issue of making the css work again, and then testing. The performance was unfortunately even worse than before.
I would like to know if there is a better way to approach my problem, as trial and error will get old in the long run. Can I somehow time the browsers rendering of a <table>? How else can I debug performance issues due to client side issues/html structure? I am hoping for a cross-browser solution, but my main concern is IE8 and Google Chrome. Take a guess on which one is the slow one...
I tried to make a JSFiddle of my specific issue, but it ended up being 20.000 lines of code, and still not working properly. I guess a size performance issue isn't really the best fit for JSFiddles format.
Sounds to me like you have way too many DOM nodes!
A good tool to start with is yahoo's yslow and google's pagespeed insights
These tools both look for common performance mistakes and give you tips on how to fix them. They also help with SEO because pagespeed is a pretty big metric when ranking a page.
If my assumption is correct and you have too many DOM nodes the 2 tools will tell you.