chromium/third_party/blink/perf_tests/shadow_dom/shadow-dom-overhead-iframe.html

<!DOCTYPE html>
<body>
<pre id="log"></pre>
<script src="../resources/runner.js"></script>
<script src="resources/declarative.js"></script>
<script>

/* See third_party/blink/perf_tests/shadow_dom/shadow-dom-overhead.html
   for methodology here. The only difference here is that this version
   uses iframe-based measurement, instead of DOMParser-based measurement.
*/

const depth = 6;
const copies = 100;
const shadowHtml = getShadowMarkup(true, depth, copies);
const lightDomHtml1 = getShadowMarkup(false, depth, copies, /*lightDomDuplicates=*/1);
const lightDomHtml2 = getShadowMarkup(false, depth, copies, /*lightDomDuplicates=*/2);

async function runSingleTest() {
  let samples = [];
  for (let i = 0; i < 100; i++) {
    const t1 = await measureLoadTimeIframe(lightDomHtml1);
    const t2 = await measureLoadTimeIframe(shadowHtml);
    const t3 = await measureLoadTimeIframe(lightDomHtml2);
    if (t2 > t1 && t3 > t1) {
      samples.push((t2-t1) / (t3-t1));
    }
  }
  PerfTestRunner.assert_true(samples.length > 3,'Too many skipped measurements');
  // The result is the total overhead, in *percent*, *per shadow root*.
  return 100*median(samples);
}

let isDone = false;
PerfTestRunner.startMeasureValuesAsync({
  description: 'This benchmark tests the overhead of declarative Shadow DOM (via iframe)',
  unit: 'percent',
  run: async function() {
    while (!isDone) {
      PerfTestRunner.addRunTestStartMarker();
      const test_result = await runSingleTest();
      PerfTestRunner.measureValueAsync(test_result);
      PerfTestRunner.addRunTestEndMarker();
    }
  },
  done: () => {isDone = true;},
  warmUpCount: 2,
  iterationCount: 30,
});

</script>