Introduction

In the first two parts I looked at different ways of performing dom manipulation tasks like adding rows to a table and sorting rows in a table. These tend to be quite common since we display data in a table and a dynamic website may wish to show live updates to that data and present it in a user friendly way by allowing client side sorting.

So, this is the last blog post before I go on to compare different CSS strategies. I will focus on the remaining tasks likely to occur in dynamic web applications, which is more general updating of the DOM. I'd like to test the performance of updating the entire dom with tweaking little bits and seeing if changing multiple classes is similar to changing single classes.

Content Changing - innerHTML

I'm going to take my table example and test 3 different ways of updating it. If you have the following HTML structure...

<table>
    <tr>
        <td>
            <span>
                text to update
            </span>
        </td>
    </tr>
    ...
</table>

... and you wish to change the class on the span and the text to update then there are 3 ways to achieve this.

• innerHTML = "<span class="new_class"<new text>/span>";
• childNodes[0].innerHTML = "new text";
  childNodes[0].className = "new_class";
• childNodes[0].childNodes[0].nodeValue = "new text";
  childNodes[0].className = "new_class";

The third being possible because we can update the textnode instead of effectively replacing the text node.

You can access the test page here.

Results

Conclusion

The textnode value change and classname change are more efficient and this remains the case as we increase the number of inner spans. I don't want to go in to more detail at this point, as I am concentrating on how the css changes the performance of the operation.

However I wouldn't say that the results are that significant and the difference between the numbers is quite small. For the purpose of this blog series, it is worth considering these updates (especially since we already test innerHTML performance in creating the tables in the first place).

A word on Divs

All of my tests thus far have been focused on tables - this is where we most likeley have a large dom and may be performing updates. However in the interests of fairness I will also be using Divs, but simulating a table, so that all the same tests can be performed.

I will do this by setting the div 'td' class to inline-block (goog-inline-block) in order to stack them horizontally and putting them inside divs that simulate tr's (stacked vertically). Here is an example..

<div class="divtable">
  <div class="divtr">
    <div class="ib divtd"><span>TD</span></div>
    <div class="ib divtd"><span>TD</span></div>
    ...
  </div>
  <div class="divtr">
  ...
</div></div>