innerHTML vs textContent

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

<style id="myStyle">[foo="42"]{display:none;}</style>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
innerHTML
var style = document.getElementById('myStyle');
var content = '[foo="' + Math.random() +'"] {display: none;}';
style.innerHTML = content;
 
pending…
textContent
var style = document.getElementById('myStyle');
var content = '[foo="' + Math.random() +'"] {display: none;}';
style.textContent = content;
 
pending…
innerHTML, remove
var style = document.getElementById('myStyle');
style.parentNode.removeChild(style);
var content = '[foo="' + Math.random() +'"] {display: none;}';
style = document.createElement('style');
style.setAttribute('id', 'myStyle');
style.innerHTML = content;
document.head.appendChild(style);

 
pending…
textContent, remove
var style = document.getElementById('myStyle');
style.parentNode.removeChild(style);
var content = '[foo="' + Math.random() +'"] {display: none;}';
style = document.createElement('style');
style.setAttribute('id', 'myStyle');
style.textContent = content;
document.head.appendChild(style);
 
pending…

Compare results of other browsers

Revisions

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:

0 comments

Add a comment