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

<div id="testel1"></div> <div id="testel2"></div> <div id="testel3"></div>

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
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