-
Notifications
You must be signed in to change notification settings - Fork 103
/
index.html
219 lines (207 loc) · 8.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!doctype html>
<html lang="en">
<head>
<title>optimize-js benchmark</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button {
display: inline-block;
font-size: 14px;
padding: 5px;
margin: 3px;
}
body {
max-width: 800px;
margin: 20px auto;
font-family: Helvetica, Arial, "sans-serif";
}
</style>
</head>
<body>
<a href="https://github.com/nolanlawson/optimize-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<h1>optimize-js benchmark v1.0.3</h1>
<p>All tests are median of 251.</p>
<div>
<button type=button onclick="runAll()">Run all</button>
</div>
<div>
<button type=button onclick="loadScript('create-react-app.js', 251)">Create React App</button>
<button type=button onclick="loadScript('create-react-app.optimized.js', 251)">Create React App opt</button>
<button type=button onclick="loadScript('create-react-app.min.js', 251)">Create React App min</button>
<button type=button onclick="loadScript('create-react-app.min.optimized.js', 251)">Create React App min+opt</button>
</div>
<div>
<button type=button onclick="loadScript('immutable.js', 251)">Immutable</button>
<button type=button onclick="loadScript('immutable.optimized.js', 251)">Immutable opt</button>
<button type=button onclick="loadScript('immutable.min.js', 251)">Immutable min</button>
<button type=button onclick="loadScript('immutable.min.optimized.js', 251)">Immutable min+opt</button>
</div>
<div>
<button type=button onclick="loadScript('jquery.js', 251)">jQuery</button>
<button type=button onclick="loadScript('jquery.optimized.js', 251)">jQuery opt</button>
<button type=button onclick="loadScript('jquery.min.js', 251)">jQuery min</button>
<button type=button onclick="loadScript('jquery.min.optimized.js', 251)">jQuery min+opt</button>
</div>
<div>
<button type=button onclick="loadScript('lodash.js', 251)">Lodash</button>
<button type=button onclick="loadScript('lodash.optimized.js', 251)">Lodash opt</button>
<button type=button onclick="loadScript('lodash.min.js', 251)">Lodash min</button>
<button type=button onclick="loadScript('lodash.min.optimized.js', 251)">Lodash min+opt</button>
</div>
<div>
<button type=button onclick="loadScript('pouchdb.js', 251)">PouchDB</button>
<button type=button onclick="loadScript('pouchdb.optimized.js', 25)">PouchDB opt</button>
<button type=button onclick="loadScript('pouchdb.min.js', 251)">PouchDB min</button>
<button type=button onclick="loadScript('pouchdb.min.optimized.js', 25)">PouchDB min+opt</button>
</div>
<div>
<button type=button onclick="loadScript('three.js', 251)">Three.js</button>
<button type=button onclick="loadScript('three.optimized.js', 251)">Three.js opt</button>
<button type=button onclick="loadScript('three.min.js', 251)">Three.js min</button>
<button type=button onclick="loadScript('three.min.optimized.js', 251)">Three.js min+opt</button>
</div>
<div>
<pre id=display></pre>
</div>
<script>
// marky.js v1.1.1
!function(r){"use strict";function e(r){if(!r)throw new Error("name must be non-empty")}function n(r,e){for(var n,t=0,a=r.length;t<a;)n=t+a>>>1,r[n].startTime<e.startTime?t=n+1:a=n;r.splice(t,0,e)}var t;t="undefined"!=typeof performance&&performance.now?function(){return performance.now()}:function(){return Date.now()};var a=t;if("undefined"!=typeof performance&&performance.mark&&performance.measure)r.mark=function(r){e(r),performance.mark("start "+r)},r.stop=function(r){e(r),performance.mark("end "+r),performance.measure(r,"start "+r,"end "+r);var n=performance.getEntriesByName(r);return n[n.length-1]},r.getEntries=function(){return performance.getEntriesByType("measure")};else{var o={},m=[];r.mark=function(r){var n=a();e(r),o["$"+r]=n},r.stop=function(r){var t=a();e(r);var f=o["$"+r];if(!f)throw new Error("no known mark: "+r);var i={startTime:f,name:r,duration:t-f,entryType:"measure"};return n(m,i),i},r.getEntries=function(){return m}}}(this.marky=this.marky||{});
</script>
<script>
(function () {
var originalWindowKeys;
if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
// need this for marky to work properly in Firefox, keeps more performance
// entries around since Firefox's limit is 150 otherwise
performance.setResourceTimingBufferSize(100000)
}
function cleanupScript() {
// if the script added keys to the window, remove them to avoid
// memory leaks
Object.keys(window).forEach(function (key) {
if (!~originalWindowKeys.indexOf(key)) {
delete window[key]
}
})
// remove the last script element entirely
document.body.removeChild(document.querySelector('body script:last-child'))
}
function loadScript (src, num, cb) {
var times = []
window.__onDone = function (entry) {
times.push(entry.duration)
cleanupScript()
if (--num > 0) {
load();
} else {
var median = times.sort(function (left, right) {
return left < right ? -1 : 1
})[~~(times.length / 2)];
if (cb) {
cb(median)
} else {
display.innerHTML += median + 'ms\n'
}
}
}
function load () {
originalWindowKeys = Object.keys(window)
// adding a random value to the script text prevents Chrome from
// caching the parsed/JITed script. we also use this as the mark/measure name
var rando = 'script_' + btoa(Math.random())
var xhr = new XMLHttpRequest()
xhr.onload = function () {
var scriptText = xhr.responseText + ';__onDone(marky.stop("' + rando + '"))'
var scriptEl = document.createElement('script')
scriptEl.textContent = scriptText
marky.mark(rando)
document.body.appendChild(scriptEl)
}
xhr.open('GET', src)
xhr.send()
}
load()
}
function runAll () {
var results = []
var scripts = ['create-react-app', 'immutable', 'jquery', 'lodash', 'pouchdb', 'three']
var i = -1
function done () {
var scriptNames = {
'create-react-app': 'Create React App',
immutable: 'ImmutableJS',
'jquery': 'jQuery',
'lodash': 'Lodash',
'pouchdb': 'PouchDB',
'three': 'ThreeJS',
}
var scriptsToTimes = {}
results.forEach(function (result) {
scriptsToTimes[result.script] = scriptsToTimes[result.script] || {}
scriptsToTimes[result.script][result.type] = result.median
})
// format results as markdown
var table = '| Script | Original | Optimized | Improvement | Minified | Min+Optimized | Improvement |' +
'\n| ---- | ---- | ---- | ---- | ---- | ---- | ---- |'
var totalUnopt = 0
var totalOpt = 0
Object.keys(scriptsToTimes).forEach(function (script) {
var times = scriptsToTimes[script]
var jsTime = times['.js']
var optTime = times['.optimized.js']
var minTime = times['.min.js']
var minOptTime = times['.min.optimized.js']
totalUnopt += jsTime + minTime
totalOpt += optTime + minOptTime
table += '\n| ' + [
scriptNames[script],
jsTime.toFixed(2) + 'ms',
optTime.toFixed(2) + 'ms',
'**' + (100 * (jsTime - optTime) / jsTime).toFixed(2) + '%**',
minTime.toFixed(2) + 'ms',
minOptTime.toFixed(2) + 'ms',
'**' + (100 * (minTime - minOptTime) / minTime).toFixed(2) + '%**'
].join(' | ') + ' |'
})
display.innerHTML += table
display.innerHTML += '\nOverall improvement: **' +
(100 * (totalUnopt - totalOpt) / totalUnopt).toFixed(2) + '%**'
}
function next () {
if (++i === scripts.length * 4) {
return done()
}
var script = scripts[~~(i / 4)]
var type
switch (i % 4) {
case 0:
type = '.js'
break
case 1:
type = '.optimized.js'
break
case 2:
type = '.min.js'
break
case 3:
type = '.min.optimized.js'
break
}
loadScript(script + type, 251, function (median) {
results.push({
script: script,
type: type,
median: median
})
display.innerHTML += script + type + ': ' + median.toFixed(2) + 'ms\n'
next()
})
}
next()
}
window.loadScript = loadScript
window.runAll = runAll
})()
</script>
</body>
</html>