Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
jQuery css vs JS style vs fastCss
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=489204" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0
Browser:
Chrome 120
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
jQuery css
42454.1 Ops/sec
JS style
103913.0 Ops/sec
jQuery fastCss
82129.3 Ops/sec
jQuery fastMultipleCss
94599.5 Ops/sec
HTML Preparation code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
Script Preparation code:
jQuery.fn.fastCss = function(property, value) { this.each(function(){ const v = $(this)[0]; v.style[property] = value; }); } jQuery.fn.fastMultipleCss = function(obj) { this.each(function(){ const v = $(this)[0]; for (const [key, value] of Object.entries(obj)) v.style[key] = value; }); }
Tests:
jQuery css
const a = $(".a"); a.css("height", "100vh"); a.css("width", "100vw"); a.css("margin-top", "50px");
JS style
const a = $(".a"); a.each(function(){ const v = $(this)[0]; v.style.height = "100vh"; v.style.width = "100vw"; v.style["margin-top"] = "50px"; });
jQuery fastCss
const a = $(".a"); a.fastCss("height", "100vh"); a.fastCss("width", "100vw"); a.fastCss("margin-top", "50px");
jQuery fastMultipleCss
const a = $(".a"); a.fastMultipleCss({height: "100vh", width: "100vw", "margin-top": "50px"});