1<!doctype html> 2<style> 3 .foo { 4 border: 1px solid black; 5 padding: 10px; 6 } 7 .foo .bar.baz { 8 color: blue; 9 } 10</style> 11<script src="../resources/runner.js"></script> 12<script> 13 var listSize = 100; 14 window.onload = function() { 15 var root = document.querySelector('#list').createShadowRoot(); 16 root.appendChild(document.createElement('content')); 17 18 PerfTestRunner.measureTime({ 19 setup: function() { 20 }, 21 run: function() { 22 var frag = document.createDocumentFragment(); 23 var tmpl = document.querySelector('#tmpl'); 24 var start = PerfTestRunner.now(); 25 var i = 0; 26 do { 27 frag.appendChild(tmpl.content.cloneNode(true));; 28 } while (++i < listSize); 29 document.querySelector('#list').appendChild(frag); 30 31 document.body.offsetHeight; 32 return PerfTestRunner.now() - start; 33 }, 34 done: function() { 35 document.querySelector('#list').innerHTML = ''; 36 } 37 }); 38 } 39</script> 40<template id="tmpl"> 41 <div class="foo"> 42 <div class="bar baz">item</div> 43 </div> 44</template> 45<section id="list"></section>