Bug 1961181 - Update StyleBench. r=perftest-reviewers,aglavic

This includes a new media query tests, and two changes that are relevant
to this regression:

 * b5b511804c
 * https://github.com/WebKit/WebKit/pull/44550

This makes sure this performance test measures what's intended to
measure.

Also updates mozilla.patch to account for
https://hg.mozilla.org/mozilla-central/rev/d40e89f84d6f59cdd9ba248feccb3f2bf6d48c74,
which landed without updating it, and updates README_MOZILLA to account
for WebKit's move to git.

Differential Revision: https://phabricator.services.mozilla.com/D246831
This commit is contained in:
Emilio Cobos Álvarez
2025-05-07 12:24:10 +00:00
committed by ealvarez@mozilla.com
parent f1a97648e9
commit c481d65c6b
10 changed files with 72 additions and 18 deletions

View File

@@ -5131,7 +5131,7 @@ Standard benchmarks are third-party tests (i.e. Speedometer) that we have integr
./mach raptor -t stylebench ./mach raptor -t stylebench
**Owner**: :emelio and Layout Team **Owner**: :emilio and Layout Team
* **alert threshold**: 2.0 * **alert threshold**: 2.0
* **apps**: firefox, chrome, safari * **apps**: firefox, chrome, safari

View File

@@ -5459,7 +5459,7 @@ For the sample commands found below, note that the capitalization used is import
./mach talos-test -a perf_reftest_singletons ./mach talos-test -a perf_reftest_singletons
* contact: :emelio and Layout team * contact: :emilio and Layout team
* source: `perf-reftest-singletons <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/perf-reftest-singletons>`__ * source: `perf-reftest-singletons <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/perf-reftest-singletons>`__
* type: `Page load`_ * type: `Page load`_
* reporting: intervals in ms (lower is better) * reporting: intervals in ms (lower is better)

View File

@@ -4,7 +4,7 @@ apps = "firefox, chrome, safari"
gecko_profile_interval = 1 gecko_profile_interval = 1
expose_browser_profiler = true expose_browser_profiler = true
lower_is_better = false lower_is_better = false
owner = ":emelio and Layout Team" owner = ":emilio and Layout Team"
page_cycles = 5 page_cycles = 5
page_timeout = 140000 page_timeout = 140000
subtest_lower_is_better = true subtest_lower_is_better = true

View File

@@ -662,7 +662,7 @@ suites:
167.36, 167.265, 167.75500000000002, 166.895, 167.735, 166.985, 166.275, 166.54000000000002, 165.61, 166.115, 167.36, 167.265, 167.75500000000002, 166.895, 167.735, 166.985, 166.275, 166.54000000000002, 165.61, 166.115,
166.64499999999998, 165.68, 167.64499999999998, 167.12, 168.15, 166.575, 166.335], 166.64499999999998, 165.68, 167.64499999999998, 167.12, 168.15, 166.575, 166.335],
perf_reftest_singletons: > perf_reftest_singletons: >
- contact: :emelio and Layout team - contact: :emilio and Layout team
- source: `perf-reftest-singletons <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/perf-reftest-singletons>`__ - source: `perf-reftest-singletons <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/perf-reftest-singletons>`__
- type: `Page load`_ - type: `Page load`_
- reporting: intervals in ms (lower is better) - reporting: intervals in ms (lower is better)

View File

@@ -1,8 +1,8 @@
The source from this directory was copied from the The source from this directory was copied from the
PerformanceTests/StyleBench directory of the Webkit repository PerformanceTests/StyleBench directory of the Webkit repository
at: https://svn.webkit.org/repository/webkit/trunk at: https://github.com/WebKit/WebKit/
The SVN revision used was: 234578 The git commit used was: aac8c557da9ae65151ba533ba8d5b1c7841e741c
The contents of this directory are intended for use to "train" the The contents of this directory are intended for use to "train" the
profile guided optimization (PGO) of Firefox and for benchmarking profile guided optimization (PGO) of Firefox and for benchmarking

View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>StyleBench 0.3</title> <title>StyleBench 0.4</title>
<link rel="stylesheet" href="resources/main.css"> <link rel="stylesheet" href="resources/main.css">
<script src="resources/main.js" defer></script> <script src="resources/main.js" defer></script>
<script src="resources/benchmark-runner.js" defer></script> <script src="resources/benchmark-runner.js" defer></script>
@@ -20,7 +20,7 @@
StyleBench is a browser benchmark that measures the performance of the style resolution mechanism. StyleBench is a browser benchmark that measures the performance of the style resolution mechanism.
</p> </p>
<p id="screen-size-warning"><strong> <p id="screen-size-warning"><strong>
Your browser window is too small. For most accurate results, please make the viewport size at least 850px by 650px.<br> 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>. It's currently <span id="screen-size"></span>.
</strong> </strong>
<div class="buttons"> <div class="buttons">

View File

@@ -65,6 +65,7 @@ index b33021d9d9ce..58b3e46982d1 100644
+ if (location.search == '?raptor') { + if (location.search == '?raptor') {
+ var data = ['raptor-benchmark', 'speedometer', measuredValuesByFullName]; + var data = ['raptor-benchmark', 'speedometer', measuredValuesByFullName];
+ window.postMessage(data, '*'); + window.postMessage(data, '*');
+ window.sessionStorage.setItem('benchmark_results', JSON.stringify(data));
+ } else if (typeof tpRecordTime !== "undefined") { + } else if (typeof tpRecordTime !== "undefined") {
+ var values = new Array; + var values = new Array;
+ var allNames = new Array; + var allNames = new Array;

View File

@@ -126,23 +126,23 @@ BenchmarkRunner.prototype._runTest = function(suite, test, prepareReturnValue, c
var contentWindow = self._frame.contentWindow; var contentWindow = self._frame.contentWindow;
var contentDocument = self._frame.contentDocument; var contentDocument = self._frame.contentDocument;
// Force style resolution before running the test to ensure we don't measure stuff unrelated to the test.
window._unusedHeightValue = contentDocument.body.getBoundingClientRect().height;
self._writeMark(suite.name + '.' + test.name + '-start'); self._writeMark(suite.name + '.' + test.name + '-start');
var startTime = now(); var startTime = now();
test.run(prepareReturnValue, contentWindow, contentDocument); test.run(prepareReturnValue, contentWindow, contentDocument);
// Force style resolution + layout to ensure we're measuring it.
window._unusedHeightValue = contentDocument.body.getBoundingClientRect().height;
var endTime = now(); var endTime = now();
self._writeMark(suite.name + '.' + test.name + '-sync-end'); self._writeMark(suite.name + '.' + test.name + '-sync-end');
var syncTime = endTime - startTime; var syncTime = endTime - startTime;
var startTime = now();
setTimeout(function () { setTimeout(function () {
// Some browsers don't immediately update the layout for paint. var asyncTime = 1;
// Force the layout here to ensure we're measuring the layout time.
var height = self._frame.contentDocument.body.getBoundingClientRect().height;
var endTime = now();
self._frame.contentWindow._unusedHeightValue = height; // Prevent dead code elimination.
self._writeMark(suite.name + '.' + test.name + '-async-end'); self._writeMark(suite.name + '.' + test.name + '-async-end');
callback(syncTime, endTime - startTime, height); callback(syncTime, asyncTime);
}, 0); }, 0);
} }

View File

@@ -19,6 +19,8 @@ class Random
chance(chance) chance(chance)
{ {
if (!chance)
return false;
return this.underOne() < chance; return this.underOne() < chance;
} }
@@ -72,9 +74,12 @@ class StyleBench
repeatingSequenceChance: 0.2, repeatingSequenceChance: 0.2,
repeatingSequenceMaximumLength: 3, repeatingSequenceMaximumLength: 3,
leafMutationChance: 0.1, leafMutationChance: 0.1,
mediaQueryChance: 0,
mediaQueryCloseChance: 0,
styleSeed: 1, styleSeed: 1,
domSeed: 2, domSeed: 2,
stepCount: 5, stepCount: 5,
isResizeTest: false,
mutationsPerStep: 100, mutationsPerStep: 100,
}; };
} }
@@ -132,6 +137,18 @@ class StyleBench
}); });
} }
static mediaQueryConfiguration()
{
return Object.assign(this.defaultConfiguration(), {
name: 'Dynamic media queries',
isResizeTest : true,
mediaQueryChance: 0.01,
mediaQueryCloseChance: 0.3,
starChance: 0,
elementCount: 5000,
});
}
static predefinedConfigurations() static predefinedConfigurations()
{ {
return [ return [
@@ -140,6 +157,7 @@ class StyleBench
this.structuralPseudoClassConfiguration(), this.structuralPseudoClassConfiguration(),
this.nthPseudoClassConfiguration(), this.nthPseudoClassConfiguration(),
this.beforeAndAfterConfiguration(), this.beforeAndAfterConfiguration(),
this.mediaQueryConfiguration(),
]; ];
} }
@@ -310,11 +328,33 @@ class StyleBench
return selector + " { " + this.makeDeclaration(selector) + " }"; return selector + " { " + this.makeDeclaration(selector) + " }";
} }
makeMediaQuery()
{
let width = this.random.number(500);
width = 300 + width - (width % 100);
if (this.random.chance(0.5))
return `@media (min-width: ${width}px) {`;
return `@media (max-width: ${width}px) {`;
}
makeStylesheet(size) makeStylesheet(size)
{ {
let cssText = ""; let cssText = "";
for (let i = 0; i < size; ++i)
let inMediaQuery = false;
for (let i = 0; i < size; ++i) {
if (!inMediaQuery && this.random.chance(this.configuration.mediaQueryChance)) {
cssText += this.makeMediaQuery() + "\n";;
inMediaQuery = true;
}
cssText += this.makeRule() + "\n"; cssText += this.makeRule() + "\n";
if (inMediaQuery && this.random.chance(this.configuration.mediaQueryCloseChance)) {
cssText += "}\n";
inMediaQuery = false;
}
}
return cssText; return cssText;
} }
@@ -496,6 +536,11 @@ class StyleBench
} }
} }
resizeViewToWidth(width)
{
window.frameElement.style.width = width + "px";
}
async runForever() async runForever()
{ {
while (true) { while (true) {

View File

@@ -1,7 +1,15 @@
function makeSteps(configuration) function makeSteps(configuration)
{ {
const steps = []; const steps = [];
for (i = 0; i < configuration.stepCount; ++i) { for (let i = 0; i < configuration.stepCount; ++i) {
if (configuration.isResizeTest) {
for (let width = 300; width <= 800; width += 50) {
steps.push(new BenchmarkTestStep(`Resizing to ${width}px - ${i}`, (bench, contentWindow, contentDocument) => {
bench.resizeViewToWidth(width);
}));
}
continue;
}
steps.push(new BenchmarkTestStep(`Adding classes - ${i}`, (bench, contentWindow, contentDocument) => { steps.push(new BenchmarkTestStep(`Adding classes - ${i}`, (bench, contentWindow, contentDocument) => {
bench.addClasses(configuration.mutationsPerStep); bench.addClasses(configuration.mutationsPerStep);
})); }));