Read FROM <td>: textContent, innerHTML, nodeValue, .customAttribute

JavaScript performance comparison

Revision 10 of this test case created by pikappa


scenario: filtering table rows based on column content matching user-provided input --- in short: silly me for not thinking about it before, as you'll get a HUGE performance improvement by pre-fetching the involved cells' data (parsing once the whole column to actually get and store the data as .customAttributes of each td) before performing any filtering at all --- maybe a hint to investigate some further/deeper pre-fetching (whole table-data as js.object?), but consider rogue RAM consumption issues!

Preparation code

<td>just some text</td>
found text: <br>
test1 : <span id="r1">[pending]</span><br>
test2 : <span id="r2">[pending]</span><br>
test3 : <span id="r3">[pending]</span><br>
test4 : <span id="r4">[pending]</span><br>
  var td = document.querySelector('td'),
      r1 = document.getElementById('r1'),
      r2 = document.getElementById('r2'),
      r3 = document.getElementById('r3'),
      r4 = document.getElementById('r4'),
  td.customAttribute = td.textContent;

Preparation code output

just some text
found text:
test1 : [pending]
test2 : [pending]
test3 : [pending]
test4 : [pending]

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
s = td.textContent; 
if( !r1.DONE ){ r1.textContent = s; r1.DONE = true; }
s = td.innerHTML; 
if( !r2.DONE ){ r2.textContent = s; r2.DONE = true; }
s = td.firstChild.nodeValue; // direct td.nodeValue returns 'null' - dropped
if( !r3.DONE ){ r3.textContent = s; r3.DONE = true; }
s = td.customAttribute; 
if( !r4.DONE ){ r4.textContent = s; r4.DONE = true; }

Compare results of other browsers


You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:


Add a comment