RGB to hex array

JavaScript performance comparison

Revision 8 of this test case created by tomByrer

Info

v8: almost same as v7: added "#"+ to Asen’s test to make test output even, and added an array to help prevent JS engine optimizations.

Not perfect test, since color minimizers do other things inside their functions.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    // Raphaël.js
    function raphael(red, green, blue) {
      var r = (~~red).toString(16),
          g = (~~green).toString(16),
          b = (~~blue).toString(16);
      return r + g + b;
    }
   
    function rgbtohex2(red, green, blue) {
      return '#' + (0x1000000 | blue | (green << 8) | (red << 16)).toString(16).slice(1);
    }
   
    // Garrett’s
    function garrett(r, g, b) {
      return (toHexString = _toHexString)(r,g,b);
      function _toHexString(r, g, b) {
        return "#" + toHexByte(r) + toHexByte(g) + toHexByte(b);
      }
      function toHexByte(bite) {
        var hex = bite.toString(16);
        return (hex.length === 2 ? hex : "0" + hex);
      }
    }
   
    // atesgoral’s
    function atesgoral(a,b,c) {
      return"#" + ((256 + a << 8 | b) << 8 | c).toString(16).slice(1);
    }
   
    // Asen’s
    function asen(r, g, b) {
      return "#" + ("00000" + (r << 16 | g << 8 | b).toString(16)).slice(-6);
    }
   
    // https://github.com/GoalSmashers/clean-css/blob/a17b502f50/lib/colors/rgb-to-hex.js
    function goalsmashers(r, g, b) {
        var redAsHex = parseInt(r, 10).toString(16);
        var greenAsHex = parseInt(g, 10).toString(16);
        var blueAsHex = parseInt(b, 10).toString(16);
        return '#' +
                ((redAsHex.length == 1 ? '0' : '') + redAsHex) +
                ((greenAsHex.length == 1 ? '0' : '') + greenAsHex) +
                ((blueAsHex.length == 1 ? '0' : '') + blueAsHex);
    };
   
    var testArray= [ [0,120,129], [120,0,130], [100,190,160], [255,255,255],
                     [200,60,90], [240,220,230], [80,255,118], [0,0,0]];
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Raphael
for (var i=0;i<testArray.length;i++)
 raphael(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
2
for (var i=0;i<testArray.length;i++)
 rgbtohex2(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
Garrett
for (var i=0;i<testArray.length;i++)
 garrett(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
atesgoral
for (var i=0;i<testArray.length;i++)
 atesgoral(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
Asen
for (var i=0;i<testArray.length;i++)
 asen(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
GoalSmashers
for (var i=0;i<testArray.length;i++)
 goalsmashers(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

tomByrer (revision owner) commented :

Acen's output is ligit: http://jsbin.com/UPUmaGOc/2/edit?js,console

Add a comment