addRule vs. insertRule (v3)

Revision 3 of this benchmark created by Disturbed 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.removeRule(0);

Test runner

Ready to run.

Testing in
TestOps/sec
addRule Test
stylesheet.addRule("a","color:#000000",0);
ready
insertRule Test
stylesheet.insertRule("a { color:#000000; }",0);
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.