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

Class vs. Style (v22)

Revision 22 of this benchmark created on September 18, 2014

Preparation HTML

<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ym/r/0IWqL9QdryP.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/6mu9cKoeNEH.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yZ/r/NN41nG1WF81.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/4Ad8t6VO09x.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yx/r/gt-XKIEXk-v.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yL/r/UgR3TLMR1Gs.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/bJokJcILHXf.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/hX4R4eGt6UY.css">
<link type="text/css" rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yu/r/Xp6QbK0u87B.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yq/r/lTFzEtweDJq.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/x-kPPHyYynG.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yP/r/we1yE6HBaIT.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y6/r/MmmS_1VwZd_.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yC/r/cyV0fkN_OPs.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y7/r/6m8T4weR9uL.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yv/r/_59vonvuOI2.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y0/r/dysuIzf5_eT.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y3/r/ft7zPnQpWQr.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y8/r/68VedLmFTjM.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yp/r/2II7rKpRdab.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/u1HZ8C_sSrO.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yM/r/bjFzgszCuGH.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yv/r/7MhX1E1Hfj1.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y4/r/v-pq59JrOzg.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yq/r/sjDTtNHBYcZ.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y0/r/mUE91iakQO0.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yv/r/XcVq6FKKx-L.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/xGLHT4Cy9hd.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y5/r/Hi127tWiKAW.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yY/r/7fTLr3r_rL9.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/au2VO6GnNyR.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/CW57S-FScs5.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yd/r/wPBg5rISD6H.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yt/r/TKF7jsVii5X.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yI/r/HPHaEVWv1vx.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/FkQhFCcY8gd.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y6/r/3X6pQUjD5uV.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/c2yqubXIlq3.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yh/r/pr6Qvh9tQ-_.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y-/r/vXLpvzTIfQL.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yr/r/Kk-7RWyqSAU.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yI/r/tdlxHAAff3b.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/6kueMRGGTYa.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yI/r/UKRIkl_k-KH.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ys/r/WWpFX8dc0TZ.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/7nAEbWaShDo.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yh/r/f8cA7ek3Kba.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ye/r/J8dmYlVZfDe.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ys/r/MDvyFmoC2TZ.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y3/r/rnPwdiealZG.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ye/r/LHsRG5U27le.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yj/r/NL_NG6u1I-i.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y4/r/Cl9akV4oEnw.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yS/r/39fcCcyfRnU.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yn/r/0SNdVS-Dx1c.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yD/r/3_EJmK0KsAZ.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yS/r/JSJzS5FlD7c.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y-/r/FLUr0ygUVRo.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yx/r/zZWYYfBHZjo.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yd/r/TOUT5lFx7UL.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y3/r/xoPJjjuooAp.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/vCy_2aLh2Ql.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/StmYxRixoDd.css">
<link rel="stylesheet" type="text/css" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ya/r/3W3pMbX3iMj.css">
<style>
  .one { background: red; width: 100px; height: 100px; }
  .two { background: blue; width: 50px; height: 50px; }
</style>
<div id="candidate"></div>

Setup

var candidate = document.getElementById('candidate');

Test runner

Ready to run.

Testing in
Test		Ops/sec
Class (className)	`candidate.className = 'one'; candidate.className = 'two'; if (candidate.getBoundingClientRect().width > 1000) { console.log('never going to happen'); }`	ready
Class (setAttribute)	`candidate.setAttribute('class', 'one'); candidate.setAttribute('class', 'two'); if (candidate.getBoundingClientRect().width > 1000) { console.log('never going to happen'); }`	ready
Style	`candidate.style.background = 'red'; candidate.style.width = '100px'; candidate.style.height = '100px'; candidate.style.background = 'blue'; candidate.style.width = '50px'; candidate.style.height = '50px'; if (candidate.getBoundingClientRect().width > 1000) { console.log('never going to happen'); }`	ready
Style (setAttribute)	`candidate.setAttribute('style', 'background: red; width: 100px; height: 100px;'); candidate.setAttribute('style', 'background: blue; width: 50px; height: 50px;'); if (candidate.getBoundingClientRect().width > 1000) { console.log('never going to happen'); }`	ready
ClassList	`candidate.classList.add("one"); candidate.classList.remove("one"); candidate.classList.add("two"); if (candidate.getBoundingClientRect().width > 1000) { console.log('never going to happen'); }`	ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published by Hakim El Hattab on July 8, 2011
Revision 3: published by Ed Fuhrken on July 8, 2011
Revision 4: published on August 18, 2011
Revision 6: published on September 27, 2011
Revision 7: published on January 21, 2012
Revision 8: published on November 18, 2012
Revision 9: published on December 7, 2012
Revision 10: published on January 4, 2013
Revision 11: published by bbbfdbdfsdfsdfsb on April 26, 2013
Revision 12: published on August 21, 2013
Revision 13: published by Dan on August 27, 2013
Revision 16: published on March 25, 2014
Revision 20: published on September 18, 2014
Revision 21: published by Glenjamin on September 18, 2014
Revision 22: published on September 18, 2014
Revision 23: published by winterland on October 10, 2014
Revision 24: published on October 10, 2014
Revision 25: published by winterland on October 11, 2014
Revision 26: published by Chris on December 2, 2014
Revision 27: published by Dallas on December 19, 2014
Revision 29: published by Stas Melnikov on May 10, 2015
Revision 32: published by tom on January 14, 2016
Revision 33: published by tom on January 14, 2016