mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-23 21:01:08 +00:00
Bug 1769287 Update Speedometer to 2.1 r=perftest-reviewers,AlexandruIonescu
Differential Revision: https://phabricator.services.mozilla.com/D146323
This commit is contained in:
Alex Finder
parent
adf4640fef
commit
999f79eca9
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Speedometer 2.0 Interactive Runner</title>
|
||||
<title>Speedometer 2.1 Interactive Runner</title>
|
||||
<script src="resources/benchmark-runner.js" defer></script>
|
||||
<script src="resources/tests.js" defer></script>
|
||||
<style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
The source from this directory was copied from the
|
||||
PerformanceTests/Speedometer directory of the Webkit repository
|
||||
at: https://svn.webkit.org/repository/webkit/trunk
|
||||
at: https://svn.webkit.org/repository/webkit/trunk/PerformanceTests/Speedometer2.1/
|
||||
|
||||
The SVN revision used was: 222778
|
||||
The SVN revision used was: 294153
|
||||
|
||||
The contents of this directory are intended for use to "train" the
|
||||
profile guided optimization (PGO) of Firefox and for benchmarking
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Speedometer 1.0</title>
|
||||
<title>Speedometer 2.1</title>
|
||||
<link rel="stylesheet" href="resources/main.css">
|
||||
<script src="resources/main.js" defer></script>
|
||||
<script src="resources/benchmark-runner.js" defer></script>
|
||||
@ -20,7 +20,7 @@
|
||||
It uses demo web applications to simulate user actions such as adding to-do items.
|
||||
</p>
|
||||
<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>.
|
||||
</strong></p>
|
||||
<div class="buttons">
|
||||
@ -60,15 +60,17 @@
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<h1>About Speedometer</h1>
|
||||
<h1>About Speedometer 2.1</h1>
|
||||
|
||||
<p>Speedometer measures simulated user interactions in web applications.</p>
|
||||
<p>Speedometer tests a browser's Web app responsiveness by timing simulated user interactions.</p>
|
||||
|
||||
<p>
|
||||
The current benchmark uses TodoMVC to simulate user actions for adding, completing, and removing to-do items.
|
||||
Speedometer repeats the same actions using DOM APIs —
|
||||
a core set of web platform APIs used extensively in web applications —
|
||||
as well as six popular JavaScript frameworks: Ember.js, Backbone.js, jQuery, AngularJS, React, and Flight.
|
||||
This benchmark simulates user actions for adding, completing, and removing to-do items using multiple examples in TodoMVC.
|
||||
Each example in TodoMVC implements the same todo application using DOM APIs in different ways.
|
||||
Some call DOM APIs directly from ECMAScript 5 (ES5), ECMASCript 2015 (ES6), ES6 transpiled to ES5, and Elm transpiled to ES5.
|
||||
Others use one of eleven popular JavaScript frameworks: React, React with Redux, Ember.js, Backbone.js,
|
||||
AngularJS, (new) Angular, Vue.js, jQuery, Preact, Inferno, and Flight.
|
||||
|
||||
Many of these frameworks are used on the most popular websites in the world, such as Facebook and Twitter.
|
||||
The performance of these types of operations depends on the speed of the DOM APIs, the JavaScript engine,
|
||||
CSS style resolution, layout, and other technologies.
|
||||
@ -82,17 +84,22 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Some browser engines use an optimization strategy of doing some work asynchronously to reduce the run time of synchronous operations.
|
||||
Modern browser engines execute some work asynchronously as an optimization strategy to reduce the run time of synchronous operations.
|
||||
While returning control back to JavaScript execution as soon as possible is worth pursuing,
|
||||
a holistic, accurate measurement of web application performance involves measuring
|
||||
when these related, asynchronous computations actually complete.
|
||||
Thus, Speedometer measures the time browser spends executing those asynchronous tasks in Speedometer,
|
||||
estimated as the time between when a zero-second delay timer is scheduled and when it is fired.</p>
|
||||
the run time cost of such an asynchronous work should still be taken into a holistic measurement of web application performance.
|
||||
In addition, some modern JavaScript frameworks such as Vue.js and Preact call into DOM APIs asynchronously as an optimization technique.
|
||||
Speedometer approximates the run time of this asynchronous work in the UI thread with a zero-second timer
|
||||
that is scheduled immediately after each execution of synchronous operations.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Speedometer does not attempt to measure concurrent asynchronous work that does not directly impact the UI thread,
|
||||
which tends not to affect app responsiveness.
|
||||
</p>
|
||||
|
||||
<p class="note">
|
||||
<strong>Note:</strong> Speedometer is not meant to compare the performance of different JavaScript frameworks.
|
||||
The mechanism we use to simulate user actions is different for each framework,
|
||||
and we’re forcing frameworks to do more work synchronously than needed in some cases to ensure run time can be measured.
|
||||
<strong>Note:</strong> Speedometer should not be used as a way to compare the performance of different JavaScript frameworks
|
||||
as work load differs greatly in each framework.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -49,8 +49,12 @@ BenchmarkRunner.prototype.waitForElement = function (selector) {
|
||||
|
||||
function resolveIfReady() {
|
||||
var element = contentDocument.querySelector(selector);
|
||||
if (element)
|
||||
return promise.resolve(element);
|
||||
if (element) {
|
||||
window.requestAnimationFrame(function () {
|
||||
return promise.resolve(element);
|
||||
});
|
||||
return;
|
||||
}
|
||||
setTimeout(resolveIfReady, 50);
|
||||
}
|
||||
|
||||
@ -142,7 +146,9 @@ BenchmarkRunner.prototype._runTest = function(suite, test, prepareReturnValue, c
|
||||
var endTime = now();
|
||||
self._frame.contentWindow._unusedHeightValue = height; // Prevent dead code elimination.
|
||||
self._writeMark(suite.name + '.' + test.name + '-async-end');
|
||||
callback(syncTime, endTime - startTime, height);
|
||||
window.requestAnimationFrame(function () {
|
||||
callback(syncTime, endTime - startTime, height);
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
table {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -214,8 +214,9 @@ section#detailed-results > .show-about {
|
||||
}
|
||||
|
||||
section#about h1 {
|
||||
margin-top: 20px;
|
||||
font-size: 30px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
section#about .note {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Angular 4 TodoMVC example
|
||||
# Speedometer 2.1: Angular 4 TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Angular 1.6.5 TodoMVC example
|
||||
# Speedometer 2.1: Angular 1.6.5 TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Backbone.js TodoMVC example
|
||||
# Speedometer 2.1: Backbone.js TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
@ -8,4 +8,4 @@
|
||||
|
||||
## Build
|
||||
|
||||
There is no build step for this example.
|
||||
There is no build step for this example.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Ember.js TodoMVC example
|
||||
# Speedometer 2.1: Ember.js TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Preact TodoMVC example
|
||||
# Speedometer 2.1: Preact TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: React Redux TodoMVC example
|
||||
# Speedometer 2.1: React Redux TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: React TodoMVC example
|
||||
# Speedometer 2.1: React TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Vue.js TodoMVC example
|
||||
# Speedometer 2.1: Vue.js TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: ES2015 + Babel + Webpack TodoMVC example
|
||||
# Speedometer 2.1: ES2015 + Babel + Webpack TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: ES2015 TodoMVC example
|
||||
# Speedometer 2.1: ES2015 TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Speedometer 2.0: Vanilla JavaScript TodoMVC example
|
||||
# Speedometer 2.1: Vanilla JavaScript TodoMVC example
|
||||
|
||||
## Test locally
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user