Skip to content

Commit

Permalink
benchmark: Added vhtml to benchmarks
Browse files Browse the repository at this point in the history
  • Loading branch information
arthurfiorette committed Mar 11, 2024
1 parent 2a4ac15 commit f16f99f
Show file tree
Hide file tree
Showing 30 changed files with 31,630 additions and 76 deletions.
5 changes: 5 additions & 0 deletions .changeset/four-weeks-drum.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@kitajs/html': patch
---

Added vhtml to benchmarks
72 changes: 72 additions & 0 deletions benchmarks/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,66 @@ Also, feel free to contribute benchmarks for any library you're interested in by
pull request (PR). If you need assistance or wish to suggest a library for benchmarking,
don't hesitate to open an issue.

## Benchmark Results

```s
cpu: 13th Gen Intel(R) Core(TM) i5-13600K
runtime: node v20.11.0 (x64-linux)
benchmark time (avg) (min … max) p75 p99 p999
--------------------------------------------------- -----------------------------
• Many Components (31.4kb)
--------------------------------------------------- -----------------------------
KitaJS/Html 120 µs/iter (71'126 ns … 755 µs) 118 µs 417 µs 685 µs
Typed Html 714 µs/iter (620 µs … 1'171 µs) 736 µs 1'070 µs 1'171 µs
VHtml 2'142 µs/iter (1'942 µs … 2'705 µs) 2'257 µs 2'647 µs 2'705 µs
React 4'488 µs/iter (4'242 µs … 5'025 µs) 4'612 µs 4'999 µs 5'025 µs
Common Tags 2'747 µs/iter (2'493 µs … 4'639 µs) 2'832 µs 3'356 µs 4'639 µs
Ghtml 765 µs/iter (677 µs … 1'371 µs) 774 µs 1'135 µs 1'371 µs
summary for Many Components (31.4kb)
KitaJS/Html
5.96x faster than Typed Html
6.39x faster than Ghtml
17.87x faster than VHtml
22.93x faster than Common Tags
37.45x faster than React
• Many Props (7.4kb)
--------------------------------------------------- -----------------------------
KitaJS/Html 17'856 ns/iter (15'394 ns … 552 µs) 16'779 ns 40'678 ns 294 µs
Typed Html 73'914 ns/iter (64'472 ns … 587 µs) 69'672 ns 265 µs 480 µs
VHtml 77'348 ns/iter (69'187 ns … 678 µs) 73'025 ns 207 µs 491 µs
React 67'160 ns/iter (56'875 ns … 642 µs) 62'871 ns 231 µs 485 µs
Common Tags 41'257 ns/iter (36'495 ns … 620 µs) 39'047 ns 93'601 ns 415 µs
Ghtml 41'301 ns/iter (37'672 ns … 689 µs) 39'598 ns 80'722 ns 363 µs
summary for Many Props (7.4kb)
KitaJS/Html
2.31x faster than Common Tags
2.31x faster than Ghtml
3.76x faster than React
4.14x faster than Typed Html
4.33x faster than VHtml
• MdnHomepage (66.7Kb)
--------------------------------------------------- -----------------------------
KitaJS/Html 394 µs/iter (296 µs … 1'720 µs) 367 µs 1'192 µs 1'581 µs
Typed Html 2'326 µs/iter (1'807 µs … 4'986 µs) 2'468 µs 4'637 µs 4'986 µs
VHtml 2'411 µs/iter (1'965 µs … 5'148 µs) 2'464 µs 5'009 µs 5'148 µs
React 6'832 µs/iter (6'031 µs … 10'336 µs) 7'170 µs 10'336 µs 10'336 µs
Common Tags 2'932 µs/iter (2'496 µs … 4'542 µs) 2'880 µs 4'452 µs 4'542 µs
Ghtml 421 µs/iter (325 µs … 3'123 µs) 384 µs 2'548 µs 2'897 µs
summary for MdnHomepage (66.7Kb)
KitaJS/Html
1.07x faster than Ghtml
5.91x faster than Typed Html
6.12x faster than VHtml
7.45x faster than Common Tags
17.35x faster than React
```

## About KitaJS/Html

KitaJS/Html prioritizes performance while maintaining a user-friendly and intuitive API.
Expand All @@ -29,3 +89,15 @@ on maintaining developer productivity.
The library adheres to the JSX standard for its API, shielding users from the complexities
of its internal workings. This approach allows us to optimize the underlying
implementation extensively, including function inlining, to achieve maximum performance.

## Runtime Inconsistencies

I tried multiple formatters and minifiers to ensure the html output of all runtimes is
consistent, however vhtml and common-tags aren't consistent at all, with weird behaviors
like adding spaces between components and rendering `0` as an empty string...

As react is by far the JSX standard these days, **KitaJS/Html is only required to produce
the same output as ReactDOMServer.renderToStaticMarkup**.

To be sure we are emitting a similar output and none of the libraries are emitting broken
HTML, a realWorldPage is rendered and stored at the [samples](./runner/samples) directory.
36 changes: 22 additions & 14 deletions benchmarks/kitajs/renderers/real-world.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
const purchases = Array.from({ length: 10000 }, (_, i) => ({
id: i + 1,
const purchases = Array.from({ length: 1000 }, (_, i) => ({
name: `Item ${i + 1}`,
price: Math.random() * 10,
quantity: Math.floor(Math.random() * 10) + 1
price: i * 2,
quantity: i * 5
}));

function Purchase({ id, name, price, quantity }) {
function Purchase({ name, price, quantity }) {
return (
<div class="purchase purchase-card">
<div class="purchase-name">{name}</div>
<div class="purchase-price">{price}</div>
<div class="purchase-quantity">{quantity}</div>
<div class="purchase-name" safe>
{name}
</div>
<div class="purchase-price" safe>
{price}
</div>
<div class="purchase-quantity" safe>
{quantity}
</div>
</div>
);
}
Expand All @@ -27,7 +32,7 @@ function Layout({ children, head }) {
function Head({ title }) {
return (
<div>
<title>{title}</title>
<title safe>{title}</title>
<meta name="description" content="A description" />
<meta name="keywords" content="some, keywords" />
<meta name="author" content="Some Author" />
Expand All @@ -51,7 +56,9 @@ function Head({ title }) {
function Header({ name }) {
return (
<header class="header">
<h1 class="header-title">Hello {name}</h1>
<h1 class="header-title" safe>
Hello {name}
</h1>
<nav class="header-nav">
<ul class="header-ul">
<li class="header-item">
Expand All @@ -69,7 +76,7 @@ function Header({ name }) {
function Footer({ name }) {
return (
<footer class="footer">
<p class="footer-year">
<p class="footer-year" safe>
© {new Date().getFullYear()} {name}
</p>

Expand All @@ -95,7 +102,9 @@ function UserProfile({ name }) {
return (
<section class="user-profile">
<h2 class="user-profile title">User Profile</h2>
<p class="user-profile name">Name: {name}</p>
<p class="user-profile name" safe>
Name: {name}
</p>
<p class="user-profile info">Email: [email protected]</p>
<p class="user-profile info">Address: 123 Main St, City, Country</p>
<p class="user-profile info">Phone: 123-456-7890</p>
Expand All @@ -109,7 +118,7 @@ function Sidebar() {
<h2 class="purchase title">Recent Purchases</h2>
<ul class="purchase list">
{purchases.slice(0, 3).map((purchase) => (
<li class="purchase-preview">
<li class="purchase-preview" safe>
{purchase.name} - ${purchase.price.toFixed(2)}
</li>
))}
Expand Down Expand Up @@ -146,7 +155,6 @@ export function RealWorldPage(name: string) {
<div class="purchases">
{purchases.map((purchase) => (
<Purchase
id={purchase.id}
name={purchase.name}
price={purchase.price}
quantity={purchase.quantity}
Expand Down
1 change: 1 addition & 0 deletions benchmarks/kitajs/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"jsxImportSource": "@kitajs/html",
"plugins": [{ "name": "@kitajs/ts-html-plugin" }],
"declaration": true,
"declarationMap": true
},
Expand Down
3 changes: 3 additions & 0 deletions benchmarks/react/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from './renderers/many-components';
export * from './renderers/many-props';
export * from './renderers/real-world';
17 changes: 17 additions & 0 deletions benchmarks/react/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "@kitajs/bench-html-react",
"private": true,
"main": "dist/index.js",
"scripts": {
"build": "tsc"
},
"dependencies": {
"react": "^18.2.0",
"tslib": "^2.6.2",
"typescript": "^5.4.2"
},
"devDependencies": {
"@types/node": "^20.11.20",
"@types/react": "^18.2.64"
}
}
9 changes: 9 additions & 0 deletions benchmarks/react/renderers/many-components.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import * as React from 'react'

export function ManyComponents(name: string) {
for (let i = 0; i < 10000; i++) {
<div>{name}</div>;
}

return <div>{name}</div>;
}
Loading

0 comments on commit f16f99f

Please sign in to comment.