jss vs. css

JavaScript performance comparison

Revision 25 of this test case created by Ywein

Preparation code

<script id="css" type="text">
.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>
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://cdnjs.cloudflare.com/ajax/libs/jss/6.3.0/jss.min.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var cssStr = document.getElementById('css').innerHTML
  var clone = function(data) { return JSON.parse(JSON.stringify(data)) }

};
</script>

Preparation code output

<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://cdnjs.cloudflare.com/ajax/libs/jss/6.3.0/jss.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