Testing Color

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
        var lastWord = /(.*[\s;}])(\S+)/; // http://stackoverflow.com/a/5673942/189093
        var onlyNumbers = /[^0-9\.%,]+/g;
        var types = {
          rgb: 'rgb',
          gb: 'rgb',
          b: 'rgb',
          rgba: 'rgba',
          gba: 'rgba',
          ba: 'rgba',
          a: 'rgba',
          hsl: 'hsl',
          sl: 'hsl',
          l: 'hsl',
          hsla: 'hsla',
          sla: 'hsla',
          la: 'hsla',
          hsv: 'hsv',
          sv: 'hsv',
          v: 'hsv',
          hsva: 'hsva',
          sva: 'hsva',
          va: 'hsva'
        };
        var limits = {
          r: 255,
          g: 255,
          b: 255,
          h: 360,
          s: 100,
          l: 100,
          v: 100,
          a: 1
        };
   
        function parseColor(e) {
          //var percentages={};
          var split, prefix, suffix, type, startBracket, endBracket, hash, limit, temp, percentages;
          value = '';
          value = e;
          startBracket = value.indexOf('(');
          endBracket = value.indexOf(')', startBracket);
          if (startBracket !== -1 && endBracket !== -1) {
            type = value.substring(0, startBracket).trim();
            suffix = value.substring(endBracket + 1);
            value = value.substring(startBracket + 1, endBracket);
            startBracket = true;
            endBracket = true;
          } else if (startBracket !== -1) {
            type = value.substring(0, startBracket).trim();
            if (!type) type = 'rgb';
            value = value.substring(startBracket + 1);
            startBracket = true;
            endBracket = false;
          } else if (endBracket !== -1) {
            suffix = value.substring(endBracket + 1);
            value = value.substring(0, endBracket);
            startBracket = false;
            endBracket = true;
            type = 'rgb';
          }
          if (type) {
            split = lastWord.exec(type);
            if (split) {
              var prefix = split[1];
              type = split[2];
            }
            value = value.replace(onlyNumbers, '');
            value = value.split(',');
            if (types[type]) type = types[type];
            else type = 'rgb';
            if (value.length > 3) {
              if (type.length === 3) type = type + 'a';
              value.length = 4;
            } else if (value.length < 4) {
              if (type.length === 4) type = type.substring(0, 3);
              value.length = 3;
            }
          } else {
            split = value.indexOf(',');
            if (split === -1) {
              type = 'hex';
              value = value.replace(cleanHex, '');
            } else {
              value = value.replace(onlyNumbers, '');
              value = split(',');
              if (value.length > 3) {
                type = 'rgba';
                value.length = 4;
              } else if (value.length < 4) {
                type = 'rgb';
                value.length = 3;
              }
            }
          }
          if (type !== 'hex') {
            for (var i = 0, end = value.length; i < end; i++) {
              temp = value[i].trim();
              limit = limits[type.charAt(i)];
              if (temp.charAt(temp.length - 1) === '%') {
                temp = temp.slice(0, -1);
                if (type.charAt(0) === 'r') temp = Math.round((temp / 100) * limit);
                percentages = true;
              }
              if (temp > limit) value[i] = limit;
              else value[i] = temp;
            }
          } else {
   
          }
   
   
        }
   
        function parseColor2(e) {
          var lastWord = /(.*[\s;}])(\S+)/; // http://stackoverflow.com/a/5673942/189093
          var onlyNumbers = /[^0-9\.%,]+/g;
          var types = {
            rgb: 'rgb',
            gb: 'rgb',
            b: 'rgb',
            rgba: 'rgba',
            gba: 'rgba',
            ba: 'rgba',
            a: 'rgba',
            hsl: 'hsl',
            sl: 'hsl',
            l: 'hsl',
            hsla: 'hsla',
            sla: 'hsla',
            la: 'hsla',
            hsv: 'hsv',
            sv: 'hsv',
            v: 'hsv',
            hsva: 'hsva',
            sva: 'hsva',
            va: 'hsva'
          };
          var limits = {
            r: 255,
            g: 255,
            b: 255,
            h: 360,
            s: 100,
            l: 100,
            v: 100,
            a: 1
          };
          //var percentages={};
          var split, prefix, suffix, type, startBracket, endBracket, hash, limit, temp, percentages;
          value = '';
          value = e;
          startBracket = value.indexOf('(');
          endBracket = value.indexOf(')', startBracket);
          if (startBracket !== -1 && endBracket !== -1) {
            type = value.substring(0, startBracket).trim();
            suffix = value.substring(endBracket + 1);
            value = value.substring(startBracket + 1, endBracket);
            startBracket = true;
            endBracket = true;
          } else if (startBracket !== -1) {
            type = value.substring(0, startBracket).trim();
            if (!type) type = 'rgb';
            value = value.substring(startBracket + 1);
            startBracket = true;
            endBracket = false;
          } else if (endBracket !== -1) {
            suffix = value.substring(endBracket + 1);
            value = value.substring(0, endBracket);
            startBracket = false;
            endBracket = true;
            type = 'rgb';
          }
          if (type) {
            split = lastWord.exec(type);
            if (split) {
              var prefix = split[1];
              type = split[2];
            }
            value = value.replace(onlyNumbers, '');
            value = value.split(',');
            if (types[type]) type = types[type];
            else type = 'rgb';
            if (value.length > 3) {
              if (type.length === 3) type = type + 'a';
              value.length = 4;
            } else if (value.length < 4) {
              if (type.length === 4) type = type.substring(0, 3);
              value.length = 3;
            }
          } else {
            split = value.indexOf(',');
            if (split === -1) {
              type = 'hex';
              value = value.replace(cleanHex, '');
            } else {
              value = value.replace(onlyNumbers, '');
              value = split(',');
              if (value.length > 3) {
                type = 'rgba';
                value.length = 4;
              } else if (value.length < 4) {
                type = 'rgb';
                value.length = 3;
              }
            }
          }
          if (type !== 'hex') {
            for (var i = 0, end = value.length; i < end; i++) {
              temp = value[i].trim();
              limit = limits[type.charAt(i)];
              if (temp.charAt(temp.length - 1) === '%') {
                temp = temp.slice(0, -1);
                if (type.charAt(0) === 'r') temp = Math.round((temp / 100) * limit);
                percentages = true;
              }
              if (temp > limit) value[i] = limit;
              else value[i] = temp;
            }
          } else {
   
          }
   
   
        }
};
</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
parse
parseColor('rgb(255,255,255)');
pending…
parse2
parseColor2('rgb(0,0,0)');
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