{"id":13818865,"url":"https://github.com/marko-js/isomorphic-ui-benchmarks","last_synced_at":"2025-04-09T09:08:12.682Z","repository":{"id":37470592,"uuid":"81434292","full_name":"marko-js/isomorphic-ui-benchmarks","owner":"marko-js","description":"Client/server benchmarks for various UI libraries","archived":false,"fork":false,"pushed_at":"2023-01-04T23:10:37.000Z","size":2323,"stargazers_count":247,"open_issues_count":22,"forks_count":38,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-02T06:09:39.795Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://markojs.com/isomorphic-ui-benchmarks/","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/marko-js.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-02-09T09:41:32.000Z","updated_at":"2025-01-10T13:23:52.000Z","dependencies_parsed_at":"2023-02-02T23:20:16.443Z","dependency_job_id":null,"html_url":"https://github.com/marko-js/isomorphic-ui-benchmarks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fisomorphic-ui-benchmarks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fisomorphic-ui-benchmarks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fisomorphic-ui-benchmarks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fisomorphic-ui-benchmarks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marko-js","download_url":"https://codeload.github.com/marko-js/isomorphic-ui-benchmarks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"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":[],"created_at":"2024-08-04T08:00:33.059Z","updated_at":"2025-04-09T09:08:12.654Z","avatar_url":"https://github.com/marko-js.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# isomorphic-ui-benchmarks\n\nThis repo includes multiple benchmarks for various UI libraries. Each benchmark is designed to measure rendering performance (on the server and in the browser) and the time that it takes to update the DOM (client-side only).\n\n# Current results\n\n## Search results\n\n\u003cimg width=\"1335\" alt=\"Search Results Benchmarks\" src=\"https://user-images.githubusercontent.com/4985201/67251108-ca344780-f422-11e9-9ca0-cce6ed1aad6b.png\"\u003e\n\n## Color picker\n\n\u003cimg width=\"1323\" alt=\"Color Picker Benchmarks\" src=\"https://user-images.githubusercontent.com/4985201/67251074-a96bf200-f422-11e9-9bee-a15124f4b10d.png\"\u003e\n\n---\n\nBelow are the results of a run on October 21, 2019\n\nEnvironment:\n\n- Node.js v10.16.1\n- MacBook Pro (13-inch, 2017)\n- Processor: 3.5 GHz Intel Core i7\n- Memory: 16 GB 2133 MHz LPDDR3\n- macOS Mojave: 10.14.6\n- Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)\n\n## Server-side\n\n```\nWarming up...\n\nWarmup complete.\n\nRunning \"search-results\"...\n\nRunning benchmark \"marko\"...\n\nmarko x 6,399 ops/sec ±2.71% (84 runs sampled)\n\nRunning benchmark \"preact\"...\n\npreact x 746 ops/sec ±2.88% (81 runs sampled)\n\nRunning benchmark \"react\"...\n\nreact x 765 ops/sec ±5.02% (72 runs sampled)\n\nRunning benchmark \"vue\"...\n\nvue x 2,657 ops/sec ±4.41% (60 runs sampled)\n\nRunning benchmark \"inferno\"...\n\ninferno x 3,014 ops/sec ±1.78% (87 runs sampled)\n\nFastest is marko\n\n--------------\n\n\nWarming up...\n\nWarmup complete.\n\nRunning \"color-picker\"...\n\nRunning benchmark \"marko\"...\n\nmarko x 24,540 ops/sec ±1.48% (86 runs sampled)\n\nRunning benchmark \"preact\"...\n\npreact x 4,587 ops/sec ±1.81% (85 runs sampled)\n\nRunning benchmark \"react\"...\n\nreact x 4,300 ops/sec ±4.72% (72 runs sampled)\n\nRunning benchmark \"vue\"...\n\nvue x 9,120 ops/sec ±5.56% (70 runs sampled)\n\nRunning benchmark \"inferno\"...\n\ninferno x 21,453 ops/sec ±2.12% (84 runs sampled)\n\nFastest is marko\n\n--------------\n\n\nDONE!\n\n~/marko-js/isomorphic-ui-benchmarks (master)\u003e  node -v\nv10.16.1\n```\n\n# Client-side\n\n## Search results\n\n### Google Chrome\n\n```\nWarming up...\nWarmup complete.\nRunning \"search-results\"...\nRunning benchmark \"marko\"...\nmarko x 175 ops/sec ±1.84% (53 runs sampled)\nRunning benchmark \"preact\"...\npreact x 132 ops/sec ±1.66% (48 runs sampled)\nRunning benchmark \"react\"...\nreact x 210 ops/sec ±1.36% (53 runs sampled)\nRunning benchmark \"vue\"...\nvue x 142 ops/sec ±1.31% (52 runs sampled)\nRunning benchmark \"inferno\"...\ninferno x 239 ops/sec ±1.24% (55 runs sampled)\nFastest is inferno\n```\n\n## Color picker\n\n### Google Chrome\n\n```\nWarming up...\nWarmup complete.\nRunning \"color-picker\"...\nRunning benchmark \"marko\"...\nmarko x 6,008 ops/sec ±1.66% (34 runs sampled)\nRunning benchmark \"preact\"...\npreact x 6,435 ops/sec ±0.96% (59 runs sampled)\nRunning benchmark \"react\"...\nreact x 7,358 ops/sec ±1.43% (58 runs sampled)\nRunning benchmark \"vue\"...\nvue x 4,291 ops/sec ±1.96% (55 runs sampled)\nRunning benchmark \"inferno\"...\ninferno x 17,078 ops/sec ±2.17% (60 runs sampled)\nFastest is inferno\n```\n\n# Additional details\n\n## Included libraries\n\nThe following UI libraries are currently included:\n\n- [inferno](https://github.com/infernojs/inferno)\n- [marko](https://github.com/marko-js/marko)\n- [preact](https://github.com/developit/preact)\n- [react](https://github.com/facebook/react)\n- [vue](https://github.com/vuejs/vue)\n\n## Included benchmarks\n\nThis repo currently includes the following benchmarks\n\n### Search Results\n\nThis benchmark measures the time it takes to render pages of search results. Each page includes 100 search result items. Every iteration renders an entirely new set of search results. As a result of rendering new search results for every cycle, a significant number of DOM nodes must be updated.\n\n### Color Picker\n\nThis benchmark measures the time it takes to cycle through a selected color. The selected color index changes every cycle. When the selected color index changes two things happen:\n\n- The new selected color is highlighted\n- The old selected color is unhighlighted\n- The selected color is shown at the end\n\nCompared to the search results benchmark, there are a relatively small number of changes to the DOM for every cycle.\n\n# Running the benchmarks\n\n## Install\n\n```bash\ngit clone https://github.com/marko-js/isomorphic-ui-benchmarks.git\ncd isomorphic-ui-benchmarks\nnpm install\nnpm run build # Build client-side JS bundles\n```\n\n## Run server-side benchmarks\n\n```bash\nnpm run benchmark\n```\n\n## Run client-side benchmarks\n\nStart\n\n```bash\nnpm start\n```\n\nOpen [http://localhost:8080/](http://localhost:8080/) in your browser and choose a benchmark to run.\n\n# Contributions and Feedback\n\nIf you see any problems or have any suggestions please let us know. Every effort was made to be as fair and accurate as possible, but mistakes do happen. If you find a problem please open a Github issue to discuss.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Fisomorphic-ui-benchmarks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarko-js%2Fisomorphic-ui-benchmarks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Fisomorphic-ui-benchmarks/lists"}