Rename DoYouEvenBench 0.17 to Speedometer 1.0 and add a new look.
[WebKit-https.git] / PerformanceTests / DoYouEvenBench / Full.html
index a0c238e3d4be33600950c4f2e0b8478da29a3a42..419b9f21dd7fe1d83f5c6364434cddc752dff82b 100644 (file)
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>DoYouEvenBench v0.17</title>
+    <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/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 &mdash;
+            a core set of web platform APIs used extensively in web applications &mdash;
+            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>