test cssHooks

JavaScript performance comparison

Test case created by Joshua

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="testel1"></div>
        <div id="testel2"></div>
        <div id="testel3"></div>
Benchmark.prototype.setup = function() {
    var cssProps = {
      'testel1': {
        'backgroundColor': '#f00',
        height: '100px'
      'testel2': {
        'backgroundColor': '#0f0',
        height: '200px'
      'testel3': {
        'backgroundColor': '#00f',
        height: '300px'
    $.cssHooks.customTest = {
      get: function() {
      set: function(elem, value) {
        //value will be a function in an array
        var props = value[0].call(elem);
        //set each property
        for (var nm in props) {
          elem.style[nm] = props[nm];

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
object loop
$.each(['testel1', 'testel2', 'testel3'], function(ind, sel) {
  $('#' + sel).css(cssProps[sel]);
$('#testel1, #testel2, #testel3').css('customTest', [
  function() {
    return cssProps[this.id]

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

Compare results of other browsers


Comment form temporarily disabled.

Add a comment