{"id":70,"date":"2007-03-25T03:40:49","date_gmt":"2007-03-25T01:40:49","guid":{"rendered":"http:\/\/kpumuk.info\/javascript\/javascript-optimization-part-1-adding-dom-elements-to-document\/"},"modified":"2015-09-08T02:13:28","modified_gmt":"2015-09-08T00:13:28","slug":"javascript-optimization-part-1-adding-dom-elements-to-document","status":"publish","type":"post","link":"https:\/\/kpumuk.info\/javascript\/javascript-optimization-part-1-adding-dom-elements-to-document\/","title":{"rendered":"JavaScript optimization Part 1: Adding DOM elements to document"},"content":{"rendered":"

Most web-developers writing tons of JavaScript, especially in our Web 2.0 century. It’s powerful technology, but most browsers has very slow implementation of engine, and everyone at some instant decide to review code and make it faster. In this post I’ll share my experience and explain several tricks how to make your JavaScript as fast as possible.<\/p>\n

This is first article in 7 parts tutorial, stay tuned.<\/p>\n

<\/p>\n

Scenario<\/strong>: you’re developing rich Internet application and you need to load dynamic elements using AJAX and then add them to current document. For some reason you don’t want (or can’t) use fully generated HTML, and decided to fetch items in JavaScript array.<\/p>\n

I know two classic ways to do so: create elements using document.createElement()<\/tt> method and concatenate HTML string and assign it to parentElement.innerHTML<\/tt> property. Of course, you can combine both ways. Let’s examine this ways in details.<\/p>\n

Classic way (and in ideal world the best way) is to use DOM for element manipulations:<\/p>\n

1
2
3
4
5
<\/div><\/td>
for<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    var<\/span> li =<\/span> document.createElement<\/span>(<\/span>'li'<\/span>)<\/span>
\n    li.appendChild<\/span>(<\/span>document.createTextNode<\/span>(<\/span>'Element '<\/span> +<\/span> i)<\/span>)<\/span>;<\/span>
\n    el.appendChild<\/span>(<\/span>li)<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Not so bad performance. Internet Explorer 6 is slowest – 1403 ms<\/em> (but it is a slower browser in the world, right?), and other browser displayed results quickly (63 – 328 ms<\/em>). Ok, but what about creating DOM element from HTML code?<\/p>\n

1
2
3
4
<\/div><\/td>
for<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    var<\/span> li =<\/span> document.createElement<\/span>(<\/span>'<li>Element '<\/span> +<\/span> i +<\/span> '<\/li>'<\/span>)<\/span>;<\/span>
\n    el.appendChild<\/span>(<\/span>li)<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

It works better in Internet Explorer 6 (1134 ms<\/em>), but does not work in other browsers at all. Weird! Of course, you can add try\/catch<\/tt> block and create elements using first approach in catch<\/tt> block for the other browsers. But I have better solution.<\/p>\n

Every DOM node has attribute innerHTML<\/tt> which holds all child nodes as HTML string.<\/p>\n

1
2
3
4
<\/div><\/td>
el.innerHTML<\/span> =<\/span> ''<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    el.innerHTML<\/span> +=<\/span> '<li>Element '<\/span> +<\/span> i +<\/span> '<\/li>'<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Wow, I’m highly impressed how slow could be adding elements procedure (11391 – 307938 ms<\/em>)! Cool result, right? It’s because browser tried to render list while we updating and it’s take so long time. Little optimization:<\/p>\n

1
2
3
4
5
<\/div><\/td>
var<\/span> html =<\/span> ''<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    html +=<\/span> '<li>Element '<\/span> +<\/span> i +<\/span> '<\/li>'<\/span>;<\/span>
\n}<\/span>
\nel.innerHTML<\/span> =<\/span> html;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

All browsers shows great perfomance (31 – 109 ms<\/em>), but Internet Explorer is still slow – 10994 ms<\/em>. I found solution which works very fast in all browsers: to create array of HTML chunks, and the join them using empty string:<\/p>\n

1
2
3
4
5
6
7
<\/div><\/td>
var<\/span> html =<\/span> [<\/span>]<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    html.push<\/span>(<\/span>'<li>Element '<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>i)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>'<\/li>'<\/span>)<\/span>;<\/span>
\n}<\/span>
\nel.innerHTML<\/span> =<\/span> html.join<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

It’s fastest approach for Internet Explorer 6 – 400 ms<\/em>, and very fast in other browsers. Why I’m not saying fastest in case of Firefox? I added another test to make in cleaner:<\/p>\n

1
2
3
4
5
6
7
<\/div><\/td>
var<\/span> html =<\/span> ''<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    html +=<\/span> '<li style="padding-left: '<\/span> +<\/span> (<\/span>i %<\/span> 50<\/span>)<\/span> +<\/span>
\n    '" id="item-'<\/span> +<\/span> i +<\/span> '">Element '<\/span> +<\/span> i +<\/span> ' Column '<\/span> +<\/span>
\n    (<\/span>i %<\/span> 50<\/span>)<\/span> +<\/span> '<\/li>'<\/span>;<\/span>
\n}<\/span>
\nel.innerHTML<\/span> =<\/span> html;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

And second example:<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
<\/div><\/td>
var<\/span> html =<\/span> [<\/span>]<\/span>;<\/span>
\nfor<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <=<\/span> 1000<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
\n    html.push<\/span>(<\/span>'<li style="padding-left: '<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>i %<\/span> 50<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>'" id="item-'<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>i)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>'">Element '<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>i)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>' Column '<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>i %<\/span> 50<\/span>)<\/span>;<\/span>
\n    html.push<\/span>(<\/span>'<\/li>'<\/span>)<\/span>;<\/span>
\n}<\/span>
\nel.innerHTML<\/span> =<\/span> html.join<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Here are the results in table and diagram formats.<\/p>\n\n\n\n\n\n\n\n\n\n\n
No<\/th>\nMethod<\/th>\nIE 6<\/th>\nIE 7<\/th>\nFF 1.5<\/th>\nFF 2.0<\/th>\nOpera 9<\/th>\n<\/tr>\n
1<\/td>\ncreateElement()<\/td>\n1403<\/td>\n219<\/td>\n166<\/td>\n328<\/td>\n63<\/td>\n<\/tr>\n
2<\/td>\ncreateElement() full<\/td>\n1134<\/td>\n-<\/td>\n-<\/td>\n-<\/td>\n-<\/td>\n<\/tr>\n
3<\/td>\ninnerHTML<\/td>\n39757<\/td>\n20781<\/td>\n41058<\/td>\n307938<\/td>\n11391<\/td>\n<\/tr>\n
4<\/td>\ninnerHTML optimized<\/td>\n10994<\/td>\n46<\/td>\n50<\/td>\n109<\/td>\n31<\/td>\n<\/tr>\n
5<\/td>\ninnerHTML\/join<\/td>\n400<\/td>\n31<\/td>\n47<\/td>\n125<\/td>\n31<\/td>\n<\/tr>\n
 <\/td>\n<\/tr>\n
6<\/td>\ninnerHTML\/optimized+<\/td>\n28934<\/td>\n109<\/td>\n84<\/td>\n172<\/td>\n62<\/td>\n<\/tr>\n
7<\/td>\ninnerHTML\/join+<\/td>\n950<\/td>\n78<\/td>\n110<\/td>\n189<\/td>\n62<\/td>\n<\/tr>\n<\/table>\n

\"Benchmark:<\/a><\/p>\n

You can view benchmark test and get your own results here<\/a>.<\/p>\n

Conclusions<\/h2>\n