addRule vs. insertRule (v4)

Revision 4 of this benchmark created on

Description

Tests which is faster when adding a rule to a stylesheet: insertRule or addRule.

WARNING: this may not work in all browsers. Chrome definitely has both.

NOTE: removeRule will be used in the tearDown.

Preparation HTML

<a>Test text. This text will be changed by the CSS rule.</a>

<script>
  //Create and add stylesheet to page.
  document.head.appendChild(document.createElement("style"));
  var stylesheet = 
    document.styleSheets[document.styleSheets.length-1];
  
</script>

Teardown


    stylesheet.innerText = "";

Test runner

Ready to run.

Testing in
TestOps/sec
textContent set
stylesheet.textContent = "a { color:#000000; }";
ready
innerText set
stylesheet.innerText = "a { color:#000000; }";
ready
textContent
stylesheet.textContent += "a { color:#000000; }";
ready
innerText
stylesheet.innerText += "a { color:#000000; }";
ready

Revisions

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