RGB To Hex

JavaScript performance comparison

Revision 5 of this test case created

Info

This test is meant to measure performance for various means of doing a conversion from RGB to Hex. Input : integer R,G,B values of a color, within the 0-255 range. expl : r=120, g=10, b=240 Output : javascript hex color. expl : #15F088

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    function rgbToHex_1toString(r,g,b) {
      return '#'+ (r*65536+g*256+b).toString(16);
    }
   
    function rgbToHex_3toString() {
      var hex = '#',
          color = '';
      for (var i = 0; i < arguments.length; i++) {
        color = arguments[i].toString(16);
        hex += ( color.length != 1 ) ? color : '0' + color;
      }
      return hex;
    }
   
    function rgbToHex__3ToStringUnrolled(r, g, b) {
    var tmp = pad2(r.toString(16)) + pad2(g.toString(16)) + pad2(b.toString(16));
    while (tmp.length < 6 ) tmp+= '0';
      return '#' + tmp ;
    }
   
    var hex_chache16 = {
      temp: {
        chars: '0123456789ABCDEF',
        partA: '',
        partB: '',
        output: ''
      },
      generate: function() {
        this.temp.output = ''; // Cleanup
        for (var i = 0; i < arguments.length; i++) {
          partA = this.temp.chars.charAt(Math.floor(arguments[i] / 16));
          partB = this.temp.chars.charAt(Math.floor(arguments[i] - (Math.floor(arguments[i] / 16) * 16)));
          this.temp.output += partA + partB;
        }
        return '#' + this.temp.output;
      }
    };
   
    var hex_chache16_mod = {
      temp: {
        chars: '0123456789ABCDEF',
        partA: '',
        partB: '',
        output: ''
      },
      generate: function() {
        this.temp.output = ''; // Cleanup
        for (var i = 0; i < arguments.length; i++) {
          partA = this.temp.chars.charAt(~~(arguments[i] / 16));
          partB = this.temp.chars.charAt(~~(arguments[i] - (~~(arguments[i] / 16) * 16)));
          this.temp.output += partA + partB;
        }
        return '#' + this.temp.output;
      }
    };
   
   
    var floor = Math.floor;
   
    var hex_cache256 = {
      init: function() {
        this._chars256 = '';
        for (var i = 0; i < 256; i++)
        this._chars256 += this._chars16.charAt(~~(i / 16)) + this._chars16.charAt(i % 16);
      },
      generate: function(r,g,b) { //
       this._output = '#';
       this._output += this._chars256.charAt(2*r)
      + this._chars256.charAt(2*r+1);    
       this._output += this._chars256.charAt(2*g)
         + this._chars256.charAt(2*g+1);    
       this._output += this._chars256.charAt(2*b)
       + this._chars256.charAt(2*b+1);    
        return this._output;
      },
    _output: '',
      _chars16: '0123456789ABCDEF',
      _chars256: null
    };
    hex_cache256 .init();
   
   
    /*  
      // rolled version of hex_cache256.generate    (20%slower)
       this._output = '#';
       var tmp=0;
        for (var i = 0; i < arguments.length; i++) {
              tmp = arguments[i];
              this._output += this._chars256.charAt(2*tmp) + this._chars256.charAt(2*tmp+1);
               }    
        return this._output;
    */

   
   
   
    function hexGenerate_16(input) {
      var chars = '0123456789ABCDEF';
      var partA = '';
      var partB = '';
      var output = '';
      for (var i = 0; i < 3; i++) {
        partA = chars.charAt(Math.floor(input[i] / 16));
        partB = chars.charAt(Math.floor(input[i] - (Math.floor(input[i] / 16) * 16)));
        output += partA + partB;
      }
      return '#' + output;
    };
   
    function pad2(str) {
      return (str.lenght == 1 ? '0' + str : str)
    }
   
    var testArray= [ [0,120,129], [120,0,130], [100,190,160],
                    [200,60,90], [240,220,230], [80,255,118] ];
};
</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
single .toString
for (var i = 0 ; i < testArray.length; i++)
 rgbToHex_1toString(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
three toString
for (var i = 0 ; i < testArray.length; i++)
rgbToHex_3toString(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
three toString unrolled
for (var i = 0 ; i < testArray.length; i++)
rgbToHex__3ToStringUnrolled(testArray[i][0], testArray[i][1], testArray[i][2]);
 
pending…
Object with 16 lookup
for (var i = 0 ; i < testArray.length; i++)
hex_chache16.generate(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
function with 16 lookup
for (var i = 0 ; i < testArray.length; i++)
hexGenerate_16(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
Object with 256 lookup
for (var i = 0 ; i < testArray.length; i++)
hex_cache256 .generate(testArray[i][0], testArray[i][1], testArray[i][2]);
pending…
function mod with 16 lookup
for (var i = 0 ; i < testArray.length; i++)
hex_chache16_mod.generate(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:

0 comments

Add a comment