Company Blog

appendChild locking up IE? You’ve got too much HTML.

appendChild

It turns out that appendChild is a very expensive operation in Internet Explorer. If you’re running into a strange scenario where your page loads fine on Chrome or Firefox, but locks up for 15-60 seconds in Internet Explorer, it’s because you’re using appendChild with way too much HTML.

In our case, it was a dialog with a huge box; one with over 10,000 options. In retrospect, we shouldn’t have had a select box with that many options in the first place. It’s impressive that webkit and gecko have managed to optimize this to a point where we didn’t pick up on the problem in development. On IE it is completely unusable (to the point where IE claims that the page is not responding) and we have to support IE, so we’re back to the drawing board.

appendchild-locking-up-ie-youve-got-too-much-html-2

If you’ve found this post, you might have already identified appendChild as the problem.

appendchild-locking-up-ie-youve-got-too-much-html-3

However, appendChild is called in the scary and inhospitable depths of jQuery UI and jQuery. What can you do about that?

appendchild-locking-up-ie-youve-got-too-much-html-4

After all, our entry point appeared to be a very benign one:

return el.dialog(attrs)

All this does is ask jQuery UI to make a dialog out of the element we’ve passed it. Which in turn ends up calling appendChild, as evidenced by the previous screenshot.

So how do we make this page usable? Less HTML. You just can’t have that much *stuff* in your dialogs, thanks to IE. We changed our 10,000 line select box into an autocomplete text box and our page was usable on IE, and more usable for everyone in general, really.

If anyone else has figured out a way to mitigate IE’s incredibly slow appendChild, we’d love to hear about it in the comments!