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
Comparing the performance of using style against changing directly cssText. Also compared against with just adding a css classname.
Added forced reflow for testing how much elements you can effectively redraw with each methods
get an element width force the render so i test with that...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="element">
</div>
<style type=”text/css”>
.newClass { left: 10px; top:50px; }
</style>
var $element = $('#element');
// REQUEST ANIMATION FRAME
if (!('requestAnimationFrame' in window)) {
var lastTime = 0,
vendors = ['webkit', 'moz', 'ms', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!('requestAnimationFrame' in window)) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime(),
timeToCall = Math.max(0, 16 - (currTime - lastTime)),
id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!('cancelAnimationFrame' in window)) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}
Ready to run.
Test | Ops/sec | |
---|---|---|
element.style |
| ready |
element.cssText |
| ready |
change css class |
| ready |
jQuery style |
| ready |
classList |
| ready |
Set attribute |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.