Just another technical yaddayadda

Menu

A faster DOM with JIT Compilation?

Introduction

I might be wrong, but It seems that one of the main postulates concerning working with client side Javascript is that the fastest method for manipulating the DOM tree is using the non-standard although ubiquitous innerHTML property, opposed to standard DOM methods createElement, appendChild etc.

However, already back in 2010, Nicolas C. Zakas in his book High Performance Javascript, chapter “DOM Scripting”, has shown that this is not universally true: according to him, Safari 4 and Chrome 3 outperformed the assignment of the innerHTML property.

That made me thinking, what’s the state of the implementation of these approaches today, in 2013-2014.

Executions of these tests also include JSON string parsing, thus simulating a real life web application, which normally receives a response from a server and parses it. The parsed JSON object is passed as the entries argument in both of the test cases above.

Here are the benchmark.js results displaying count of performed operations in one second (results with a greater number are better):

As we can see, the overall best performant is Safari on Mac OS X using the DOM methods,
which in this case performed about 1.5× better than the innerHTML. Notice that the same applies also to iOS7.

On the other hand, desktop Chrome browser has handled the task better using the innerHTML property, although its mobile version on Android produced almost identical results.

Interestingly, that the “old” Android browser (which is being replaced by Chrome in version 4.4) performs better with DOM methods, it even does it better than Chrome with innerHTML on the same device (Android 4.2.2, CyanogenMod, Samsung Galaxy S2).

The others browsers I could test performed clearly better results with the innerHTML.

Comments, Explanations?

Well, I’m not an expert in architectures of web browsers, but I think that the good DOM method results are thanks to the Just-in-time (JIT) compilation of Javascript that almost every modern browser uses nowadays. For example, Google Chrome has V8 and Apple Safari uses Nitro.

Probably JIT compilation makes executing all these DOM methods like createElement or appendChild much cheaper, since it is “native code to native code” instead of “interpreted code to native code”. That’s why not-so-much performant browsers perform innerHTML better: string concatenation is done only in Javascript world followed by just one native call – value assignment to the property innerHTML.

Making Use of the DOM Methods Approach

Most of the web applications use some kind of template mechanism to display results, because hand-crafted DOM manipulation or string concatenation is quite cumbersome.

String concatenation is easy, you can write a template engine that uses JIT compilation with just a few lines of code, like this one.

On the other hand, writing similar template engine that uses DOM methods is much trickier – one cannot get away just by string concatenation, a given piece of HTML template should be parsed and some factory method should be constructed accordingly.

Presenting Jimplate.js

I created Jimplate.js, a little template engine that uses DOM methods to produce elements from a given HTML template and a model. It has a similar usage pattern to other template systems – creating a factory method and executing the method every time something needs to be added:

Behind the scenes, Jimplate parses the given template markup using the excellent John Resig’s et al. pure Javascript HTML parser and its SAX style API, generates Javascript code and evaluates it using the relatively new Function API. I think I could use the good old eval as well, to achieve better browser coverage, although new Function is a much safer choice.

There is about 4 to 7 per cent performance penalty compared to handcrafted DOM method approach on modern browsers – Safari, Chrome. Of course, on less performant browsers, Jimplate approach is even worse than “DOM method” approach was compared to the innerHTML.

Summary

DOM constructing using handcrafted DOM methods or Jimplate is not universally more perfomant than the innerHTML approach, however it shows great results on modern mobile devices, especially those with iOS operating system. It is quite strange that the old Android browser shows better results with DOM compared to the new Chrome for Android, although this should be checked on a real Nexus device before doing any final conclusions.

I guess choosing the right method for populating web application DOM elements depends on a concrete use case, there is no universally “right” choice. Some performance-obsessed people could probably combine these methods, use heuristics or something to determine which is better and serve Jimplate approach for newer devices and the good’ol innerHTML approach for Internet Explorer.

Post navigation

2 thoughts on “A faster DOM with JIT Compilation?”

If you need Christening gifts for someone’s baby come up with a Christening scrapbook by placing a cute picture and text for the cover from
the album – maybe the name from the child and also the date with the Christening – and
allow the parents add images from your Christening as soon as the ceremony.
You will still be able to capture all in the special moments for your wedding albums without breaking the financial institution having a multi-course meal.
Digital photos supply a simple way to share, edit, and
print pictures starting from your computer.

Most professional gamblers will tell you to always search for
and follow the trends, never bet against them. They are
regulated by electronic micro generators called random number generators.
It is the most straightforward details that needs to be checked and double
checked to insure the guest comes with a experience
that is not just pleasing, but most importantly, extraordinary.