Commit 96206854 authored by shinyak@chromium.org's avatar 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.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@136805 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 57ccc054
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
......
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment