{"id":13547972,"url":"https://github.com/speedracer/speedracer","last_synced_at":"2025-05-15T23:06:55.802Z","repository":{"id":57367309,"uuid":"89914790","full_name":"speedracer/speedracer","owner":"speedracer","description":"Collect performance metrics for your library/application.","archived":false,"fork":false,"pushed_at":"2022-07-24T17:31:36.000Z","size":1661,"stargazers_count":1859,"open_issues_count":7,"forks_count":23,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-05T17:21:22.269Z","etag":null,"topics":["chrome-headless","performance","performance-analysis","performance-metrics","performance-test","performance-testing","runner"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/speedracer.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-01T10:19:14.000Z","updated_at":"2025-04-22T19:16:48.000Z","dependencies_parsed_at":"2022-08-23T19:30:31.483Z","dependency_job_id":null,"html_url":"https://github.com/speedracer/speedracer","commit_stats":null,"previous_names":["ngryman/speedracer"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speedracer%2Fspeedracer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speedracer%2Fspeedracer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speedracer%2Fspeedracer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speedracer%2Fspeedracer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/speedracer","download_url":"https://codeload.github.com/speedracer/speedracer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436947,"owners_count":22070947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-headless","performance","performance-analysis","performance-metrics","performance-test","performance-testing","runner"],"created_at":"2024-08-01T12:01:03.961Z","updated_at":"2025-05-15T23:06:49.714Z","avatar_url":"https://github.com/speedracer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Analyzers"],"sub_categories":["Meetups"],"readme":"**:wave: Speedracer was a great experiment but it's not maintained anymore. Let me know if you know a good alternative that I can redirect to.**\n\n\u003ch1 align=\"center\"\u003espeedracer\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  :racing_car::boom: ............ :red_car::taxi::blue_car::police_car::fire_engine::minibus::truck::bus::articulated_lorry::tractor:\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Speed Racer\" src=\"https://raw.githubusercontent.com/ngryman/artworks/master/speedracer/heading/speedracer@2x.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Collect performance metrics for your library/application.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"//travis-ci.org/speedracer/speedracer\"\u003e\n    \u003cimg alt=\"Build Status\" src=\"https://img.shields.io/travis/speedracer/speedracer.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"//codecov.io/github/speedracer/speedracer\"\u003e\n    \u003cimg alt=\"Build Status\" src=\"https://img.shields.io/codecov/c/github/speedracer/speedracer.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://speedracerhq.herokuapp.com/\"\u003e\n    \u003cimg alt=\"Say hi!\" src=\"https://speedracerhq.herokuapp.com/badge.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nSpeed Racer is a performance runner, like a test runner, but for performance :racing_car:. It runs scripts (*races*) in Chrome (headlessly if possible) and produces detailed **traces** and **reports** on scripting, rendering and painting.\n\n\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cb\u003e\n    See what's new in :package:\n    \u003ca href=\"//github.com/speedracer/speedracer/releases/tag/v0.2.0\"\u003e0.2.0\u003c/a\u003e\n    or what's being cooked for :package:\n    \u003ca href=\"//github.com/speedracer/speedracer/projects/2\"\u003e0.3.0\u003c/a\u003e\n  \u003c/b\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n## Installation\n\n```sh\nnpm install -g speedracer\n```\n\nSpeed Racer needs **Google Chrome** to run your files. It will run it headlessly if it finds a proper intallation of Canary (Mac OS X only for now).\n\n\n## Usage\n\nSpeed Racer comes with two commands right now:\n - `run`: collect performance metrics and save them.\n - `display`: display a summary of generated reports.\n\n### Create races\n\nA race can be seen as a unit test. It contains a piece of code that will be profiled by Speed Racer. Under the hood, it uses [Chrome DevTools protocol] to drive Chrome and collect traces.\nRaces can import `es6` / `commonjs` modules and use most of `es6` features, depending on your version of Google Chrome: [es6 support](https://www.chromestatus.com/features)\n\nHere is an example of a file containing a race:\n```js\nimport race from 'speedracer'\n\nrace('my first race', () =\u003e {\n  // ... stuff to profile\n})\n```\n\nYou can define as many races as you want per file, Speed Racer will collect and run them sequentially.\n\nYou can also define asynchronous races like so:\n```js\nimport race from 'speedracer'\n\nrace('my first async race', () =\u003e\nnew Promise(resolve =\u003e {\n  // ... stuff to profile\n  resolve()\n}))\n```\n\n[Chrome DevTools protocol]: https://chromedevtools.github.io/devtools-protocol/\n\n### Run races\n\nThen you need to collect metrics!\n\nFor each race, Speed Racer will produce two artifacts:\n - a **trace**: a raw dump of Google Chrome tracing events, it contains a lot of detailed metrics about your race.\n - a **report**: a report created by Speed Racer from those events, it summarizes important metrics.\n\nThose artifacts will be saved in the `.speedracer` directory by default.\n\nTo run races, type `speedracer run perf/*.js` or simply `speedracer perf/*.js`. Note that it will run all `.js` files in the `perf` directory by default, so you can omit `perf/*.js` if you are using this directory.\n\nFor more details, type `speedracer run --help`.\nYou can browse examples [here](https://github.com/speedracer/speedracer/tree/master/test/fixtures).\n\n### Display reports\n\nOnce the artifacts have been created, you can quickly display a summary report for each run. Type `speedracer display` to see all the reports or `speedracer display .speedracer/a-file-name/*` to see the reports of a specific file.\n\nFor more details, type `speedracer display --help`.\n\n## Go further\n\nSpeed Racer is still a baby so it does not provide advanced analysis yet, just a basic summary. But it has several goals:\n - **regression testing**: compare runs over time and report how it's faster/slower.\n - **benchmarking**: compare several races to see which is the best.\n - **analysis**: give precise insights of what is slow and why.\n - **auditing**: give advices on how to improve performance.\n\nIf you want to use Speed Racer for one of this use cases, you can leverage it and analyze the traces and reports it produces. I would be glad to receive your feedback and ideas on the subject!\n\n### Traces\n\nTraces are `json` files with the `.trace.gz` extension. They are basically **huge** arrays of events produced by Google Chrome. Those events give tons of informations about the overall performance of race. Here is the detail [format](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview#heading=h.uxpopqvbjezh).\n\nTraces can be pretty big, so they are saved `gziped`.\n\nYou can analyze them the way you want or load them in the Timeline/Performance tab of Chrome like so:\n\n1. Locate and decompress your trace:\n\n```sh\n# first you need to locate and decompress the trace\n\n$ cd .speedracer\n$ ls\ntext-fixtures-multiple\n$ cd text-fixtures-multiple\n$ ls\nrender-60-frames.speedracer\nrender-60-frames.trace.gz\nsearch-10e4-first-primes-very-long.speedracer\nsearch-10e4-first-primes-very-long.trace.gz\n$ gunzip render-60-frames.trace.gz\n```\n\n2. Load it in Chrome Devtools or use [DevTools Timeline Viewer](https://chromedevtools.github.io/timeline-viewer/) and enjoy :tada:\n\n### Reports\n\nReports are `json` files with the `.speedracer` extension. They provide a performance summary for a given race.\n\nHere is the format:\n```json\n{\n  \"meta\": {\n    \"title\": \"render 60 frames\",\n    \"group\": \"test-fixtures-multiple\",\n    \"id\": \"render-60-frames\"\n  },\n  \"profiling\": {\n    \"categories\": {\n      \"scripting\": 13.217000007629395,\n      \"rendering\": 11.370999991893768,\n      \"painting\": 9.248999938368797\n    },\n    \"events\": {\n      \"Animation Frame Fired\": 7.994999974966049,\n      \"Composite Layers\": 7.0119999796152115,\n      \"Update Layer Tree\": 6.503000020980835,\n      \"JS Frame\": 5.1060000360012054,\n      \"Recalculate Style\": 4.867999970912933,\n      \"Paint\": 2.236999958753586,\n      \"Run Microtasks\": 0.11599999666213989\n    },\n    \"functions\": {\n      \"FireAnimationFrame\": 7.994999974966049,\n      \"CompositeLayers\": 7.0119999796152115,\n      \"UpdateLayerTree\": 6.503000020980835,\n      \"UpdateLayoutTree\": 4.867999970912933,\n      \"f:render@24\": 2.32600000500679,\n      \"Paint\": 2.236999958753586,\n      \"f:requestAnimationFrame@\": 2.1010000109672546,\n      \"f:ws.onmessage@24\": 0.1940000057220459,\n      \"f:finishRace@24\": 0.15600000321865082,\n      \"f:@\": 0.1300000101327896,\n      \"RunMicrotasks\": 0.11599999666213989,\n      \"f:Promise@\": 0.10099999606609344,\n      \"f:startRace@24\": 0.09800000488758087\n    }\n  },\n  \"rendering\": {\n    \"firstPaint\": 0.00805,\n    \"fps\": {\n      \"mean\": 60.98,\n      \"variance\": 3.9,\n      \"sd\": 1.97,\n      \"lo\": 56.92,\n      \"hi\": 63.47\n    }\n  }\n}\n```\n\nYou can display, analyze or compare them depending on your needs.\n\n---\n\n\u003cp align=\"center\"\u003e\n  :racing_car::boom: ............ :red_car::taxi::blue_car::police_car::fire_engine::minibus::truck::bus::articulated_lorry::tractor:\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspeedracer%2Fspeedracer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspeedracer%2Fspeedracer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspeedracer%2Fspeedracer/lists"}