j2c vs. jss vs. css

JavaScript performance comparison

Revision 25 of this test case created by

Preparation code

<script>
window.styles = {
  ".input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn": {
    "border-top-left-radius": "0",
    "border-bottom-left-radius": "0"
  },
  ".input-group-addon:last-child": {
    "border-left": "0"
  },
  ".input-group-btn": {
    "position": "relative",
    "font-size": "0",
    "white-space": "nowrap"
  },
  ".input-group-btn > .btn": {
    "position": "relative"
  },
  ".input-group-btn > .btn + .btn": {
    "margin-left": "-1px"
  },
  ".input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active": {
    "z-index": "2"
  },
  ".input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group": {
    "margin-right": "-1px"
  },
  ".input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group": {
    "margin-left": "-1px"
  },
  ".nav": {
    "padding-left": "0",
    "margin-bottom": "0",
    "list-style": "none"
  },
  ".nav > li": {
    "position": "relative",
    "display": "block"
  },
  ".nav > li > a": {
    "position": "relative",
    "display": "block",
    "padding": "10px 15px"
  },
  ".nav > li > a:hover, .nav > li > a:focus": {
    "text-decoration": "none",
    "background-color": "#eee"
  },
  ".nav > li.disabled > a": {
    "color": "#777"
  },
  ".nav > li.disabled > a:hover, .nav > li.disabled > a:focus": {
    "color": "#777",
    "text-decoration": "none",
    "cursor": "not-allowed",
    "background-color": "transparent"
  },
  ".nav .open > a, .nav .open > a:hover, .nav .open > a:focus": {
    "background-color": "#eee",
    "border-color": "#428bca"
  },
  ".nav .nav-divider": {
    "height": "1px",
    "margin": "9px 0",
    "overflow": "hidden",
    "background-color": "#e5e5e5"
  },
  ".nav > li > a > img": {
    "max-width": "none"
  },
  ".nav-tabs": {
    "border-bottom": "1px solid #ddd"
  },
  ".nav-tabs > li": {
    "float": "left",
    "margin-bottom": "-1px"
  },
  ".nav-tabs > li > a": {
    "margin-right": "2px",
    "line-height": "1.42857143",
    "border": "1px solid transparent",
    "border-radius": "4px 4px 0 0"
  },
  ".nav-tabs > li > a:hover": {
    "border-color": "#eee #eee #ddd"
  },
  ".nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus": {
    "color": "#555",
    "cursor": "default",
    "background-color": "#fff",
    "border": "1px solid #ddd",
    "border-bottom-color": "transparent"
  },
  ".nav-tabs.nav-justified": {
    "width": "100%",
    "border-bottom": "0"
  },
  ".nav-tabs.nav-justified > li": {
    "float": "none"
  },
  ".nav-tabs.nav-justified > li > a": {
    "margin-bottom": "5px",
    "text-align": "center"
  },
  ".nav-tabs.nav-justified > .dropdown .dropdown-menu": {
    "top": "auto",
    "left": "auto"
  }
};

</script>

<script src="https://jsstyles.github.io/jss/dist/jss.min.js"></script>
<script src="https://cdn.rawgit.com/j2css/j2c/dc1d6df4732aac62a246285ef0394844428a8815/dist/j2c.global.min.js"></script>
<script>j2cV1Prev = j2c</script>

<script src="https://cdn.rawgit.com/j2css/j2c/c98d7d940aff3574949083052641eab6612e8dd3/dist/j2c.global.min.js"></script>
<script>j2cDedupe = j2c</script>

<script src="https://cdn.rawgit.com/j2css/j2c/94869b500b27e3df3e6dc17ca5e7be6e315ac10f/dist/j2c.global.min.js"></script>
<script>j2cPluug = j2c</script>

<script src="https://cdn.rawgit.com/j2css/j2c/f87dd8d4752391c0227c7e3591e71de9f22030b7/dist/j2c.global.min.js"></script>
<script>j2cPluuug = j2c</script>

<script src="https://cdn.rawgit.com/j2css/j2c/1df3eeb307398f2ac1273948b7905242c778f818/dist/j2c.global.min.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var cssObj = JSON.parse(JSON.stringify(window.styles))
  var cssStr = '' + j2c.sheet({'@global':cssObj})
  

};
</script>

Preparation code output

<script src="https://jsstyles.github.io/jss/dist/jss.min.js"></script> <script src="https://cdn.rawgit.com/j2css/j2c/dc1d6df4732aac62a246285ef0394844428a8815/dist/j2c.global.min.js"></script> <script>j2cV1Prev = j2c</script> <script src="https://cdn.rawgit.com/j2css/j2c/c98d7d940aff3574949083052641eab6612e8dd3/dist/j2c.global.min.js"></script> <script>j2cDedupe = j2c</script> <script src="https://cdn.rawgit.com/j2css/j2c/94869b500b27e3df3e6dc17ca5e7be6e315ac10f/dist/j2c.global.min.js"></script> <script>j2cPluug = j2c</script> <script src="https://cdn.rawgit.com/j2css/j2c/f87dd8d4752391c0227c7e3591e71de9f22030b7/dist/j2c.global.min.js"></script> <script>j2cPluuug = j2c</script> <script src="https://cdn.rawgit.com/j2css/j2c/1df3eeb307398f2ac1273948b7905242c778f818/dist/j2c.global.min.js"></script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec

Revisions

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

0 Comments