double call of jQuery.css vs. css property object creating

JavaScript performance comparison

Test case created by Florian Maertl

Info

The flow variable can be either "left" or "right".

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="contentDiv">
</div>
<script>
Benchmark.prototype.setup = function() {
    var contentDiv = $("#contentDiv");
    var flow = "left";
    var cssProps;
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
with double call to jQuery.css
contentDiv.css({
  position: "absolute",
  top: "0",
  "z-index": "20",
  "background-color": "#E7E7E7"
}).css(flow, aniProps.oldContent.width).show();
pending…
with css Property object and one call to jQuery.css
cssProps = {
  position: "absolute",
  top: "0",
  "z-index": "20",
  "background-color": "#E7E7E7"
};
cssProps[flow] = "0";
contentDiv.css(cssProps).show();
pending…

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

Compare results of other browsers

0 comments

Add a comment