Drag & Hang & Drop
First thing to notice was that the drag and drop on the Planning Board was painfully slow. Trying drag an issue to another position would bring the processor to 100% load immediately. Two things happen: The issue box is moved along, and the other rows move out of the way to make space for it to be dropped.
A profiling run reveals some unexpected method calls:
screenSizeHandler is used for some size adjustments and should only be fired when the browser window size is changed. It’s a pretty expensive operation at around 100ms on IE7, and it’s getting called 24 times here.
Some further tests show that apparently, IE7 fires an onResize event not only when the viewport size changes, but also when the BODY size changes – which of course happens during the drag operation when the other lines move out of the way.
After setting a simple flag for IE to not fire that method when dragging, performance goes up significantly and drag / drop is smooth:
Waiting for the Task Board
The second big issue we had was the load time of the task board. After the page was loaded, the browser would spend some seconds, again on 100% processor load, before it became usable.
Profiling shows that IE7 spends a lot of time with CSS selectors. Yet, the problem with IE7 was actually not in the iteration over the respective DOM tree elements, but interestingly enough with the extension Prototype does to them. The stack shows that in order to read an attribute, which Prototype needs for the class-based CSS selector used here, it actually extends all elements of the tree it needs to check:
Now we’re not actually interested in having the elements returned by the selector query extended, since we just want to do native operations on them. With a small change, our (custom) Prototype lib doesn’t do that anymore (for IE), and the performance gain is immense: