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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://www.zachleat.com/bigtext/bigtext.js">
</script>
<div class="textfill" style="width:100px; height:50px; font-size: 10px;white-space:nowrap;">
<span>
My Text
</span>
</div>
<div class="textfill" style="width:300px; height:50px; font-size: 14px;white-space:nowrap;">
<span>
My Text
</span>
</div>
<div class="textfill" style="width:600px; height:50px; font-size: 18px;white-space:nowrap;">
<span>
My Text
</span>
</div>
<div class="bigtext" style="width:100px; height:50px; font-size: 10px;white-space:nowrap;">
<div>
My Text
</div>
</div>
<div class="bigtext" style="width:300px; height:50px; font-size: 14px;white-space:nowrap;">
<div>
My Text
</div>
</div>
<div class="bigtext" style="width:600px; height:50px; font-size: 18px;white-space:nowrap;">
<div>
My Text
</div>
</div>
// by GeekyMonkey
$.fn.textfill1 = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
// by Alexander Sandstorm
$.fn.textfill2 = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// use the combined height of all children, eg. multiple <p> elements.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
// by mekwall
$.fn.textfill3 = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function() {
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth / ourText.width(),
newSize = (fontSize * (multiplier - 0.1));
ourText.css("fontSize", (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize);
});
};
// by eecolella (derived by mekwall)
$.fn.fontSizePerfect = function (maxFontSize) {
maxFontSize = parseInt(maxFontSize || Number.POSITIVE_INFINITY, 10);
for (var i = 0, selLength = this.length; i < selLength; i++) {
var $el = this.eq(i).children(),
el = $el[0], maxWidth = $el.parent()[0].offsetWidth,
newSize = +(parseInt(parseInt(getComputedStyle(el).fontSize)) * (maxWidth / el.offsetWidth)).toFixed(),
size = (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize;
el.style.fontSize = size + 'px';
while (el.offsetWidth > maxWidth) {
size--;
el.style.fontSize = size + 'px';
}
}
return this;
};
// by cesarmascarenhas
/*
Works with font size starting with 1px. It fits Any Size perfectly.
*/
resizefit = false;
$.fn.fastFontSizeFit = function(maxFontSize) {
var $obj = this.children();
parentWidth = $obj.parent()[0].offsetWidth;
objTextSize = parseInt(getComputedStyle($obj[0]).fontSize);
objWidth = $obj[0].offsetWidth;
newObjTextSize = parentWidth / objWidth * objTextSize;
if(newObjTextSize >= maxFontSize){
newObjTextSize = maxFontSize;
}
$obj[0].style.fontSize = newObjTextSize+"px";
if(resizefit == false){
resizefit = true;
this.fastFontSizeFit(maxFontSize);
}
resizefit = false;
return;
};
var ourText = $(".textfill");
var ourText2 = $(".bigtext");
// reset the size so we can calculate again
ourText.find("span").css("fontSize", "");
Ready to run.
Test | Ops/sec | |
---|---|---|
textfill by GeekyMonkey |
| ready |
textfill by Alexander Sandstorm |
| ready |
textfill by mekwall |
| ready |
fontSizePerfect by eecolella |
| ready |
bigtext by http://www.zachleat.com/web/bigtext-makes-text-big/ |
| ready |
fastFontSizeFit by Cesar Mascarenhas |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.