CSS Performance Part 3 - Updating Nodes

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

IE7

IE8

IE9 PP7

FF

Chrome

Opera

1a

one span, alter cell class and text - innerHTML x25

30

40

29

0

0

11

1a

one span, alter cell class and text - innerHTML x25

405

520

245

63

135

90

1b

one span, alter cell class and text - innerHTML x25

405

515

244

259

140

92

2a

one span, alter cell class and text - innerHTML and className x25

395

505

229

250

140

83

2b

one span, alter cell class and text - innerHTML and className x25

382

495

226

254

140

84

3a

one span, alter cell class and text - TextNode and className x25

375

480

216

230

139

79

3b

one span, alter cell class and text - TextNode and className x25

372

470

210

226

140

77

4a

two spans, alter cell class and text - innerHTML x25

450

550

369

36

156

97

4b

two spans, alter cell class and text - innerHTML x25

450

550

327

234

154

97

5a

two spans, alter cell class and text - innerHTML and className x25

440

530

269

224

156

92

5b

two spans, alter cell class and text - innerHTML and className x25

430

525

257

225

154

90

6a

two spans, alter cell class and text - TextNode and className x25

405

505

242

207

149

83

6b

two spans, alter cell class and text - TextNode and className x25

395

490

230

195

144

79

7a

3 spans, alter cell class and text - innerHTML x25

425

520

278

186

143

86

7b

3 spans, alter cell class and text - innerHTML x25

415

513

271

187

142

84

8a

3 spans, alter cell class and text - innerHTML and className x25

405

510

265

186

137

79

8b

3 spans, alter cell class and text - innerHTML and className x25

390

490

246

180

132

76

9a

3 spans, alter cell class and text - TextNode and className x25

375

460

224

173

126

66

9b

3 spans, alter cell class and text - TextNode and className x25

360

445

210

149

122

66

IE7

IE8

IE9 PP7

FF

Chrome

Opera

Total

1a

one span, alter cell class and text - innerHTML x25

30

40

29

0

0

11

110

1b

one span, alter cell class and text - innerHTML x25

33

45

34

33

0

15

160

2a

one span, alter cell class and text - innerHTML and className x25

20

25

13

187

5

4

254

2b

one span, alter cell class and text - innerHTML and className x25

10

25

16

28

0

7

86

3a

one span, alter cell class and text - TextNode and className x25

0

0

0

167

4

0

171

3b

one span, alter cell class and text - TextNode and className x25

0

0

0

0

0

0

0

4a

two spans, alter cell class and text - innerHTML x25

45

45

127

0

7

14

238

4b

two spans, alter cell class and text - innerHTML x25

55

60

97

39

10

18

279

5a

two spans, alter cell class and text - innerHTML and className x25

35

25

27

188

7

9

291

5b

two spans, alter cell class and text - innerHTML and className x25

35

35

27

30

10

11

148

6a

two spans, alter cell class and text - TextNode and className x25

0

0

0

171

0

0

171

6b

two spans, alter cell class and text - TextNode and className x25

0

0

0

0

0

0

0

7a

3 spans, alter cell class and text - innerHTML x25

50

60

54

13

17

20

214

7b

3 spans, alter cell class and text - innerHTML x25

55

68

61

38

20

18

260

8a

3 spans, alter cell class and text - innerHTML and className x25

30

50

41

13

11

13

158

8b

3 spans, alter cell class and text - innerHTML and className x25

30

45

36

31

10

10

162

9a

3 spans, alter cell class and text - TextNode and className x25

0

0

0

0

0

0

0

9b

3 spans, alter cell class and text - TextNode and className x25

0

0

0

0

0

0

0

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..

TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
TD
<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>

MORE BY LUKE

Seven Surprising JavaScript 'Features'

Aurelia, less2css and bundling

blog comments powered by Disqus