Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/googlechromelabs/css-selector-benchmark
CSS Selector Benchmarks, using PerfTestRunner and Puppeteer
https://github.com/googlechromelabs/css-selector-benchmark
css performance puppeteer
Last synced: about 2 months ago
JSON representation
CSS Selector Benchmarks, using PerfTestRunner and Puppeteer
- Host: GitHub
- URL: https://github.com/googlechromelabs/css-selector-benchmark
- Owner: GoogleChromeLabs
- License: apache-2.0
- Created: 2024-09-24T11:09:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-03T22:44:01.000Z (3 months ago)
- Last Synced: 2024-11-27T04:14:27.852Z (about 2 months ago)
- Topics: css, performance, puppeteer
- Language: HTML
- Homepage:
- Size: 235 KB
- Stars: 18
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING
- License: LICENSE
Awesome Lists containing this project
README
# CSS Selector Benchmark
CSS Selector Benchmarks, using PerfTestRunner and Puppeteer
## Prerequisites
### Project Setup
Install dependencies
```bash
npm i
```
Install browsers to test with
```bash
npx puppeteer browsers install chrome
npx puppeteer browsers install firefox
```
### Start the web server
The benchmarks are HTML pages which need to be served by a web server
```bash
npm run start
```
The Web Server is now running at http://localhost:3000/
## Running a benchmark
With the Web Server running, invoke a benchmark on the CLI:
```bash
npm run benchmark example
```
This will run the benchmark served by `http://localhost:3000/benchmarks/example/`, whose source is located at `./src/benchmarks/example/index.html`
Note: You can also run benchmarks directly in a browser. To do so, visit its URL and invoke `window.startTest().then(console.table);` on the Console.
### Choosing which browser to run the benchmarks in
To select which browser to test things in, use the `--browser` option.
```bash
npm run benchmark example -- --browser=firefox
```
Supported options:
- `chrome` = Use Chrome
- `chrome` = Use Chrome Stable
- `chrome-beta` = Use Chrome Beta
- `chrome-dev` = Use Chrome Dev
- `chrome-canary` = Use Chrome Canary
- `firefox`= Use Firefox
The default used browser is `chrome`.
A note will be printed on screen to show which version you are using. For example:
```
ℹ️ Running benchmark using browser firefox (firefox/129.0a1)
```
## Creating a benchmark
Benchmarks are HTML pages stored in a subfolder in `./src/benchmarks/`. The page **MUST** expose a `window.startTest` method which returns a promise. When the test logic is done, it **MUST** resolve that promise.
This `window.startTest` is automatically invoked by `npm run benchmark x` when the page has loaded. Once `window.startTest` has resolved, the benchmark will be closed and any returned output will be logged.
Using [Chromium’s `PerfTestRunner`](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/perf_tests/resources/runner.js), a typical test looks like this:
```html
import PerfTestRunner from '/lib/PerfTestRunner.js';
window.startTest = () => new Promise((resolve, reject) => {
PerfTestRunner.measureRunsPerSecond({
description: 'This is an example benchmark',
run: function () {
// Benchmark logic here, e.g. a document.querySelectorAll call in a loop
},
done: resolve,
});
});
```
Naming your benchmark `index.html` is not required, but then you need to append the filename to the invocation, e.g. `npm run benchmark dom/qsa.html`.