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
Setting style properties via node.style assignment, vs. dynamic stylesheet, benchmarked against className assignment with static rules.
<style>
#theList.static-one li {
background-color: #ff9;
width: 100px;
border: 1px solid green;
}
#theList.static-two li {
background-color: #f9f;
width: 200px;
border: 1px dotted black;
}
#theList.static-three li {
background-color: #9ff;
width: 300px;
border: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<ul class="someList" id="theList">
</ul>
<script>
dojo.require("dojox.html.styles");
dojo.require("dojox.lang.functional.object");
var elementCount = 50,
listMarkup = new Array(1 + elementCount).join('<li class="item"><span class="label">List item</span></li>\n');
var applyStyleViaDynamicStyleSheet = (function() {
var dynCssRulesMap = {}; // lookup for easy rule removal
var sheetName = "dyncss_demo";
return function(selector, arPropertyValues) {
var sheet = dojox.html.getDynamicStyleSheet(sheetName);
var rulesMap = dynCssRulesMap;
var declarationStr = arPropertyValues.join(";\n");
// give this rule an id - not very fine-grained
var ruleId = selector + declarationStr;
if (rulesMap[ruleId]) {
// removeCssRule needs to loop over the entire stylesheet to find a matching selector/delaration pair
// we minimize that cost by maintaining a hash of the rules we've added
// its then just a lookup to determine if matching rule exists already
// that needs to be removed to be redefined
// we already have rule of this name, remove it first
dojox.html.removeCssRule(selector, declarationStr, sheetName);
}
var rs = dojox.html.insertCssRule(selector, declarationStr, sheetName);
// store it for fast removal
rulesMap[ruleId] = [selector, declarationStr];
}
})();
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
query and set style |
| ready |
dynamic css |
| ready |
no-library style.cssText property setting |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.