innerHTML vs textContent (v3)

Revision 3 of this benchmark created on

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var style = document.getElementById('myStyle');
var content = '[foo="' + Math.random() +'"] {display: none;}';
style.innerHTML = content;
 
ready
textContent
var style = document.getElementById('myStyle');
var content = '[foo="' + Math.random() +'"] {display: none;}';
style.textContent = content;
 
ready
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);

 
ready
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);
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.