| <!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> |