Inserting <style> vs. <link>

Benchmark created by Tom Doan on

Description

Comparing two methods to dynamically insert CSS into a document.

Preparation HTML

<script>
  var head = document.getElementsByTagName('head')[0];
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
STYLE
var style = document.createElement('style'),
    rules = document.createTextNode('body{background:#0c0}');
style.type = 'text/css';
style.appendChild(rules);
head.appendChild(style);
head.removeChild(head.lastChild);
ready
LINK
var link = document.createElement('link'),
    rules = 'body{background:#0c0}';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'data:text/css,' + escape(rules);
head.appendChild(link);
head.removeChild(head.lastChild);
ready

Revisions

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

  • Revision 1: published by Tom Doan on