From 491acc2d64307e655fbeded8c871ef0d07e21997 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 30 Jan 2024 22:44:39 +0100 Subject: [PATCH] Update Speedometer2.1 content to latest runner (#348) Merge the speedometer2.1-content branch with the latest main branch to get the new developer-menu. --- .eslintignore | 34 +- .eslintrc | 2 +- .gitignore | 16 + .prettierignore | 33 +- InteractiveRunner.html | 2 + index.html | 94 +- package-lock.json | 1089 +- package.json | 12 +- resources/benchmark-report.mjs | 84 - resources/benchmark-runner.mjs | 441 +- resources/developer-mode.mjs | 253 + resources/interactive.mjs | 14 +- resources/main.css | 133 +- resources/main.mjs | 147 +- resources/metric-ui.mjs | 18 +- resources/metric.mjs | 6 +- resources/params.mjs | 95 +- resources/scripts/sanitize-language/index.js | 45 + .../scripts/sanitize-language/package.json | 6 + resources/statistics.mjs | 4 +- resources/tentative/editors/.gitignore | 26 - resources/tentative/editors/README.md | 27 - resources/tentative/editors/bigtext.js | 135 - resources/tentative/editors/codemirror.html | 200 - resources/tentative/editors/codemirror.js | 47 - .../dist/assets/codemirror-22d82ce2.js | 21911 -------- .../editors/dist/assets/index-54888ccc.css | 63 - .../editors/dist/assets/index.es-8aa334e1.js | 261 - .../editors/dist/assets/tiptap-5c6d7a65.js | 16361 ------ .../tentative/editors/dist/codemirror.html | 134 - resources/tentative/editors/dist/index.html | 32 - resources/tentative/editors/dist/tiptap.html | 134 - resources/tentative/editors/dist/vite.svg | 1 - resources/tentative/editors/index.html | 32 - resources/tentative/editors/package-lock.json | 2712 - resources/tentative/editors/package.json | 18 - resources/tentative/editors/public/vite.svg | 1 - resources/tentative/editors/screenshot.jpg | Bin 38282 -> 0 bytes resources/tentative/editors/smalltext.js | 9 - resources/tentative/editors/style.css | 63 - resources/tentative/editors/tiptap.html | 200 - resources/tentative/editors/tiptap.js | 43 - resources/tentative/editors/vite.config.js | 16 - .../tentative/react-stockcharts/.gitignore | 1 - .../tentative/react-stockcharts/README.md | 5 - .../build/asset-manifest.json | 17 - .../react-stockcharts/build/index.html | 1 - .../build/static/js/2.34438a6b.chunk.js | 3 - .../static/js/2.34438a6b.chunk.js.LICENSE.txt | 23 - .../build/static/js/2.34438a6b.chunk.js.map | 1 - .../build/static/js/main.c5bdbc28.chunk.js | 2 - .../static/js/main.c5bdbc28.chunk.js.map | 1 - .../build/static/js/runtime-main.177cc4f8.js | 2 - .../static/js/runtime-main.177cc4f8.js.map | 1 - .../react-stockcharts/package-lock.json | 41791 ---------------- .../tentative/react-stockcharts/package.json | 33 - .../react-stockcharts/public/index.html | 10 - .../tentative/react-stockcharts/src/chart.js | 198 - .../tentative/react-stockcharts/src/data.tsv | 1739 - .../tentative/react-stockcharts/src/index.js | 40 - .../tentative/react-stockcharts/src/utils.js | 22 - resources/tests.mjs | 70 + .../architecture-examples/angular/readme.md | 11 + .../architecture-examples/backbone/README.md | 11 + .../architecture-examples/jquery/README.md | 33 + .../architecture-examples/preact/readme.md | 16 + resources/translations.mjs | 623 + resources/warmup/index.html | 18 + tests/benchmark-runner-tests.mjs | 75 +- 69 files changed, 2947 insertions(+), 86754 deletions(-) delete mode 100644 resources/benchmark-report.mjs create mode 100644 resources/developer-mode.mjs create mode 100644 resources/scripts/sanitize-language/index.js create mode 100644 resources/scripts/sanitize-language/package.json delete mode 100644 resources/tentative/editors/.gitignore delete mode 100644 resources/tentative/editors/README.md delete mode 100644 resources/tentative/editors/bigtext.js delete mode 100644 resources/tentative/editors/codemirror.html delete mode 100644 resources/tentative/editors/codemirror.js delete mode 100644 resources/tentative/editors/dist/assets/codemirror-22d82ce2.js delete mode 100644 resources/tentative/editors/dist/assets/index-54888ccc.css delete mode 100644 resources/tentative/editors/dist/assets/index.es-8aa334e1.js delete mode 100644 resources/tentative/editors/dist/assets/tiptap-5c6d7a65.js delete mode 100644 resources/tentative/editors/dist/codemirror.html delete mode 100644 resources/tentative/editors/dist/index.html delete mode 100644 resources/tentative/editors/dist/tiptap.html delete mode 100644 resources/tentative/editors/dist/vite.svg delete mode 100644 resources/tentative/editors/index.html delete mode 100644 resources/tentative/editors/package-lock.json delete mode 100644 resources/tentative/editors/package.json delete mode 100644 resources/tentative/editors/public/vite.svg delete mode 100644 resources/tentative/editors/screenshot.jpg delete mode 100644 resources/tentative/editors/smalltext.js delete mode 100644 resources/tentative/editors/style.css delete mode 100644 resources/tentative/editors/tiptap.html delete mode 100644 resources/tentative/editors/tiptap.js delete mode 100644 resources/tentative/editors/vite.config.js delete mode 100644 resources/tentative/react-stockcharts/.gitignore delete mode 100644 resources/tentative/react-stockcharts/README.md delete mode 100644 resources/tentative/react-stockcharts/build/asset-manifest.json delete mode 100644 resources/tentative/react-stockcharts/build/index.html delete mode 100644 resources/tentative/react-stockcharts/build/static/js/2.34438a6b.chunk.js delete mode 100644 resources/tentative/react-stockcharts/build/static/js/2.34438a6b.chunk.js.LICENSE.txt delete mode 100644 resources/tentative/react-stockcharts/build/static/js/2.34438a6b.chunk.js.map delete mode 100644 resources/tentative/react-stockcharts/build/static/js/main.c5bdbc28.chunk.js delete mode 100644 resources/tentative/react-stockcharts/build/static/js/main.c5bdbc28.chunk.js.map delete mode 100644 resources/tentative/react-stockcharts/build/static/js/runtime-main.177cc4f8.js delete mode 100644 resources/tentative/react-stockcharts/build/static/js/runtime-main.177cc4f8.js.map delete mode 100644 resources/tentative/react-stockcharts/package-lock.json delete mode 100644 resources/tentative/react-stockcharts/package.json delete mode 100644 resources/tentative/react-stockcharts/public/index.html delete mode 100644 resources/tentative/react-stockcharts/src/chart.js delete mode 100644 resources/tentative/react-stockcharts/src/data.tsv delete mode 100644 resources/tentative/react-stockcharts/src/index.js delete mode 100644 resources/tentative/react-stockcharts/src/utils.js create mode 100644 resources/todomvc/architecture-examples/angular/readme.md create mode 100644 resources/todomvc/architecture-examples/backbone/README.md create mode 100644 resources/todomvc/architecture-examples/jquery/README.md create mode 100644 resources/todomvc/architecture-examples/preact/readme.md create mode 100644 resources/translations.mjs create mode 100644 resources/warmup/index.html diff --git a/.eslintignore b/.eslintignore index ec456ae..51b820f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,18 +1,50 @@ /node_modules **/dist package-lock.json +**/.angular -/resources/tentative +/resources/tentative/* /resources/todomvc/architecture-examples/* +!/resources/todomvc/architecture-examples/angular +!/resources/todomvc/architecture-examples/angular-complex !/resources/todomvc/architecture-examples/backbone +!/resources/todomvc/architecture-examples/backbone-complex +!/resources/todomvc/architecture-examples/lit +/resources/todomvc/architecture-examples/lit/.wireit +/resources/todomvc/architecture-examples/lit/dist/index.js +!/resources/todomvc/architecture-examples/lit-complex !/resources/todomvc/architecture-examples/preact +!/resources/todomvc/architecture-examples/preact-complex !/resources/todomvc/architecture-examples/react +!/resources/todomvc/architecture-examples/react-complex !/resources/todomvc/architecture-examples/react-redux +!/resources/todomvc/architecture-examples/react-redux-complex !/resources/todomvc/architecture-examples/svelte +!/resources/todomvc/architecture-examples/svelte-complex !/resources/todomvc/architecture-examples/vue +!/resources/todomvc/architecture-examples/vue-complex /resources/todomvc/vanilla-examples/* !/resources/todomvc/vanilla-examples/javascript-es5 +!/resources/todomvc/vanilla-examples/javascript-es5-complex !/resources/todomvc/vanilla-examples/javascript-es6 +!/resources/todomvc/vanilla-examples/javascript-es6-complex !/resources/todomvc/vanilla-examples/javascript-es6-webpack +!/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex +!/resources/todomvc/vanilla-examples/javascript-web-components +!/resources/todomvc/vanilla-examples/javascript-web-components-complex/ + +!/resources/todomvc/big-dom-generator + +!/resources/editors +/resources/editors/assets + +!/resources/newssite +!/resources/newssite/news-next +!/resources/newssite/news-nuxt +!/resources/newssite/news-site-css + +/resources/perf.webkit.org + +/resources/react-stockcharts diff --git a/.eslintrc b/.eslintrc index b8fd167..4a666df 100644 --- a/.eslintrc +++ b/.eslintrc @@ -24,7 +24,7 @@ */ { - "extends": ["eslint:recommended"], + "extends": ["eslint:recommended", "plugin:@typescript-eslint/base"], "env": { "browser": true, "node": true, diff --git a/.gitignore b/.gitignore index d8bab8c..fc30e25 100644 --- a/.gitignore +++ b/.gitignore @@ -8,14 +8,30 @@ .angular /resources/todomvc/architecture-examples/angular/node_modules/ +/resources/todomvc/architecture-examples/angular-complex/node_modules/ /resources/todomvc/architecture-examples/backbone/node_modules/ +/resources/todomvc/architecture-examples/backbone-complex/node_modules/ /resources/todomvc/architecture-examples/jquery/node_modules/ +/resources/todomvc/architecture-examples/jquery-complex/node_modules/ /resources/todomvc/architecture-examples/preact/node_modules/ +/resources/todomvc/architecture-examples/preact-complex/node_modules/ /resources/todomvc/architecture-examples/react/node_modules/ +/resources/todomvc/architecture-examples/react-complex/node_modules/ /resources/todomvc/architecture-examples/react-redux/node_modules/ +/resources/todomvc/architecture-examples/react-redux-complex/node_modules/ /resources/todomvc/architecture-examples/svelte/node_modules/ +/resources/todomvc/architecture-examples/svelte-complex/node_modules/ /resources/todomvc/architecture-examples/vue/node_modules/ +/resources/todomvc/architecture-examples/vue-complex/node_modules/ +/resources/todomvc/architecture-examples/lit-complex/node_modules/ /resources/todomvc/vanilla-examples/javascript-es5/node_modules/ +/resources/todomvc/vanilla-examples/javascript-es5-complex/node_modules/ /resources/todomvc/vanilla-examples/javascript-es6/node_modules/ +/resources/todomvc/vanilla-examples/javascript-es6-complex/node_modules/ /resources/todomvc/vanilla-examples/javascript-es6-webpack/node_modules/ +/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/node_modules/ +/resources/todomvc/vanilla-examples/javascript-web-components-complex/node_modules/ + +/resources/charts/node_modules/ +/resources/todomvc/big-dom-generator/node_modules/ diff --git a/.prettierignore b/.prettierignore index 8437f15..53472ed 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,19 +1,50 @@ /node_modules **/dist package-lock.json +**/.angular /resources/tentative/* -!/resources/tentative/editors /resources/todomvc/architecture-examples/* +!/resources/todomvc/architecture-examples/angular +!/resources/todomvc/architecture-examples/angular-complex !/resources/todomvc/architecture-examples/backbone +!/resources/todomvc/architecture-examples/backbone-complex +!/resources/todomvc/architecture-examples/lit +/resources/todomvc/architecture-examples/lit/dist/index.js +/resources/todomvc/architecture-examples/lit/.wireit +!/resources/todomvc/architecture-examples/lit-complex !/resources/todomvc/architecture-examples/preact +!/resources/todomvc/architecture-examples/preact-complex !/resources/todomvc/architecture-examples/react +!/resources/todomvc/architecture-examples/react-complex !/resources/todomvc/architecture-examples/react-redux +!/resources/todomvc/architecture-examples/react-redux-complex !/resources/todomvc/architecture-examples/svelte +!/resources/todomvc/architecture-examples/svelte-complex !/resources/todomvc/architecture-examples/vue +!/resources/todomvc/architecture-examples/vue-complex /resources/todomvc/vanilla-examples/* !/resources/todomvc/vanilla-examples/javascript-es5 +!/resources/todomvc/vanilla-examples/javascript-es5-complex !/resources/todomvc/vanilla-examples/javascript-es6 +!/resources/todomvc/vanilla-examples/javascript-es6-complex !/resources/todomvc/vanilla-examples/javascript-es6-webpack +!/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex +!/resources/todomvc/vanilla-examples/javascript-web-components +!/resources/todomvc/vanilla-examples/javascript-web-components-complex/ + +!/resources/todomvc/big-dom-generator + +!/resources/editors +/resources/editors/assets + +!/resources/newssite +!/resources/newssite/news-next +!/resources/newssite/news-nuxt +!/resources/newssite/news-site-css + +/resources/perf.webkit.org + +/resources/react-stockcharts diff --git a/InteractiveRunner.html b/InteractiveRunner.html index dbb1846..26bed2b 100644 --- a/InteractiveRunner.html +++ b/InteractiveRunner.html @@ -1,6 +1,8 @@ + + Speedometer 3.0 Interactive Runner diff --git a/index.html b/index.html index d519106..9b8a7e2 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Speedometer 3.0 @@ -12,6 +13,7 @@

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.

@@ -35,10 +37,11 @@
-
+
@@ -49,6 +52,7 @@

Score

@@ -68,13 +72,14 @@

Detailed Results

-

Total

-
+

Geomean

+

Tests

@@ -88,8 +93,9 @@ Summary
- Download JSON - + + Download JSON + Download Classic JSON Download CSV
@@ -100,34 +106,68 @@
-

About Speedometer 2.1

+

About Speedometer 3

-

Speedometer tests a browser's Web app responsiveness by timing simulated user interactions.

- +

Speedometer 3 is a benchmark for web browsers that measures Web application responsiveness by timing simulated user interactions on various workloads.

- 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. + 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.

+ -

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

- -

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

- -

Speedometer does not attempt to measure concurrent asynchronous work that does not directly impact the UI thread, which tends not to affect app responsiveness.

- -

Note: Speedometer should not be used as a way to compare the performance of different JavaScript frameworks as work load differs greatly in each framework.

+

Notes about methodology

+
    +
  • 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.
  • +
  • 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.
  • +
  • + 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. +
  • +
  • Speedometer does not attempt to measure concurrent asynchronous work (e.g. in Web Workers).
  • +
  • Speedometer should not be used as a way to compare the performance of different JavaScript frameworks.
  • +
  • + 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. +
  • +