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 Cesar Mascarenhas
/*
Not so precise to fit the parent element, but it will maintain appearance in chrome, firefox, IE and safari. And It's really fast because it is only based on math. To perfect fit and also maintain some fast reading use the Revision 12 test with the "doubletime" variable in it.
*/
$.fn.fastFontSizeFit = function(maxFontSize) {
var objlen = this.length;
var objs = new Array();
for(var i=0;i<objlen;i++){
obj = this.eq(i).children();
objs[i] = {
obj:obj,
parentwidth:obj.parent()[0].offsetWidth ,
width:obj[0].offsetWidth,
font:parseInt(getComputedStyle(obj[0]).fontSize)
};
}
for(var i=0;i<objlen;i++){
newObjTextSize = objs[i].parentwidth / objs[i].width * objs[i].font;
newObjTextSize = newObjTextSize * objs[i].parentwidth / (objs[i].parentwidth + newObjTextSize / (objs[i].font / 10));
if(newObjTextSize >= maxFontSize){
newObjTextSize = maxFontSize;
}
objs[i].obj[0].style.fontSize = newObjTextSize+"px";
}
}
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.