Custom Elements, Shadow DOM cost breakout

Benchmark created by Dominic Cooney on

Description

Based on http://jsperf.com/tnadler/3 to investigate the cost components of creating a Custom Element and creating a Shadow Root.

Preparation HTML

<template id="small-template">
   <div>Hello!</div>
</template>

<script>
var registerComponentTemplate = function(id, componentName) {
   var tpl = document.getElementById(id);
   var obj = Object.create(HTMLElement.prototype, {});
   obj.createdCallback = function() {
      var root = this.createShadowRoot();
      root.appendChild(document.importNode(tpl.content));
   }
   document.register(componentName, {'prototype': obj});
}
var registerComponentInnerWithShadow = function(str, componentName) {
   var obj = Object.create(HTMLElement.prototype, {});
   obj.createdCallback = function() {
      var root = this.createShadowRoot();
      root.innerHTML = str;
   }
   document.register(componentName, {'prototype': obj});
}
var registerComponentInnerWithoutShadow = function(str, componentName) {
   var obj = Object.create(HTMLElement.prototype, {});
   obj.createdCallback = function() {
      this.innerHTML = str;
   }
   document.register(componentName, {'prototype': obj});
}

registerComponentTemplate('small-template', 'small-template');
registerComponentInnerWithShadow('Hello!', 'small-inner-shadow');
registerComponentInnerWithoutShadow('Hello!', 'small-inner');
</script>

Setup

window.victim = document.createElement('div');
    document.body.appendChild(victim);

Teardown


    victim.remove();

Test runner

Ready to run.

Testing in
TestOps/sec
Regular Small
victim.innerHTML = '<div>Hello!</div>';
ready
With Shadow Root
victim.createShadowRoot().innerHTML = '<div>Hello!</div>';
ready
Custom Element w/ innerHTML
victim.innerHTML = '<small-inner></small-inner>';
ready
Custom Element w/ ShadowRoot and innerHTML
victim.innerHTML = '<small-inner-shadow></small-inner-shadow>';
ready
Custom Element w/ ShadowRoot and Template
victim.innerHTML = '<small-template></small-inner-template>';
ready
Call innerHTML twice
victim.innerHTML = '<div></div>';
victim.firstChild.innerHTML = 'Hello!';
ready

Revisions

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

  • Revision 1: published by Dominic Cooney on