<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Speedometer 1.0</title>
<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>
<script src="../resources/statistics.js" defer></script>
<script src="resources/tests.js" defer></script>
</head>
<body>
<main>
<a id="logo-link" href="javascript:showHome()"><img id="logo" src="resources/logo.png"></a>
<section id="home" class="selected">
<p>
Speedometer is a browser benchmark that measures the responsiveness of Web applications.
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 view port size at least 850px by 650px.<br>
It's currently <span id="screen-size"></span>.
</strong></p>
<div class="buttons">
<button onclick="startTest()">Start Test</button>
</div>
<p class="show-about"><a href="javascript:showAbout()">About Speedometer</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 Speedometer</a></p>
</section>
<section id="about">
<h1>About Speedometer</h1>
<p>Speedometer measures simulated user interactions in web applications.</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.
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.
</p>
<p>
Although user-driven actions like mouse movements and keyboard input cannot be accurately emulated in JavaScript,
Speedometer does its best to faithfully replay a typical workload within the demo applications.
To make the run time long enough to measure with the limited precision,
we synchronously execute a large number of the operations, such as adding one hundred to-do items.
</p>
<p>
Some browser engines use an optimization strategy of doing some work asynchronously 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>
<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.
</p>
</section>
</main>
</body>
</html>
Codebase Browser
chromium