Skip to content

Commit

Permalink
Change the printWidth configuration to 120 characters
Browse files Browse the repository at this point in the history 
Fixes WebKit#370
  • Loading branch information
@julienw
julienw committed Feb 9, 2024
1 parent 901818b commit 5c1e296
Show file tree
Hide file tree
Showing 87 changed files with 1,771 additions and 488 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"printWidth": 250,
"printWidth": 120,
"tabWidth": 4
}
124 changes: 98 additions & 26 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,68 +17,140 @@
<div class="section-grid">
<h1 class="section-header">About Speedometer 3</h1>
<div class="section-content">
<p>Speedometer 3 is a benchmark for web browsers that measures Web application responsiveness by timing simulated user interactions on various workloads.</p>
<p>
The following high level user journeys are implemented in the current version. Each of these journeys has one or more workloads which test important aspects of it - for example commonly used patterns, frameworks, or
technologies.
Speedometer 3 is a benchmark for web browsers that measures Web application responsiveness
by timing simulated user interactions on various workloads.
</p>
<p>
The following high level user journeys are implemented in the current version. Each of these
journeys has one or more workloads which test important aspects of it - for example commonly
used patterns, frameworks, or technologies.
</p>
<ul>
<li>Working with a todo list</li>
<ul>
<li>Measures the time to add, complete, and remove 100 todo items in a basic list.</li>
<li>Each example implements the same todo application (TodoMVC) using different techniques and frameworks.</li>
<li>
Workloads: <a href="resources/todomvc/vanilla-examples/javascript-es5/readme.md" target="_blank">TodoMVC-JavaScript-ES5</a>,
<a href="resources/todomvc/vanilla-examples/javascript-web-components/readme.md" target="_blank">TodoMVC-WebComponents</a>,
<a href="resources/todomvc/architecture-examples/react-complex/readme.md" target="_blank">TodoMVC-React-Complex-DOM</a>,
<a href="resources/todomvc/architecture-examples/backbone/readme.md" target="_blank">TodoMVC-Backbone</a>, <a href="resources/todomvc/architecture-examples/angular/readme.md" target="_blank">TodoMVC-Angular</a>,
<a href="resources/todomvc/architecture-examples/vue/readme.md" target="_blank">TodoMVC-Vue</a>, <a href="resources/todomvc/architecture-examples/jquery/readme.md" target="_blank">TodoMVC-jQuery</a>,
<a href="resources/todomvc/architecture-examples/preact/readme.md" target="_blank">TodoMVC-Preact</a>, <a href="resources/todomvc/architecture-examples/svelte/readme.md" target="_blank">TodoMVC-Svelte</a>,
<a href="resources/todomvc/architecture-examples/lit/readme.md" target="_blank">TodoMVC-Lit</a>
Each example implements the same todo application (TodoMVC) using different
techniques and frameworks.
</li>
<li>
Workloads:
<a
href="resources/todomvc/vanilla-examples/javascript-es5/readme.md"
target="_blank"
>TodoMVC-JavaScript-ES5</a
>,
<a
href="resources/todomvc/vanilla-examples/javascript-web-components/readme.md"
target="_blank"
>TodoMVC-WebComponents</a
>,
<a
href="resources/todomvc/architecture-examples/react-complex/readme.md"
target="_blank"
>TodoMVC-React-Complex-DOM</a
>,
<a href="resources/todomvc/architecture-examples/backbone/readme.md" target="_blank"
>TodoMVC-Backbone</a
>,
<a href="resources/todomvc/architecture-examples/angular/readme.md" target="_blank"
>TodoMVC-Angular</a
>,
<a href="resources/todomvc/architecture-examples/vue/readme.md" target="_blank"
>TodoMVC-Vue</a
>,
<a href="resources/todomvc/architecture-examples/jquery/readme.md" target="_blank"
>TodoMVC-jQuery</a
>,
<a href="resources/todomvc/architecture-examples/preact/readme.md" target="_blank"
>TodoMVC-Preact</a
>,
<a href="resources/todomvc/architecture-examples/svelte/readme.md" target="_blank"
>TodoMVC-Svelte</a
>,
<a href="resources/todomvc/architecture-examples/lit/readme.md" target="_blank"
>TodoMVC-Lit</a
>
</li>
</ul>
<li>Editing rich text</li>
<ul>
<li>Loading and styling text inside WYSIWYG and code editors.</li>
<li>Workloads: <a href="resources/editors/readme.md" target="_blank">Editor-CodeMirror</a>, <a href="resources/editors/readme.md" target="_blank">Editor-TipTap</a></li>
<li>
Workloads:
<a href="resources/editors/readme.md" target="_blank">Editor-CodeMirror</a>,
<a href="resources/editors/readme.md" target="_blank">Editor-TipTap</a>
</li>
</ul>
<li>Rendering charts</li>
<ul>
<li>Loading and interacting with SVG and canvas charts.</li>
<li>
Workloads: <a href="resources/charts/readme.md" target="_blank">Charts-observable-plot</a>, <a href="resources/charts/readme.md" target="_blank">Charts-chartjs</a>,
<a href="resources/react-stockcharts/readme.md" target="_blank">React-Stockcharts-SVG</a>, <a href="resources/perf.webkit.org/readme.md" target="_blank">Perf-Dashboard</a>
Workloads:
<a href="resources/charts/readme.md" target="_blank">Charts-observable-plot</a>,
<a href="resources/charts/readme.md" target="_blank">Charts-chartjs</a>,
<a href="resources/react-stockcharts/readme.md" target="_blank"
>React-Stockcharts-SVG</a
>, <a href="resources/perf.webkit.org/readme.md" target="_blank">Perf-Dashboard</a>
</li>
</ul>
<li>Reading a news site</li>
<ul>
<li>Navigating across pages and interacting with a typical looking news site.</li>
<li>Workloads: <a href="resources/newssite/news-next/readme.md" target="_blank">NewsSite-Next</a>, <a href="resources/newssite/news-nuxt/readme.md" target="_blank">NewsSite-Nuxt</a></li>
<li>
Workloads:
<a href="resources/newssite/news-next/readme.md" target="_blank">NewsSite-Next</a>,
<a href="resources/newssite/news-nuxt/readme.md" target="_blank">NewsSite-Nuxt</a>
</li>
</ul>
</ul>

<p class="note"><strong>Notes about methodology</strong></p>
<ul>
<li>Although user-driven actions like mouse movements and keyboard input cannot be fully emulated in JavaScript, Speedometer does its best to faithfully replay a typical workload within the demo applications.</li>
<li>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.</li>
<li>
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, the run time cost of such an asynchronous work should still be taken into a holistic measurement of web application performance. In addition, some JavaScript frameworks 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.
Although user-driven actions like mouse movements and keyboard input cannot be fully
emulated in JavaScript, Speedometer does its best to faithfully replay a typical
workload within the demo applications.
</li>
<li>
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.
</li>
<li>
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, the run time cost of such an
asynchronous work should still be taken into a holistic measurement of web application
performance. In addition, some JavaScript frameworks 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.
</li>
<li>
Speedometer does not attempt to measure concurrent asynchronous work (e.g. in Web
Workers).
</li>
<li>
Speedometer should not be used as a way to compare the performance of different
JavaScript frameworks.
</li>
<li>Speedometer does not attempt to measure concurrent asynchronous work (e.g. in Web Workers).</li>
<li>Speedometer should not be used as a way to compare the performance of different JavaScript frameworks.</li>
<li>
The goal of all workloads is to represent a scenario that could be found on the Web. Although all workloads strive to use patterns that are commonly used, some implementation details are Speedometer specific and should
not be used as a guideline on how to implement and deploy a standalone app. For example, due to constraints within the test harness, workloads must not depend on a server infrastructure to function properly and are
built as static files ahead of time.
The goal of all workloads is to represent a scenario that could be found on the Web.
Although all workloads strive to use patterns that are commonly used, some
implementation details are Speedometer specific and should not be used as a guideline on
how to implement and deploy a standalone app. For example, due to constraints within the
test harness, workloads must not depend on a server infrastructure to function properly
and are built as static files ahead of time.
</li>
</ul>
</div>
<div class="buttons section-footer">
<div class="button-row">
<a class="button" href="./" title="Show main section.">Home</a>
<a class="button" href="instructions.html" title="Show test instructions.">Test Instructions</a>
<a class="button" href="instructions.html" title="Show test instructions."
>Test Instructions</a
>
</div>
</div>
</div>
Expand Down
39 changes: 31 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,15 @@
<div class="version">3.0</div>
</a>
<div class="content">
<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>
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 <span id="min-screen-width">850px</span> by <span id="min-screen-height">650px</span>.<br />
Your browser window is too small. For most accurate results, please make the view port size
at least <span id="min-screen-width">850px</span> by
<span id="min-screen-height">650px</span>.<br />
It's currently <span id="screen-size"></span>.
</strong>
</p>
Expand Down Expand Up @@ -64,7 +69,9 @@ <h1>Score</h1>
<div id="confidence-number"></div>
<div class="buttons">
<div class="button-row">
<a class="button" href="#details" id="show-details" title="Show detailed results data.">Details</a>
<a class="button" href="#details" id="show-details" title="Show detailed results data."
>Details</a
>
</div>
</div>
</section>
Expand All @@ -89,13 +96,29 @@ <h2>Detailed Metrics</h2>
</div>
<div class="buttons section-footer">
<div class="button-row">
<a class="button" href="#summary" title="Go back to the simplified summary view.">Summary</a>
<a class="button" href="#summary" title="Go back to the simplified summary view."
>Summary</a
>
</div>
<div class="button-row export-buttons">
<button id="copy-full-json" title="Copy full result metrics as json string.">Copy JSON</button>
<a class="button" id="download-full-json" title="Download full result metrics as json string.">Download JSON</a>
<a class="button" id="download-classic-json" title="Download backwards-compatible result metrics as json string.">Download Classic JSON</a>
<a class="button" id="download-csv" title="Download all result metrics as CSV string.">Download CSV</a>
<button id="copy-full-json" title="Copy full result metrics as json string.">
Copy JSON
</button>
<a
class="button"
id="download-full-json"
title="Download full result metrics as json string."
>Download JSON</a
>
<a
class="button"
id="download-classic-json"
title="Download backwards-compatible result metrics as json string."
>Download Classic JSON</a
>
<a class="button" id="download-csv" title="Download all result metrics as CSV string."
>Download CSV</a
>
<button id="copy-csv" title="Copy all result metrics as CSV string.">Copy CSV</button>
</div>
</div>
Expand Down
9 changes: 7 additions & 2 deletions resources/charts/developer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,14 @@
<body>
<div id="app">
<h1>Demo page (not intended for workload)</h1>
<p>This page shows the various workloads to help with local development. The runner should open only one of them.</p>
<p>
This page shows the various workloads to help with local development. The runner should open only one of
them.
</p>
<details open>
<summary><strong>Observable Plot</strong> (<a href="./observable-plot.html">open in full page</a>)</summary>
<summary>
<strong>Observable Plot</strong> (<a href="./observable-plot.html">open in full page</a>)
</summary>
<iframe src="./observable-plot.html"></iframe>
</details>
<details open>
Expand Down
4 changes: 3 additions & 1 deletion resources/charts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ <h1>Charting workloads</h1>
<li><a href="./observable-plot.html">Observable Plot</a></li>
<li><a href="./chartjs.html">Chart.js</a></li>
</ul>
<p>You can also find the <a href="./developer.html">developer page</a> that includes all workloads in iframes.</p>
<p>
You can also find the <a href="./developer.html">developer page</a> that includes all workloads in iframes.
</p>
</body>
</html>
Loading

0 comments on commit 5c1e296

Please sign in to comment.