14 |
15 | ## How Does It Work?
16 |
17 | Benchmarked functions are written as _reducers_, i.e. taking a previous value and returning some other value. The runtime executes your functions in a tight loop against some random initial value, saving the final value to a global variable (thus producing a _side effect_), so that no smart compiler could optimize out our computation!
18 |
19 | So you must also provide a random initial value (not [something like that](https://xkcd.com/221/)) and ensure that your reducers follow some simple rules. **Those rules are programmatically enforced** — so you won't shoot yourself in the foot. Check the examples to get a sense of how to write a benchmark.
20 |
21 | The rules:
22 |
23 | 1. The result of a function must depend on its input — and only on its input! You cannot return the same value again and again, or return some random values — there should be some genuine non-throwable computation on a passed input.
24 |
25 | 2. Given the same input, the output of the functions must be all the same. The comparison should be fair — we want to compare different implementations of exactly the same thing!
26 |
27 | ## Examples
28 |
29 | - Array push vs. assign to last index
30 | - BigInt (64-bit) vs. number (increment)
31 | - Math.hypot or Math.sqrt?
32 | - Do local function declarations affect performance?
33 | - Do closures affect performance (vs. free functions)?
34 | - For..of loop over Set vs. Array
35 | - For..of loop over Object.values vs. Map.forEach (large integer keys)
36 | - Map vs. Object (lookup)
37 | - Map vs. Object (getting keys)
38 | - Null or undefined? (equality check)
39 | - Arguments passing: spread vs. call() vs. apply()
40 | - JSON.parse() vs. eval()
41 | - Array vs TypedArray Dot Product
42 | - instanceof or constructor check?
43 | - Copying: arr.slice() vs. [...arr]
44 |
45 | - ..Add your own? Pull Requests are welcome!
46 |
47 | ## Extended Configuration
48 |
49 | In case you test functions operate on differently typed inputs, you might need to provide distinct initial values and provide a customized comparison function, otherwise it won't pass the soundness check. Here is an example:
50 |
51 | ```js
52 | benchmark('bigint vs number (addition)', {
53 | initialValues() {
54 | const seed = 1000000 + (Math.random() * 1000) | 0
55 | return {
56 | bigint: BigInt(seed),
57 | number: seed,
58 | }
59 | },
60 | equal(a, b) {
61 | return BigInt(a) === BigInt(b)
62 | }
63 | }, {
64 | bigint(prev) {
65 | return prev + 1n
66 | },
67 | number(prev) {
68 | return prev + 1
69 | }
70 | })
71 | ```
72 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "what-code-is-faster",
3 | "version": "1.0.0",
4 | "description": "A browser-based tool for speedy and correct JS perf comparisons",
5 | "private": true,
6 | "browserslist": [
7 | "since 2017-06"
8 | ],
9 | "scripts": {
10 | "start": "rm -rf .parcel-cache .cache dist && parcel src/index.html",
11 | "build": "rm -rf .parcel-cache .cache dist && parcel build --public-url ./ src/index.html"
12 | },
13 | "author": "Vitaly Gordon",
14 | "license": "MIT",
15 | "devDependencies": {
16 | "@parcel/transformer-sass": "2.11.0",
17 | "@types/deep-equal": "1.0.1",
18 | "@types/pako": "1.0.1",
19 | "@types/react": "^16.9.56",
20 | "@types/react-dom": "^16.9.9",
21 | "@types/react-github-button": "0.1.0",
22 | "buffer": "6.0.3",
23 | "path-browserify": "1.0.1",
24 | "process": "0.11.10",
25 | "util": "0.12.5"
26 | },
27 | "dependencies": {
28 | "@monaco-editor/react": "3.7.2",
29 | "deep-equal": "2.0.5",
30 | "monaco-editor": "0.21.2",
31 | "pako": "2.0.2",
32 | "panic-overlay": "1.0.42",
33 | "parcel": "^2.11.0",
34 | "prettier": "^2.1.2",
35 | "prop-types": "15.7.2",
36 | "react": "^17.0.1",
37 | "react-dom": "^17.0.1",
38 | "react-github-button": "0.1.11",
39 | "sass": "1.29.0",
40 | "typescript": "^4.0.5"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/App/gh-button.scss:
--------------------------------------------------------------------------------
1 | // Source: https://github.com/benjycui/react-github-button
2 |
3 | .github-btn {
4 | font: bold 11px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
5 | height: 20px;
6 | overflow: hidden;
7 | }
8 | .gh-btn,
9 | .gh-count,
10 | .gh-ico {
11 | float: left;
12 | }
13 | .gh-btn,
14 | .gh-count {
15 | padding: 2px 5px 2px 4px;
16 | color: #333;
17 | text-decoration: none;
18 | white-space: nowrap;
19 | cursor: pointer;
20 | border-radius: 3px;
21 | }
22 | .gh-btn {
23 | background-color: #eee;
24 | background-image: -webkit-gradient(
25 | linear,
26 | left top,
27 | left bottom,
28 | color-stop(0, #fcfcfc),
29 | color-stop(100%, #eee)
30 | );
31 | background-image: -webkit-linear-gradient(top, #fcfcfc 0, #eee 100%);
32 | background-image: -moz-linear-gradient(top, #fcfcfc 0, #eee 100%);
33 | background-image: -ms-linear-gradient(top, #fcfcfc 0, #eee 100%);
34 | background-image: -o-linear-gradient(top, #fcfcfc 0, #eee 100%);
35 | background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
36 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#eeeeee', GradientType=0);
37 | background-repeat: no-repeat;
38 | border: 1px solid #d5d5d5;
39 | }
40 | .gh-btn:hover,
41 | .gh-btn:focus {
42 | text-decoration: none;
43 | background-color: #ddd;
44 | background-image: -webkit-gradient(
45 | linear,
46 | left top,
47 | left bottom,
48 | color-stop(0, #eee),
49 | color-stop(100%, #ddd)
50 | );
51 | background-image: -webkit-linear-gradient(top, #eee 0, #ddd 100%);
52 | background-image: -moz-linear-gradient(top, #eee 0, #ddd 100%);
53 | background-image: -ms-linear-gradient(top, #eee 0, #ddd 100%);
54 | background-image: -o-linear-gradient(top, #eee 0, #ddd 100%);
55 | background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
56 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
57 | border-color: #ccc;
58 | }
59 | .gh-btn:active {
60 | background-image: none;
61 | background-color: #dcdcdc;
62 | border-color: #b5b5b5;
63 | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
64 | }
65 | .gh-ico {
66 | width: 14px;
67 | height: 14px;
68 | margin-right: 4px;
69 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=");
70 | background-size: 100% 100%;
71 | background-repeat: no-repeat;
72 | }
73 | .gh-count {
74 | position: relative;
75 | display: none; /* hidden to start */
76 | margin-left: 4px;
77 | background-color: #fafafa;
78 | border: 1px solid #d4d4d4;
79 | }
80 | .gh-count:hover,
81 | .gh-count:focus {
82 | color: #4183c4;
83 | }
84 | .gh-count:before,
85 | .gh-count:after {
86 | content: "";
87 | position: absolute;
88 | display: inline-block;
89 | width: 0;
90 | height: 0;
91 | border-color: transparent;
92 | border-style: solid;
93 | }
94 | .gh-count:before {
95 | top: 50%;
96 | left: -3px;
97 | margin-top: -4px;
98 | border-width: 4px 4px 4px 0;
99 | border-right-color: #fafafa;
100 | }
101 | .gh-count:after {
102 | top: 50%;
103 | left: -4px;
104 | z-index: -1;
105 | margin-top: -5px;
106 | border-width: 5px 5px 5px 0;
107 | border-right-color: #d4d4d4;
108 | }
109 | .github-btn-large {
110 | height: 30px;
111 | }
112 | .github-btn-large .gh-btn,
113 | .github-btn-large .gh-count {
114 | padding: 3px 10px 3px 8px;
115 | font-size: 16px;
116 | line-height: 22px;
117 | border-radius: 4px;
118 | }
119 | .github-btn-large .gh-ico {
120 | width: 20px;
121 | height: 20px;
122 | }
123 | .github-btn-large .gh-count {
124 | margin-left: 6px;
125 | }
126 | .github-btn-large .gh-count:before {
127 | left: -5px;
128 | margin-top: -6px;
129 | border-width: 6px 6px 6px 0;
130 | }
131 | .github-btn-large .gh-count:after {
132 | left: -6px;
133 | margin-top: -7px;
134 | border-width: 7px 7px 7px 0;
135 | }
136 |
--------------------------------------------------------------------------------
/src/App/index.scss:
--------------------------------------------------------------------------------
1 | html, body, #root {
2 | height: 100%;
3 | font-family: 'Courier New', Courier, monospace;
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | .app {
11 | height: 100%;
12 | display: flex;
13 | flex-direction: column;
14 | padding: 20px;
15 |
16 | > header {
17 | font-weight: bold;
18 | margin-bottom: 0.5em;
19 | font-size: 25px;
20 | position: relative;
21 | display: flex;
22 |
23 | h1 {
24 | flex: 1;
25 | }
26 |
27 | .menu {
28 | padding-right: 160px;
29 | position: relative;
30 | top: -4px;
31 | a {
32 | color: black;
33 | font-weight: normal;
34 | margin-left: 30px;
35 | font-size: 15px;
36 | text-decoration: none;
37 | opacity: 0.75;
38 | }
39 | a:hover {
40 | opacity: 1;
41 | font-weight: bold;
42 | }
43 | }
44 |
45 | .github-btn {
46 | position: absolute;
47 | right: 0;
48 | top: -5px;
49 | font-family: Courier, monospace;
50 | }
51 | }
52 |
53 | > .editor {
54 | flex: 1;
55 | overflow: hidden;
56 | border: 1px solid rgba(0,0,0,0.25);
57 | }
58 |
59 | > .error {
60 | color: red;
61 | font-weight: bold;
62 | margin-top: 1em;
63 | }
64 |
65 | > .progress {
66 | margin-top: 0px;
67 |
68 | &::after {
69 | content: '';
70 | display: block;
71 | width: calc(var(--length)*100%);
72 | height: 20px;
73 | background: hsl(calc(120 + var(--length)*720), 100%, 50%);
74 | transition: all 0.1s linear;
75 | }
76 | }
77 |
78 | > .results {
79 |
80 | margin-top: 20px;
81 |
82 | .result {
83 |
84 | border-bottom: 2px solid transparent;
85 |
86 | .name {
87 | padding-right: 1em;
88 | font-weight: bold;
89 | white-space: nowrap;
90 | }
91 |
92 | .time {
93 | width: 10em;
94 | text-align: right;
95 | padding-right: 1em;
96 | white-space: nowrap;
97 | }
98 |
99 | .bar {
100 | width: 99%;
101 | position: relative;
102 | overflow: hidden;
103 |
104 | &::after {
105 | content: '';
106 | background: hsl(calc(var(--color)*270 + 70), 80%, 50%);
107 | display: block;
108 | width: calc(var(--length)*100%);
109 | height: 100%;
110 | position: absolute;
111 | }
112 | }
113 | }
114 | }
115 |
116 | > .run-me {
117 | cursor: pointer;
118 | margin-top: 20px;
119 | height: 50px;
120 | font-size: 40px;
121 | font-weight: bold;
122 | font-family: 'Courier New', Courier, monospace;
123 | }
124 |
125 | > .run-me:disabled {
126 | font-size: 20px;
127 | }
128 | }
--------------------------------------------------------------------------------
/src/App/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useMemo, useEffect } from 'react'
2 | import Editor, { EditorDidMount } from '@monaco-editor/react'
3 | import GithubButton from 'react-github-button'
4 | import pako from 'pako'
5 |
6 | import {
7 | InitialValuesFunction,
8 | EqualFunction,
9 | TestFunction,
10 | BenchmarkInput,
11 | Results,
12 | measureExecutionTime
13 | } from '../benchmark'
14 |
15 | import './gh-button.scss'
16 | import './index.scss'
17 |
18 | const defaultTitle = 'What Code Is Faster?'
19 |
20 | let defaultCode = `benchmark('${defaultTitle}', function initialValue() {
21 | return Math.random()
22 | }, {
23 | hypot(prev) {
24 | const a = (prev + 1) % 1
25 | const b = (prev - 1) % 1
26 | return Math.hypot(a, b);
27 | },
28 | sqrt(prev) {
29 | const a = (prev + 1) % 1
30 | const b = (prev - 1) % 1
31 | return Math.sqrt(a*a + b*b);
32 | }
33 | })
34 | `
35 |
36 | function bytesToStr(bytes: Uint8Array): string {
37 | return bytes.reduce((s, n) => s + String.fromCharCode(n), '')
38 | }
39 |
40 | function compress(str: string): string {
41 | const bytes = pako.deflate(str, { level: 9 })
42 | return btoa(bytesToStr(bytes))
43 | }
44 |
45 | function decompress(base64: string): string {
46 | const arr = new Uint8Array([...atob(base64)].map(c => c.charCodeAt(0)))
47 | return bytesToStr(pako.inflate(arr))
48 | }
49 |
50 | const codeParam = new URL(document.location.toString()).searchParams.get('code')
51 | if (codeParam) {
52 | try {
53 | defaultCode = decompress(codeParam) || defaultCode
54 | } catch (e) {
55 | defaultCode = `// Failed to decode URL: ${(e as Error).toString()}`
56 | }
57 | }
58 |
59 | export function App() {
60 | const [error, setError] = useState| {result.name} | 187 |{result.minExecutionTime.toFixed(4)} µs | 188 |197 | |