It was a "bulk CRUD form" page. Actually, a Single Page App (SPA) looking like a monstrous spreadsheet. On initial render it had 10 rows containing 72 html input elements each!
IE6 rendering speed was lowered from 60+ seconds to 8 seconds. Some functions were modified to run 400% faster (basically it was achieved by tweaking string concatenation using
.join). A couple of bottlenecks was optimized to run 25 times faster (jQuery references caching).
A Silver Bullet
The common approach here is:
- Measure. The golden rule of any optimization. Find the bottleneck first, then optimize.
- Use jQuery wisely and cache the $ references. (Tons of articles available on basic jQuery pitfalls - read em).
- Insert the HTML dynamically using documentFragment. Some older browsers (Chrome and IE6,7) may actually work faster with
innerHTMLbatch assignments. Measure it.
- If you need to prevent nasty IE6-IE7 alert ("The page seems to run slowly... bla bla bla... should I kill the page?"), you may use
setTimeoutfunction to delegate the rendering for the next event-loop cycle. It will free some ticks for other operations and will mimic "asynchronous" execution. This is sufficient to shut IE6 up.
- Read about reflows and repaints. Lower the number of those nasty events as much as possible.
Have fun with your JS!