jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<style type='text/css'>
p {
font-size: 18px;
}
</style>
$.fn.measureWidth = function () {
var span = document.createElement('span');
span.style.whiteSpace = 'nowrap';
span.style.display = 'inline-block';
span.style.margin = span.style.padding = 0;
span.innerHTML = this[0].outerHTML;
document.body.appendChild(span);
var width = span.offsetWidth;
document.body.removeChild(span);
return width;
}
$.fn.canvasMeasureWidth = function (font) {
if (!jQuery._cachedCanvas) {
var canvas = document.createElement('canvas');
jQuery._cachedCanvas = canvas.getContext('2d');
}
jQuery._cachedCanvas.font = font;
return jQuery._cachedCanvas.measureText(this[0].innerText).width;
}
$.fn.canvasMeasureWidthInternal = function () {
if (!jQuery._cachedCanvas) {
var canvas = document.createElement('canvas');
jQuery._cachedCanvas = canvas.getContext('2d');
}
var style = this[0].style;
jQuery._cachedCanvas.font = (style.fontStyle || style.fontVariant || style.fontWeight) + ' ' + style.fontSize + (style.lineHeight ? '/' + style.lineHeight : '') + ' ' + style.fontFamily;
return jQuery._cachedCanvas.measureText(this[0].innerText).width;
}
var text = "YOU SHALL NOT PASS!";
Ready to run.
Test | Ops/sec | |
---|---|---|
DOM query |
| ready |
Cached canvas |
| ready |
Canvas with inline font applied |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.