nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/PerformanceTests/StyleBench/index.html

80 lines
3.5 KiB
HTML
Raw Permalink Normal View History

Add StyleBench https://bugs.webkit.org/show_bug.cgi?id=180140 Reviewed by Simon Fraser and Joseph Pecoraro. StyleBench tests performance of the CSS style resolution and style invalidation. Each test run creates a large document and a large stylesheet using varying settings. It then applies a series of mutations to the document and measures the time to update the style and rendering. The resulting layout is simple, most of the pressure is on selector matching. StyleBench uses Speedometer framework for UI and measurements. For profiling purposes, it can also be run locally by opening style-bench.html directly. There are currently four subtests: - child and descendant combinators only (all other tests have these too). - sibling combinators: '~' and '+' - positional pseudo classes: :nth-child and similar - ::before and ::after pseudo elements The measured DOM mutations are: - add classes - remove classes - add leaf elements - remove leaf elements * StyleBench: Added. * StyleBench/InteractiveRunner.html: Added. Copied and customized from Speedometer. * StyleBench/index.html: Added. Copied and customized from Speedometer. * StyleBench/resources: Added. * StyleBench/resources/style-bench.html: Added. * StyleBench/resources/style-bench.js: Added. The test class. (Random): (Random.prototype.get next): (Random.prototype.chance): (Random.prototype.number): (nextAnimationFrame): (defaultConfiguration): (descendantCombinatorConfiguration): (siblingCombinatorConfiguration): (pseudoClassConfiguration): (beforeAndAfterConfiguration): (predefinedConfigurations): Four predefined configurations. (prototype.randomElementName): (prototype.randomCombinator): (prototype.randomPseudoClass): (prototype.makeSimpleSelector): (prototype.makeSelector): (prototype.get randomColorComponent): (prototype.makeDeclaration): (prototype.makeRule): (prototype.makeStylesheet): (prototype.makeStyle): (prototype.makeElement): (prototype.makeTreeWithDepth): (prototype.makeTree): (prototype.updateCachedTestElements): (prototype.randomTreeElement): (prototype.addClasses): (prototype.removeClasses): (prototype.addLeafElements): (prototype.removeLeafElements): (prototype.async.runForever): * StyleBench/resources/tests.js: Added. (makeSteps): (makeSuite): Generates Speedometer Suites. Canonical link: https://commits.webkit.org/196181@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@225324 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-11-30 12:30:25 +00:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Add StyleBench subtest for dynamic media query performance https://bugs.webkit.org/show_bug.cgi?id=205263 Reviewed by Zalan Bujtas. Add a subtest that contains a small number of rules inside min/max-width media queries. The test is executed by resizing the test frame to various widths. * StyleBench/index.html: * StyleBench/resources/style-bench.js: (Random.prototype.chance): (defaultConfiguration): (mediaQueryConfiguration): (predefinedConfigurations): * StyleBench/resources/tests.js: (makeSteps): Canonical link: https://commits.webkit.org/218476@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@253560 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2019-12-16 17:57:52 +00:00
<title>StyleBench 0.4</title>
Make StyleBench compatible with run-benchmark and run-perf-tests https://bugs.webkit.org/show_bug.cgi?id=182262 Reviewed by Antti Koivisto. Copied resource files referenced from Speedometer directory since run-benchmark needs to be able to checkout each benchmark separately. Removed the code to create tests of the same name five times in makeSteps since this won't be compatible with either run-benchmark or run-perf-tests. * StyleBench/index.html: Removed the code to show warnings for local files since run-benchmark doesn't use HTTP server in WebDriver mode. * StyleBench/resources/benchmark-report.js: Copied from resources/benchmark-report.js. * StyleBench/resources/benchmark-runner.js: Copied from resources/benchmark-runner.js. (BenchmarkRunner.prototype._finalize): Use the correction factor of 8 instead of 5 in StyleBench. * StyleBench/resources/gauge.png: Copied from resources/gauge.png. * StyleBench/resources/gauge@2x.png: Copied from resources/gauge@2x.png. * StyleBench/resources/main.css: Copied from resources/main.css. * StyleBench/resources/main.js: Copied from resources/main.js. * StyleBench/resources/tests.js: (makeSteps): Only make each test once. Canonical link: https://commits.webkit.org/198063@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@227756 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2018-01-29 22:09:07 +00:00
<link rel="stylesheet" href="resources/main.css">
<script src="resources/main.js" defer></script>
<script src="resources/benchmark-runner.js" defer></script>
<script src="resources/benchmark-report.js" defer></script>
Add StyleBench https://bugs.webkit.org/show_bug.cgi?id=180140 Reviewed by Simon Fraser and Joseph Pecoraro. StyleBench tests performance of the CSS style resolution and style invalidation. Each test run creates a large document and a large stylesheet using varying settings. It then applies a series of mutations to the document and measures the time to update the style and rendering. The resulting layout is simple, most of the pressure is on selector matching. StyleBench uses Speedometer framework for UI and measurements. For profiling purposes, it can also be run locally by opening style-bench.html directly. There are currently four subtests: - child and descendant combinators only (all other tests have these too). - sibling combinators: '~' and '+' - positional pseudo classes: :nth-child and similar - ::before and ::after pseudo elements The measured DOM mutations are: - add classes - remove classes - add leaf elements - remove leaf elements * StyleBench: Added. * StyleBench/InteractiveRunner.html: Added. Copied and customized from Speedometer. * StyleBench/index.html: Added. Copied and customized from Speedometer. * StyleBench/resources: Added. * StyleBench/resources/style-bench.html: Added. * StyleBench/resources/style-bench.js: Added. The test class. (Random): (Random.prototype.get next): (Random.prototype.chance): (Random.prototype.number): (nextAnimationFrame): (defaultConfiguration): (descendantCombinatorConfiguration): (siblingCombinatorConfiguration): (pseudoClassConfiguration): (beforeAndAfterConfiguration): (predefinedConfigurations): Four predefined configurations. (prototype.randomElementName): (prototype.randomCombinator): (prototype.randomPseudoClass): (prototype.makeSimpleSelector): (prototype.makeSelector): (prototype.get randomColorComponent): (prototype.makeDeclaration): (prototype.makeRule): (prototype.makeStylesheet): (prototype.makeStyle): (prototype.makeElement): (prototype.makeTreeWithDepth): (prototype.makeTree): (prototype.updateCachedTestElements): (prototype.randomTreeElement): (prototype.addClasses): (prototype.removeClasses): (prototype.addLeafElements): (prototype.removeLeafElements): (prototype.async.runForever): * StyleBench/resources/tests.js: Added. (makeSteps): (makeSuite): Generates Speedometer Suites. Canonical link: https://commits.webkit.org/196181@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@225324 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-11-30 12:30:25 +00:00
<script src="../resources/statistics.js" defer></script>
<script src="resources/style-bench.js" defer></script>
<script src="resources/tests.js" defer></script>
</head>
<body>
<main>
<a id="logo-link" href="javascript:showHome()"></a>
<section id="home" class="selected">
<p>
StyleBench is a browser benchmark that measures the performance of the style resolution mechanism.
</p>
<p id="screen-size-warning"><strong>
Your browser window is too small. For most accurate results, please make the view port size at least 850px by 650px.<br>
It's currently <span id="screen-size"></span>.
</strong>
<div class="buttons">
<button onclick="startTest()">Start Test</button>
</div>
<p class="show-about"><a href="javascript:showAbout()">About StyleBench</a></p>
</section>
<section id="running">
<div id="testContainer"></div>
<div id="progress"><div id="progress-completed"></div></div>
<div id="info"></div>
</section>
<section id="summarized-results">
<h1>Runs / Minute</h1>
<div class="gauge"><div class="window"><div class="needle"></div></div></div>
<hr>
<div id="result-number"></div>
<div id="confidence-number"></div>
<div class="buttons">
<button onclick="startTest()">Test Again</button>
<button class="show-details" onclick="showResultDetails()">Details</button>
</div>
</section>
<section id="detailed-results">
<h1>Detailed Results</h1>
<table class="results-table"></table>
<table class="results-table"></table>
<div class="arithmetic-mean"><label>Arithmetic Mean:</label><span id="results-with-statistics"></span></div>
<div class="buttons">
<button onclick="startTest()">Test Again</button>
<button id="show-summary" onclick="showResultsSummary()">Summary</button>
</div>
<p class="show-about"><a href="javascript:showAbout()">About StyleBench</a></p>
</section>
<section id="about">
<h1>About StyleBench</h1>
<p>StyleBench tests performance of CSS style resolution and style invalidation. Each test run creates a large document and a large stylesheet using varying settings. It then applies a series of mutations to the document and measures the time to update the rendering. The resulting layout is simple, most of the pressure is on selector matching.</p>
<p>StyleBench uses Speedometer framework for UI and measurements.</p>
</section>
<section id="local-message">
<h2>Access via 'file:' protocol</h1>
<p>To run locally, launch a web server under PerformanceTests directory with 'python -m SimpleHTTPServer 8001' and access via <a href="http://localhost:8001/StyleBench">http://localhost:8001/StyleBench</a>.
</p>
<p>
Individual tests (without measurement) can also be run locally by opening <a href="resources/style-bench.html">PerformanceTests/StyleBench/resources/style-bench.html</a>
</p>
</section>
</main>
</body>
</html>