Skip to content

GitLab

T
tangled
Commit 7ad39081 authored by Kyoko Muto's avatar Kyoko Muto Committed by Commit Bot
Browse files
Options

Add some perftests for imperative shadow DOM distribution API 

For the help of comparing two implementation design of "Imperative Shadow DOM
Distribution API", this CL introduces some performance tests.

Some of the tests are micro benchmark tests for each function, assign, assignSlot, assignElements,
insertBefore, and appendChild, that manual slotting mode uses.
In another tests, the performance of the new custom element, <my-detail>/<my-summary> are testes
when assigned nodes are over 100.
In addition, some algorithm　for the new custom element are added to do the previous tests.

Bug: 869308
Change-Id: Ib2ad2f2ea304d0f7ddbb25b5b85e739af7ee465b
Reviewed-on: https://chromium-review.googlesource.com/1214964
Commit-Queue: Kyoko Muto <kymuto@google.com>
Reviewed-by: default avatarHayato Ito <hayato@chromium.org>
Cr-Commit-Position: refs/heads/master@{#591293}
parent f220c344
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 7 deletions
third_party/WebKit/LayoutTests/shadow-dom/imperative-apis/custom-detail-summary.js
View file @ 7ad39081
......@@ -25,7 +25,12 @@ customElements.define("my-detail", class extends HTMLElement {
slot1.style.backgroundColor = "red";
const observer = new MutationObserver(function(mutations) {
//Get the first <my-summary> element from <my-detail>'s direct children
slot1.assign([target.querySelector(':scope > my-summary')]);
const my_summary = target.querySelector(':scope > my-summary');
if (my_summary) {
slot1.assign([my_summary]);
} else {
slot1.assign([]);
}
slot2.assign(target.childNodes);
});
observer.observe(this, {childList: true});
......
third_party/blink/perf_tests/shadow_dom/custom-detail-summary.js
View file @ 7ad39081
......@@ -25,7 +25,12 @@ customElements.define("my-detail", class extends HTMLElement {
slot1.style.backgroundColor = "red";
const observer = new MutationObserver(function(mutations) {
//Get the first <my-summary> element from <my-detail>'s direct children
slot1.assign(target.querySelector(':scope > my-summary'));
const my_summary = target.querySelector(':scope > my-summary');
if (my_summary) {
slot1.assign([my_summary]);
} else {
slot1.assign([]);
}
slot2.assign(target.childNodes);
});
observer.observe(this, {childList: true});
......
third_party/blink/perf_tests/shadow_dom/declarative-api.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<div id="host">
</div>
<script>
const host = document.querySelector("#host");
const shadow_root = host.attachShadow({ mode: 'open', slotting: 'auto' });
const slot1 = document.createElement("slot");
const child1 = document.createElement("child");
shadow_root.appendChild(slot1);
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of slot assignment in auto-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
const slot2 = document.createElement("slot");
slot2.name = "slot2";
host.appendChild(child1);
shadow_root.appendChild(slot2);
child1.slot = "slot2";
child1.assignedSlot;
slot2.assignedElements();
slot2.remove();
child1.assignedSlot;
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-appendchild.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<div id="host">
</div>
<script>
const host = document.querySelector("#host");
const shadow_root = host.attachShadow({ mode: 'open', slotting: 'manual' });
const slot1 = document.createElement("slot");
const child1 = document.createElement("child");
slot1.assign([child1]);
shadow_root.appendChild(slot1);
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of appendChild in manual-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.appendChild(child1);
child1.remove();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-assign.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<div id="host">
</div>
<script>
const host = document.querySelector("#host");
const shadow_root = host.attachShadow({ mode: 'open', slotting: 'manual' });
const slot1 = document.createElement("slot");
const child1 = document.createElement("child");
shadow_root.appendChild(slot1);
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of assign function in manual-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.appendChild(child1);
slot1.assign([child1]);
child1.remove();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-assigned-elements.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<div id="host">
</div>
<script>
const host = document.querySelector("#host");
const shadow_root = host.attachShadow({ mode: 'open', slotting: 'manual' });
const slot1 = document.createElement("slot");
const child1 = document.createElement("child");
slot1.assign([child1]);
shadow_root.appendChild(slot1);
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of assignedElements() in manual-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.appendChild(child1);
slot1.assignedElements();
child1.remove();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-assigned-slot.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<div id="host">
</div>
<script>
const host = document.querySelector("#host");
const shadow_root = host.attachShadow({ mode: 'open', slotting: 'manual' });
const slot1 = document.createElement("slot");
const child1 = document.createElement("child");
slot1.assign([child1]);
shadow_root.appendChild(slot1);
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of assignedSlot in manual-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.appendChild(child1);
child1.assignedSlot;
child1.remove();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-custom-detail-summary-large.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<script src="custom-detail-summary.js"></script>
<my-detail id="my-detail">
<my-summary id="my-summary">summary</my-summary>
</my-detail>
<my-summary id="my-summary1">added-summary1</my-summary>
<my-summary id="my-summary2">added-summary2</my-summary>
<script>
const host = document.querySelector("#my-detail");
const sum = document.querySelector("#my-summary");
const sum1 = document.querySelector("#my-summary1");
const sum2 = document.querySelector("#my-summary2");
window.onload = function() {
for (let i = 0; i < 100; i++) {
host.appendChild(document.createElement("my-summary"));
}
PerfTestRunner.measureTime({
description: "Measure performance of my-detail element in manual-slotting mode in shadow root when my-summary element is inserted when the child node is over 100.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.appendChild(sum1);
host.insertBefore(sum2, sum);
PerfTestRunner.forceLayout();
sum1.remove();
sum2.remove();
PerfTestRunner.forceLayout();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-detail-summary-large.html 0 → 100644
View file @ 7ad39081
<!doctype html>
<script src="../resources/runner.js"></script>
<details id="details">
<summary id="summary">summary</summary>
</details>
<summary id="summary1">added-summary1</summary>
<summary id="summary2">added-summary2</summary>
<script>
const host = document.querySelector("#details");
const sum = document.querySelector("#summary");
const sum1 = document.querySelector("#summary1");
const sum2 = document.querySelector("#summary2");
window.onload = function() {
for (let i = 0; i < 100; i++) {
host.appendChild(document.createElement("summary"));
}
PerfTestRunner.measureTime({
description: "Measure performance of built-in detail element when summary element is inserted when the child node is over 100",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.appendChild(sum1);
host.insertBefore(sum2, sum);
PerfTestRunner.forceLayout();
sum1.remove();
sum2.remove();
PerfTestRunner.forceLayout();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api-detail-summary.html
View file @ 7ad39081
<!doctype html>
<script src="../resources/runner.js"></script>
<detail id="detail">
<details id="details">
<summary id="summary">summary</summary>
</detail>
</details>
<summary id="summary1">added-summary1</summary>
<summary id="summary2">added-summary2</summary>
<script>
const host = document.querySelector("#detail");
const host = document.querySelector("#details");
const sum = document.querySelector("#summary");
const sum1 = document.querySelector("#summary1");
const sum2 = document.querySelector("#summary2");
......
third_party/blink/perf_tests/shadow_dom/imperative-api-insertbefore.html 0 → 100644
View file @ 7ad39081
<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<div id="host">
<div id="child"></div>
</div>
<script>
const host = document.querySelector("#host");
const shadow_root = host.attachShadow({ mode: 'open', slotting: 'manual' });
const slot1 = document.createElement("slot");
const child1 = document.createElement("child");
const child = document.querySelector("#child");
slot1.assign([child1]);
shadow_root.appendChild(slot1);
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of insertBefore in manual-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
host.insertBefore(child1,child);
child1.remove();
}
return PerfTestRunner.now() - start;
}
});
}
</script>
third_party/blink/perf_tests/shadow_dom/imperative-api.html
View file @ 7ad39081
......@@ -9,7 +9,7 @@
const shadow_root = host.attachShadow({ mode: "open", slotting: "manual" });
window.onload = function() {
PerfTestRunner.measureTime({
description: "Measure performance of assign function in manual-slotting mode in shadow root.",
description: "Measure performance of slot assignment in manual-slotting mode in shadow root.",
run: function() {
const start = PerfTestRunner.now();
for (let i = 0; i < 100; i++) {
......@@ -19,7 +19,7 @@
child1.assignedSlot;
slot1.assignedElements();
slot1.remove();
PerfTestRunner.forceLayout();
child1.assignedSlot;
}
return PerfTestRunner.now() - start;
......
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