[Shadow] Performance tests for ShadowDOM distribution
authorshinyak@chromium.org <shinyak@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Dec 2012 06:31:22 +0000 (06:31 +0000)
committershinyak@chromium.org <shinyak@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Dec 2012 06:31:22 +0000 (06:31 +0000)
https://bugs.webkit.org/show_bug.cgi?id=103617

Reviewed by Dimitri Glazkov.

We would like to measure ShadowDOM distribution performance in various cases.
In this patch, we add performance tests for several distribution patterns.

* ShadowDOM/ContentReprojection.html: Added.
* ShadowDOM/DistributionWithMultipleShadowRoots.html: Added.
* ShadowDOM/LargeDistributionWithLayout.html: Added.
* ShadowDOM/MultipleInsertionPoints.html: Added.
* ShadowDOM/ShadowReprojection.html: Added.
* ShadowDOM/SmallDistributionWithLayout.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@136805 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/ChangeLog
PerformanceTests/ShadowDOM/ContentReprojection.html [new file with mode: 0644]
PerformanceTests/ShadowDOM/DistributionWithMultipleShadowRoots.html [new file with mode: 0644]
PerformanceTests/ShadowDOM/LargeDistributionWithLayout.html [new file with mode: 0644]
PerformanceTests/ShadowDOM/MultipleInsertionPoints.html [new file with mode: 0644]
PerformanceTests/ShadowDOM/ShadowReprojection.html [new file with mode: 0644]
PerformanceTests/ShadowDOM/SmallDistributionWithLayout.html [new file with mode: 0644]

index d6fdccf..5500166 100644 (file)
@@ -1,5 +1,22 @@
 2012-12-05  Shinya Kawanaka  <shinyak@chromium.org>
 
+        [Shadow] Performance tests for ShadowDOM distribution
+        https://bugs.webkit.org/show_bug.cgi?id=103617
+
+        Reviewed by Dimitri Glazkov.
+
+        We would like to measure ShadowDOM distribution performance in various cases.
+        In this patch, we add performance tests for several distribution patterns.
+
+        * ShadowDOM/ContentReprojection.html: Added.
+        * ShadowDOM/DistributionWithMultipleShadowRoots.html: Added.
+        * ShadowDOM/LargeDistributionWithLayout.html: Added.
+        * ShadowDOM/MultipleInsertionPoints.html: Added.
+        * ShadowDOM/ShadowReprojection.html: Added.
+        * ShadowDOM/SmallDistributionWithLayout.html: Added.
+
+2012-12-05  Shinya Kawanaka  <shinyak@chromium.org>
+
         [Shadow] Performance tests of distribution for changing className
         https://bugs.webkit.org/show_bug.cgi?id=103612
 
diff --git a/PerformanceTests/ShadowDOM/ContentReprojection.html b/PerformanceTests/ShadowDOM/ContentReprojection.html
new file mode 100644 (file)
index 0000000..6e13d67
--- /dev/null
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="../resources/runner.js"></script>
+</head>
+<body>
+
+<div id="wrapper">
+    <div id="host"></div>
+</div>
+
+<script>
+var numDivsInHost = 100;
+var nLoops = 1000;
+
+function setup()
+{
+    var nDivs = numDivsInHost;
+
+    for (var i = 0; i < nDivs; ++i) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode('div' + i));
+        if (i % 2 == 0)
+            div.className = 'selected';
+        host.appendChild(div);
+    }
+
+    var shadowRoot = new WebKitShadowRoot(host);
+    shadowRoot.innerHTML = '<div id="host2"><content></content></div>';
+
+    var host2 = shadowRoot.getElementById('host2');
+    var shadowRoot2 = new WebKitShadowRoot(host2);
+    shadowRoot2.innerHTML = '<content select=".selected"></content>';
+}
+
+function run()
+{
+    var host = document.getElementById('host');
+    var nLoops = window.nLoops;
+
+    var div = document.createElement('div');
+    for (var i = 0; i < nLoops; ++i) {
+        host.appendChild(div);
+        host.removeChild(div);
+        host.offsetLeft;
+    }
+}
+
+function done()
+{
+    wrapper.innerHTML = '';
+}
+
+setup();
+
+PerfTestRunner.measureTime({
+    description: "Measure performance of content reprojection and distribution",
+    run: run,
+    done: done
+p});
+</script>
+</body>
+</html>
diff --git a/PerformanceTests/ShadowDOM/DistributionWithMultipleShadowRoots.html b/PerformanceTests/ShadowDOM/DistributionWithMultipleShadowRoots.html
new file mode 100644 (file)
index 0000000..96d6f73
--- /dev/null
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="../resources/runner.js"></script>
+</head>
+<body>
+
+<div id="wrapper">
+    <div id="host"></div>
+</div>
+
+<script>
+var numShadowRoots = 20;
+var numDivsInHost = 10;
+var nLoops = 300;
+
+function setup()
+{
+    var nDivs = numDivsInHost;
+
+    for (var i = 0; i < nDivs; ++i) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode('div' + i));
+        host.appendChild(div);
+    }
+
+    for (var i = 0; i < numShadowRoots; ++i) {
+        var content = document.createElement('shadow');
+        var shadowRoot = new WebKitShadowRoot(host);
+        shadowRoot.appendChild(content);
+    }
+}
+
+function run()
+{
+    var host = document.getElementById('host');
+    var nLoops = window.nLoops;
+
+    var div = document.createElement('div');
+    for (var i = 0; i < nLoops; ++i) {
+        host.appendChild(div);
+        host.removeChild(div);
+        host.offsetLeft;
+    }
+}
+
+function done()
+{
+    wrapper.innerHTML = '';
+}
+
+
+setup();
+
+PerfTestRunner.measureTime({
+    description: "Measure Distribution and Layout time in a case there are multiple ShadowRoots",
+    run: run,
+    done: done
+});
+</script>
+</body>
+</html>
diff --git a/PerformanceTests/ShadowDOM/LargeDistributionWithLayout.html b/PerformanceTests/ShadowDOM/LargeDistributionWithLayout.html
new file mode 100644 (file)
index 0000000..9f1e625
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="../resources/runner.js"></script>
+</head>
+<body>
+
+<div id="wrapper">
+    <div id="host"></div>
+</div>
+
+<script>
+var numDivsInHost = 1000;
+var nLoops = 30;
+
+function setup()
+{
+    var nDivs = numDivsInHost;
+
+    for (var i = 0; i < nDivs; ++i) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode('div' + i));
+        host.appendChild(div);
+    }
+
+    var content = document.createElement('content');
+    var shadowRoot = new WebKitShadowRoot(host);
+    shadowRoot.appendChild(content);
+}
+
+function run()
+{
+    var host = document.getElementById('host');
+    var nLoops = window.nLoops;
+
+    var div = document.createElement('div');
+    for (var i = 0; i < nLoops; ++i) {
+        host.appendChild(div);
+        host.removeChild(div);
+        content.getDistributedNodes();
+    }
+}
+
+function done()
+{
+    wrapper.innerHTML = '';
+}
+
+
+setup();
+
+PerfTestRunner.measureTime({
+    description: "Measure Distribution and Layout time (with a lot of host children)",
+    run: run,
+    done: done
+});
+</script>
+</body>
+</html>
diff --git a/PerformanceTests/ShadowDOM/MultipleInsertionPoints.html b/PerformanceTests/ShadowDOM/MultipleInsertionPoints.html
new file mode 100644 (file)
index 0000000..5c4e65e
--- /dev/null
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="../resources/runner.js"></script>
+</head>
+<body>
+
+<div id="wrapper">
+    <div id="host"></div>
+</div>
+
+<script>
+var numDivsInHost = 256;
+var nLoops = 100;
+var classNames = ['A', 'B', 'C', 'D', 'E'];
+
+function setup()
+{
+    var nDivs = numDivsInHost;
+
+    for (var i = 0; i < nDivs; ++i) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode('div' + i));
+
+        var names = new Array();
+        for (var j = 0; j < classNames.length; ++j) {
+            if (i & (1 << j))
+                names.push(classNames[j]);
+        }
+        div.className = names.join(' ');
+       
+        host.appendChild(div);
+    }
+
+    var shadowRoot = new WebKitShadowRoot(host);
+    for (var i = 0; i < classNames.length; ++i) {
+        var content = document.createElement('content');
+        content.setAttribute('select', '.' + classNames[i]);
+        shadowRoot.appendChild(content);
+    }
+    shadowRoot.appendChild(document.createElement('content'));
+}
+
+function run()
+{
+    var host = document.getElementById('host');
+    var nLoops = window.nLoops;
+
+    var div = document.createElement('div');
+    for (var i = 0; i < nLoops; ++i) {
+        host.appendChild(div);
+        host.removeChild(div);
+        host.offsetLeft;
+    }
+}
+
+function done()
+{
+    wrapper.innerHTML = '';
+}
+
+
+setup();
+
+PerfTestRunner.measureTime({
+    description: "Measure Distribution and Layout time in a case there are multiple InsertionPoints",
+    run: run,
+    done: done
+});
+</script>
+</body>
+</html>
diff --git a/PerformanceTests/ShadowDOM/ShadowReprojection.html b/PerformanceTests/ShadowDOM/ShadowReprojection.html
new file mode 100644 (file)
index 0000000..2663aff
--- /dev/null
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="../resources/runner.js"></script>
+</head>
+<body>
+
+<div id="wrapper">
+    <div id="host"></div>
+</div>
+
+<script>
+var numDivsInHost = 100;
+var nLoops = 1000;
+
+function setup()
+{
+    var nDivs = numDivsInHost;
+
+    for (var i = 0; i < nDivs; ++i) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode('div' + i));
+        if (i % 2 == 0)
+            div.className = 'selected';
+        host.appendChild(div);
+    }
+
+    var shadowRoot = new WebKitShadowRoot(host);
+    shadowRoot.innerHTML = '<div id="host2"><shadow></shadow></div>';
+
+    var host2 = shadowRoot.getElementById('host2');
+    var shadowRoot2 = new WebKitShadowRoot(host2);
+    shadowRoot2.innerHTML = '<content select=".selected"></content>';
+}
+
+function run()
+{
+    var host = document.getElementById('host');
+    var nLoops = window.nLoops;
+
+    var div = document.createElement('div');
+    for (var i = 0; i < nLoops; ++i) {
+        host.appendChild(div);
+        host.removeChild(div);
+        host.offsetLeft;
+    }
+}
+
+function done()
+{
+    wrapper.innerHTML = '';
+}
+
+setup();
+
+PerfTestRunner.measureTime({
+    description: "Measure performance of shadow reprojection and distribution",
+    run: run,
+    done: done
+});
+</script>
+</body>
+</html>
diff --git a/PerformanceTests/ShadowDOM/SmallDistributionWithLayout.html b/PerformanceTests/ShadowDOM/SmallDistributionWithLayout.html
new file mode 100644 (file)
index 0000000..c76a70f
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="../resources/runner.js"></script>
+</head>
+<body>
+
+<div id="wrapper">
+    <div id="host"></div>
+</div>
+
+<script>
+var numDivsInHost = 10;
+var nLoops = 3000;
+
+function setup()
+{
+    var nDivs = numDivsInHost;
+
+    for (var i = 0; i < nDivs; ++i) {
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode('div' + i));
+        host.appendChild(div);
+    }
+
+    var content = document.createElement('content');
+    var shadowRoot = new WebKitShadowRoot(host);
+    shadowRoot.appendChild(content);
+}
+
+function run()
+{
+    var host = document.getElementById('host');
+    var nLoops = window.nLoops;
+
+    var div = document.createElement('div');
+    for (var i = 0; i < nLoops; ++i) {
+        host.appendChild(div);
+        host.removeChild(div);
+        host.offsetLeft;
+    }
+}
+
+function done()
+{
+    wrapper.innerHTML = '';
+}
+
+
+setup();
+
+PerfTestRunner.measureTime({
+    description: "Measure Distribution and Layout time (with a few host children)",
+    run: run,
+    done: done
+});
+</script>
+</body>
+</html>