Poor appendChild and removeChild Performance on Internet Explorer

Recently we noticed that conversion rates on Internet Explorer are quite low. Internet Explorer was converting at just .30% compared to 1.5% for Safari, Chrome, and mobile. I’ve blogged before on how Google Analytics can assist developers in finding bugs and once again GA had saved the day or at least pointed to an issue. Unfortunately this bug had persisted for weeks and since I just assumed browser stack was being slow, it was never addressed. It doesn’t help that no one in our office uses Internet Explorer (even Windows users are on Chrome) and only 13% of our traffic comes from Internet Explorer. Worse, its widely known Internet Explorer lags far behind Chrome and Safari in DOM performance.

Offending code:

This code is basically doing a sort based on some HTML attributes. It uses jQuery detach to remove the element while keeping its events and then appends it back to the DOM. In hindsight this application should have been built using a JavaScript framework built for these types of manipulations such as Angular, but that level of rewrite is clearly beyond the scope of this fix. Chrome’s speed hid the bad design here from me.

Resolution:

Here looping over expensive append child and remove child operations is avoided. The performance benefit in Chrome was rather negligible in regards to the scope of this application dropping appends from 92 milliseconds to 26 milliseconds and removeChild from 87 milliseconds to 66 milliseconds. However, in Internet Explorer jaw dropping improvements were achieved. Append child improved all the way from 18.5 seconds (yes seconds) to 1.8 seconds and remove child improved from 9.6 seconds down to .6 seconds.

Hopefully this helps someone. Honestly I take little pride in this resolution. Its a black eye that this was allowed to persist for so long. Furthermore the new numbers still suck and additional work will be necessary to bring Internet Explorer performance in line with Chrome, Safari, and mobile. One puzzling note, a Samsung Galaxy S II which was released in 2011 sporting a 1.2 GHz dual-core ARM with 1 GB of RAM running the application on Android/Chrome bested my a one-year old Laptop sporting an Intel Core i7 4710HQ (2.50 GHz) with 16 GB of RAM and a solid state drive running the application in Windows 8/Internet Explorer. The numbers between the SII and Laptop were similar pre-fix.