{"id":19670169,"url":"https://github.com/tostaylo/front-end-framework-bench","last_synced_at":"2026-01-29T21:36:57.646Z","repository":{"id":155177877,"uuid":"293151711","full_name":"tostaylo/front-end-framework-bench","owner":"tostaylo","description":"Automated browser rendering performance benchmarking suite for front-end frameworks.  Results -\u003e https://tostaylo.github.io/front-end-framework-bench-viewer/","archived":false,"fork":false,"pushed_at":"2024-12-11T17:52:15.000Z","size":180,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T09:56:31.144Z","etag":null,"topics":["automated-testing","framework","framework-bench","puppeteer","react","rust","rust-wasm","svelte","vue","web","web-components"],"latest_commit_sha":null,"homepage":"https://tostaylo.github.io/front-end-framework-bench-viewer/","language":"Rust","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/tostaylo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-05T20:46:04.000Z","updated_at":"2024-12-11T17:52:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"ca6740ec-0e13-472f-9ebf-0769dea7b27f","html_url":"https://github.com/tostaylo/front-end-framework-bench","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/tostaylo/front-end-framework-bench","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tostaylo%2Ffront-end-framework-bench","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tostaylo%2Ffront-end-framework-bench/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tostaylo%2Ffront-end-framework-bench/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tostaylo%2Ffront-end-framework-bench/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tostaylo","download_url":"https://codeload.github.com/tostaylo/front-end-framework-bench/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tostaylo%2Ffront-end-framework-bench/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28885570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T21:06:44.224Z","status":"ssl_error","status_checked_at":"2026-01-29T21:06:42.160Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["automated-testing","framework","framework-bench","puppeteer","react","rust","rust-wasm","svelte","vue","web","web-components"],"created_at":"2024-11-11T17:05:08.984Z","updated_at":"2026-01-29T21:36:57.627Z","avatar_url":"https://github.com/tostaylo.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-End Framework Bench\n\nWelcome to the project landing page for [Front-End Framework Bench](https://github.com/tostaylo/front-end-framework-bench), an automated testing suite focused on comparing performance of client-side frameworks. The project utilizes [Puppeteer](https://github.com/puppeteer/puppeteer) to simulate user input (mouse clicks for example) and [Google Chrome Developer Tools Performance Timeline](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) traces to analyze and record timings of the interaction.\n\n## Landing Page \n[https://front-end-framework-bench.torretaylor.me/](https://tostaylo.github.io/front-end-framework-bench-viewer/)\n\n## Methodology\n\nI'll be the first to admit these tests will not hold up to scientific scrutiny. For one, I wrote the app for each framework being tested, and I'm no expert with any of them. There are at least two concerns. One is utilizing each framework to maximize performance. The other being the most desired idiomatic representation of the specific framework's code. I addressed neither concern. Instead, I built each app to be as similar as possible with a minimalist approach.\n\nEach app was built to output identical HTML structure and request the same CSS file. Timings were averaged out of 12 runs throwing out the lowest two scores.\n\nThe apps were built to simply create, update, or delete HTML Table element rows. I acknowledge these actions are far from what most robust client-side applications require.\n\n### Environment\n\n- MacBook Pro (Retina, 15-inch, Mid 2015)\n- 2.5GHz Quad-Core Intel Core i7 Processor\n- 16GB 1600 MHz DDR3 Memory\n- Chrome version - HeadlessChrome/86.0.4240.0\n\n### Disclaimer\n\nOne of the featured frameworks is [rust-fel](https://github.com/tostaylo/rust-fel) (Rust Front-End-Library). I produced this library as an experiment. Front-End Framework Bench was an avenue to satisfy my curiosity on how it compared to other client-side library/frameworks.\n\nFront-End Framework Bench was inspired by [JS-Framework-Bench](https://github.com/krausest/js-framework-benchmark). All credit goes to the owners of that repository.\n\n### Frameworks\n\n- React\n- Vue\n- Javascript (no framework)\n- Rust-fel\n- Rust-wasm (no framework)\n- Web Components\n- Svelte\n\n\n### Requirements to run Front-End Framework Bench Locally\n\n- Rust\n- Node\n- NPM\n\n1. Navigate to the `trace-generator` directory and `npm install`\n2. Navigate to the `trace-processor` directory and `cargo build`\n3. From the project root run `sh build.sh`\n\n### Add a Framework\n\nPut your app in the `apps` directory.\n\nThe minimum required html for your app should look like the below.\n\nBody\n\n```\n\u003cbody\u003e\n  \u003cdiv id=\"main\" class=\"main\"\u003e\n    \u003cheader\u003e\n      \u003ch1\u003evue-bench\u003c/h1\u003e\n      \u003cbutton id=\"create1000\"\u003eCreateK\u003c/button\u003e \u003cbutton id=\"create10000\"\u003eCreate10K\u003c/button\u003e \u003cbutton id=\"clear\"\u003eClear\u003c/button\u003e\n      \u003cbutton id=\"update\"\u003eUpdate\u003c/button\u003e\n      \u003c/header\u003e\n\u003c!--Table will be appended here --!\u003e\n  \u003c/div\u003e\n  \u003cscript src=\"./apps/vue/index.js\" type=\"module\"\u003e\u003cscript\u003e\n\u003c/body\u003e\n```\n\nTable\n\n```\n\u003ctable id=\"table\"\u003e\n  \u003ctbody\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e 1. \u003c/td\u003e\n      \u003c!-- Three random words !--\u003e\n    \u003ctd\u003e Random Word String \u003c/td\u003e\n   \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n### Metrics\n\n```\n{\n\"k\": {\n  \"display_name\": \"Create One Thousand Rows\",\n  \"definition\": \"Measures the duration of creating 1,000 table rows. Each row is populated with three random words, each wrapped in a 'td', picked from a list of ~10 words. Total DOM nodes ~ 3,000\"\n},\n\"ten-k\": {\n  \"display_name\": \"Create Ten Thousand Rows\",\n  \"definition\": \"Measures the duration of creating 10,000 table rows. Each row is populated with three random words, each wrapped in a 'td', picked from a list of ~10 words. Total DOM nodes ~ 30,000\"\n},\n\"update-k\": {\n  \"display_name\": \"Update One Thousand Rows\",\n  \"definition\": \"Measures the duration of updating every 10th row of 1,000 rows with the text 'We Are Updated'\"\n},\n\"update-ten-k\": {\n  \"display_name\": \"Update Ten Thousand Rows\",\n  \"definition\": \"Measures the duration of updating every 10th row of 10,000 rows with the text 'We Are Updated'\"\n},\n\"clear-k\": {\n  \"display_name\": \"Clear One Thousand Rows\",\n  \"definition\": \"Measures the duration of clearing the table with 1,000 rows\"\n},\n\"clear-ten-k\": {\n  \"display_name\": \"Clear Ten Thousand Rows\",\n  \"definition\": \"Measures the duration of clearing the table with 10,000 rows\"\n }\n}\n\n```\n\n### Timings\n\n```\n{\n\"timing_type\": {\n\"display_name\": \"Metric\",\n\"definition\": \"The metric being tested.\"\n},\n\"timing_framework\": {\n\"display_name\": \"Framework\",\n\"definition\": \"The framework being tested.\"\n},\n\"total_dur\": {\n\"display_name\": \"Total Duration\",\n\"definition\": \"The total duration of the user interaction event, code execution, and the browser's rendering process. Click Duration + Render After Click.\"\n},\n\"click_dur\": {\n\"display_name\": \"Click Duration\",\n\"definition\": \"The duration of the user interaction and the resulting code execution.\"\n},\n\"render_during_click\": {\n\"display_name\": \"Render During Click\",\n\"definition\": \"The duration of the browser's rendering process while code is being executed from the user interaction. This timing is not calculated in the Total Duration.\"\n},\n\"render_after_click\": {\n\"display_name\": \"Render After Click\",\n\"definition\": \"The duration of the browser's rendering process after the user interaction and code execution is complete.\"\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftostaylo%2Ffront-end-framework-bench","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftostaylo%2Ffront-end-framework-bench","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftostaylo%2Ffront-end-framework-bench/lists"}