InnerHTML vs DOM Functions
I watched a video from PDC where Sameer Chabungbam demonstrated the new JScript profiler in IE8. He brings up a good point during the presentation: a developer can acheive a significant speed bost in their J(ava)Script applications from manipulating the DOM in the right way.
He shows that if you use InnerHTML instead of DOM functions to update content it can save processing time.
So I did a cross browser comparison and the results were consistent across all browsing platforms. Using DOM Functions like document.appendChild(), addRow(), addCell(), etc. creates greater overhead and increased loading time. If your JavaScript creates the raw HTML and inserts it into the innerHTML property of the parent element you will substantally decrease your load time.
So enough of the talk. Here are the results.
I used the Firebug Profiler in Firefox 3.0 and the Internet Explorer 8 beta 2 JScript profiler. The other browsers I used a call to Date.getTime() to profile the speed of the function. They were tested on my laptop on AC power at max performance. My laptop is a Intel Core 2 Duo 2.5 (9300) with 3 GB of RAM.
IE & Firefox Profiler Images:
| Internet Explorer 8 Beta 2 | |
| Using DOM Functions | Using InnerHTML |
|---|---|
| 1067ms | 22ms |
| Internet Explorer 7 (*) | |
| Using DOM Functions | Using InnerHTML |
|---|---|
| 1246ms | 38ms |
| Firefox 3.0 | |
| Using DOM Functions | Using InnerHTML |
|---|---|
| 180ms | 24ms |
| Google Chrome 1.0 | |
| Using DOM Functions | Using InnerHTML |
|---|---|
| 17ms | 8ms |
| Apple Safari | |
| Using DOM Functions | Using InnerHTML |
|---|---|
| 82ms | 9ms |
| Opera 9.63 | |
| Using DOM Functions | Using InnerHTML |
|---|---|
| 31ms | 6ms |
* - Internet Explorer 7 was tested on a different machine than the rest of the results. It was my desktop which has similar specs to my laptop. It is a Intel Core2 Duo 2.4 ghz (6600) with 4 GB of RAM
The one take-away from these results is that you should always use InnerHTML in your JavaScript. Using the proper DOM function will slow it down. Another is something that I found when I was conducting this experiment. I had problems getting IE to modify the InnerHTML of a table so I had to put a DIV into my code and create the table on-the-fly. IE kept throwing up an error saying that InnerHTML was not a valid member of that object.
Here is the source the file I used in my tests:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <script type="text/javascript">
7 var firstName = new Array("Jesse", "Jennifer", "Jeff", "Greg", "Stephen", "John", "Anne");
8 var lastName = new Array("Dearing", "Adams", "Smith", "Kinnear", "Colbert", "Stewart", "Hathaway");
9
10 function populateWithDOM() {
11 var startTime = (new Date()).getTime();
12 var table = document.createElement("table");
13 for (var i = 0; i < 1000; i++) {
14 var row = table.insertRow(0);
15 var fName = row.insertCell(0);
16 var lName = row.insertCell(1);
17 fName.innerHTML = firstName[i % firstName.length];
18 lName.innerHTML = lastName[i % lastName.length];
19 }
20 document.getElementById("TableDiv").appendChild(table);
21 var stopTime = (new Date()).getTime();
22 document.getElementById("profileMS").innerHTML = (stopTime - startTime).toString();
23 }
24
25 function populateWithoutDOM() {
26 var startTime = (new Date()).getTime();
27 var tableDiv = document.getElementById("TableDiv");
28 var iHtml = "<table>";
29 for (var i = 0; i < 1000; i++) {
30 iHtml += "<tr><td>" + firstName[i % firstName.length] +
31 "</td><td>" + lastName[i % lastName.length] + "</td></tr>";
32 }
33 iHtml += "</table>";
34 tableDiv.innerHTML = iHtml;
35 var stopTime = (new Date()).getTime();
36 document.getElementById("profileMS").innerHTML = (stopTime - startTime).toString();
37 }
38
39 function clearTable() {
40 document.getElementById("TableDiv").innerHTML = "";
41 }
42 </script>
43 </head>
44 <body>
45 <p>Time taken to run: <span id="profileMS"></span></p>
46 <p>
47 <input type="button" value="Clear table" onclick="clearTable()" />
48 </p>
49 <div id="TableDiv">
50 </div>
51 <p>
52 <input type="button" value="Insert using DOM" onclick="populateWithDOM()" />
53 <input type="button" value="Insert without DOM" onclick="populateWithoutDOM()" />
54 </p>
55 </body>
56 </html>