Skip to content

Instantly share code, notes, and snippets.

@developit

developit/index.html

Last active July 25, 2023 12:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save developit/3b6dbcf299369a9916a06f2e338e74bb to your computer and use it in GitHub Desktop.
Save developit/3b6dbcf299369a9916a06f2e338e74bb to your computer and use it in GitHub Desktop.
Download ZIP
exhaust() vs ternary #jsbench #jsperf (https://jsbench.github.io/#3b6dbcf299369a9916a06f2e338e74bb) #jsbench #jsperf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>exhaust() vs ternary #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>
Raw
suite.js
"use strict";
(function (factory) {
if (typeof Benchmark !== "undefined") {
factory(Benchmark);
} else {
factory(require("benchmark"));
}
})(function (Benchmark) {
var suite = new Benchmark.Suite;
Benchmark.prototype.setup = function () {
const configStrings_enabled = {
boost: {
support: 'show boosts'
}
};
const configStrings_disabled = {
boost: {
support: 'no boosts'
}
};
const configBooleans_enabled = {
boost: {
support: true
}
};
const configBooleans_disabled = {
boost: {
support: false
}
};
function exhaust(key) {
return mapping => mapping[key]
}
const x = { random: { data: { here: 42 } } };
function UsingExhaust({ config, title }) {
const boxProps = { a: 1, b: 2, c: 3 };
return h(Box, boxProps,
h(Box, { flex: 1 },
exhaust(config.boost.support)({
'no boosts': undefined,
'show boosts': (
h(InfoHeader, {
x,
paddingBottom: "s"
})
)
}),
),
h(Text, { variant: "subtitle", numberOfLines: 3 }, title),
exhaust(config.boost.support)({
'show boosts': undefined,
'no boosts': (
h(TextButton, {
accessibilityHint: t('Products.ProductTitle.AccessibilityHint'),
textPadding: "none",
textVariant: "bodySmall",
}, x.name)
)
})
);
}
function UsingTernary({ config, title }) {
const boxProps = { a: 1, b: 2, c: 3 };
return h(Box, boxProps,
h(Box, { flex: 1 },
config.boost.support === 'show boosts' ? (
h(InfoHeader, {
x,
paddingBottom: "s"
})
) : undefined
),
h(Text, { variant: "subtitle", numberOfLines: 3 }, title),
config.boost.support === 'show boosts' ? undefined : (
h(TextButton, {
accessibilityHint: t('Products.ProductTitle.AccessibilityHint'),
textPadding: "none",
textVariant: "bodySmall",
}, x.name)
)
);
}
function UsingTernaryBoolean({ config, title }) {
const boxProps = { a: 1, b: 2, c: 3 };
return h(Box, boxProps,
h(Box, { flex: 1 },
config.boost.support ? (
h(InfoHeader, {
x,
paddingBottom: "s"
})
) : undefined
),
h(Text, { variant: "subtitle", numberOfLines: 3 }, title),
!config.boost.support && (
h(TextButton, {
accessibilityHint: t('Products.ProductTitle.AccessibilityHint'),
textPadding: "none",
textVariant: "bodySmall",
}, x.name)
)
);
}
/** React.createElement */
function h(type, props, child) {
if (arguments.length > 3) child = slice.call(arguments, 2);
if (props == null) props = {};
if (child != null) props.children = child;
return { type, props };
}
const slice = Array.prototype.slice;
/** Some fake components to reference */
function Box() {}
function Text() {}
function TextButton() {}
function InfoHeader() {}
function t(id) { return id; }
/** A simplified mock react hooks env */
let currentComponent;
let hookSlot = 0;
let renders = [];
function createRoot() {
let inst = {};
const render = vnode => renderComponent(vnode, inst);
return { render };
}
function renderComponent(vnode, inst) {
currentComponent = inst;
hookSlot = 0;
if (!inst.hooks) inst.hooks = [];
let ret = vnode.type(vnode.props);
if (renders.push(ret) === 10) renders.length = 0;
}
function useCallback(fn, deps) {
const id = hookSlot++;
const hooks = currentComponent.hooks;
let hook = hooks[id];
if (hook && !depsChanged(deps, hook.deps)) {
return hook.value;
}
if (!hook) hook = hooks[id] = {};
hook.deps = deps;
return hook.value = function(){return fn.apply(this, arguments);};
}
function depsChanged(deps, prev) {
if (deps.length !== prev.length) return true;
for (let i=0; i<deps.length; i++) if (deps[i] !== prev[i]) return true;
return false;
}
};
suite.add("exhaust() version with strings in config", function () {
// exhaust() version with strings in config
const root = createRoot();
root.render(h(UsingExhaust, { config: configStrings_enabled, title: 'hello' }));
root.render(h(UsingExhaust, { config: configStrings_enabled, title: 'world' }));
root.render(h(UsingExhaust, { config: configStrings_disabled, title: 'hello' }));
root.render(h(UsingExhaust, { config: configStrings_disabled, title: 'world' }));
});
suite.add("ternary version with strings in config", function () {
// ternary version with strings in config
const root = createRoot();
root.render(h(UsingTernary, { config: configStrings_enabled, title: 'hello' }));
root.render(h(UsingTernary, { config: configStrings_enabled, title: 'world' }));
root.render(h(UsingTernary, { config: configStrings_disabled, title: 'hello' }));
root.render(h(UsingTernary, { config: configStrings_disabled, title: 'world' }));
});
suite.add("ternary version with booleans in config", function () {
// ternary version with booleans in config
const root = createRoot();
root.render(h(UsingTernaryBoolean, { config: configBooleans_enabled, title: 'hello' }));
root.render(h(UsingTernaryBoolean, { config: configBooleans_enabled, title: 'world' }));
root.render(h(UsingTernaryBoolean, { config: configBooleans_disabled, title: 'hello' }));
root.render(h(UsingTernaryBoolean, { config: configBooleans_disabled, title: 'world' }));
});
suite.on("cycle", function (evt) {
console.log(" - " + evt.target);
});
suite.on("complete", function (evt) {
console.log(new Array(30).join("-"));
var results = evt.currentTarget.sort(function (a, b) {
return b.hz - a.hz;
});
results.forEach(function (item) {
console.log((idx + 1) + ". " + item);
});
});
console.log("exhaust() vs ternary #jsbench #jsperf");
console.log(new Array(30).join("-"));
suite.run();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment