string hash vs asm.js string hash

JavaScript performance comparison

Test case created by devinus

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  function str2hash2(s) {
    	var strlen = s.length;
    	if (strlen === 0) return 0;
    	for (var i=0,nHash = 0, n; i<strlen; ++i) {
    		nHash = ((nHash<<5)-nHash)+s.charCodeAt(i);
    		nHash = nHash & nHash;
    	}
    	return nHash >>> 0;
    }
    
    function murmur2(str) {
      // 'm' and 'r' are mixing constants generated offline.
      // They're not really 'magic', they just happen to work well.
    
      // const m = 0x5bd1e995;
      // const r = 24;
    
      // Initialize the hash
    
      var h = 0;
    
      // Mix 4 bytes at a time into the hash
    
      var k,
        i = 0,
        len = str.length;
      for (; len >= 4; ++i, len -= 4) {
        k =
          (str.charCodeAt(i) & 0xff) |
          ((str.charCodeAt(++i) & 0xff) << 8) |
          ((str.charCodeAt(++i) & 0xff) << 16) |
          ((str.charCodeAt(++i) & 0xff) << 24);
    
        k =
          /* Math.imul(k, m): */
          (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);
        k ^= /* k >>> r: */ k >>> 24;
    
        h =
          /* Math.imul(k, m): */
          ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^
          /* Math.imul(h, m): */
          ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));
      }
    
      // Handle the last few bytes of the input array
    
      switch (len) {
        case 3:
          h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
        case 2:
          h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
        case 1:
          h ^= str.charCodeAt(i) & 0xff;
          h =
            /* Math.imul(h, m): */
            (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
      }
    
      // Do a few final mixes of the hash to ensure the last few
      // bytes are well-incorporated.
    
      h ^= h >>> 13;
      h =
        /* Math.imul(h, m): */
        (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
    
      return ((h ^ (h >>> 15)) >>> 0).toString(36);
    }
  
   function djb2Code(str) {
      for (var i=0, l=str.length, hash=5381|0; i<l; i++) {
        hash = ( ((hash|0) << 5) + (hash|0) + (str.charCodeAt(i)|0) )|0;
      }
      return (hash|0) >>> 0;
    };
    
    function djb2CodeMod (str) {
    for (var i=0, l=str.length, hash=5381|0; i<l; hash = (( ((hash|0) << 5) + (hash|0) + (str.charCodeAt(i)|0) )|0),i++); return (hash|0) >>> 0;
    };
  
    function hashJavaDJB2(str) {
        var hash = 0, i, char;
        if (str == 0) return hash;
        for (i = 0, l = str.length; i < l; i++) {
            char  = str.charCodeAt(i);
            hash  = ((hash<<5)-hash)+char;
            hash |= 0; // Convert to 32bit integer
        }
        return hash;
    };
  
    function stringHash(str) {
      var hash = 5381,
          i    = str.length;
    
      while(i) {
        hash = (hash * 33) ^ str.charCodeAt(--i);
      }
    
      /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
       * integers. Since we want the results to be always positive, convert the
       * signed int to an unsigned by doing an unsigned bitshift. */
      return hash >>> 0;
    }
    
  
  function asmModule(stdlib, foreign, heap) {

    "use asm";
  
    var HEAPU8 = new stdlib.Uint8Array(heap);
    // var a = new stdlib.Uint8Array(heap);
  
    // function emscripten(b) {
    //   b = b | 0;
    //   var d = 0;
    //   var c = 5381;
    //   while (b|0) {
    //     d = a[b >> 0] | 0;
    //     c = (c * 33 | 0) + (d & 255) | 0;
    //     console.log('size,hash,curr', b,c,d);
    //     b = b - 1 | 0;
    //   };
    //   return c | 0
    // }
  
    // function declarations
    function hashCode(size) {
      size = size|0;
  
      // var hash = 5381;
      // var i = 0;
      // for (i = (size - 1)|0; (i|0) >= 0; i = (i-1)|0) {
      //   hash = (hash * 33) ^ HEAP8[i]|0;
      // }
    
      // return hash >>> 0|0;
  
      var hash = 5381;
      var i = 0;
  
      i = size|0;
      while (i|0) {
        i = (i-1)|0;
        // console.log('new', i, HEAP8[i], hash);
        hash = (hash * 33) ^ (HEAPU8[i]|0);
        // hash = (( ((hash|0) << 5) + (hash|0) + (HEAP8[i]|0) ))|0;
      }
  
      // console.log('new result', hash);
  
      /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
      * integers. Since we want the results to be always positive, convert the
      * signed int to an unsigned by doing an unsigned bitshift. */
      // hash = hash >>> 0;
      // console.log('new result final', hash);
      // hash = hash >>> 0;
      return +(hash >>> 0);
    }
  
    // export function
    return { hashCode: hashCode };
  }
  
  var encoder = new TextEncoder();
  var heap = new ArrayBuffer(0x10000);
  var view = new Uint8Array(heap);
  var fast = asmModule(window, null, heap);
  var hashCode = fast.hashCode;
  
  function dathash(str) {
    view.set(str);
    // view.set(encoder.encode(text));
    return hashCode(str.length);
  }
  
  function oldhash(str) {
    var hash = 5381,
        i    = str.length;
  
    while(i) {
      // console.log('old', i-1, str.charCodeAt(i-1), hash);
      hash = (hash * 33) ^ str.charCodeAt(--i);
    }
  
    /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
     * integers. Since we want the results to be always positive, convert the
     * signed int to an unsigned by doing an unsigned bitshift. */
    // console.log('old result', hash);
    // console.log('old result final', hash >>> 0);
    return hash >>> 0;
  }
  
  
  
  
  var text = JSON.stringify({
    "type": "context",
    "settings": {
      "rid": "%RID%",
      "gmailSupport": true,
      "gmailSupportMobile": false,
      "osxSuppress": false
    },
    "components": [
      {
        "type": "display-if",
        "body": {
          "element": "form",
          "visible": false,
          "required": {
            "text": "*",
            "class": ["ic-required"],
            "position": "before"
          }
        },
        "metadata": {},
        "components": [
          {
            "type": "text",
            "body": {
              "variant": "h1",
              "text": "fallback"
            },
            "class": ["fallback"],
            "components": []
          }
        ]
      },
      {
        "type": "form",
        "body": {
          "submitUrl": "https://example.com",
          "redirectUrl": "https://example.com"
        },
        "class": ["foo"],
        "components": [
          {
            "type": "input-hidden",
            "body": {
              "name": "hideme",
              "value": "hidden content"
            },
            "metadata": {}
          },
          {
            "type": "input-text",
            "body": {
              "variant": "text",
              "label": {
                "text": "First name",
                "class": ["h3", "redtext"],
                "position": "before"
              },
              "description": {
                "text": "Tell us your name",
                "class": ["desc"],
                "position": "before"
              },
              "name": "fname",
              "value": "",
              "placeholder": "type here",
              "validations": {}
            },
            "metadata": {},
            "class": ["input1"]
          },
          {
            "type": "input-textarea",
            "body": {
              "label": {
                "text": "About me",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "Tell us about yourself",
                "class": ["desc"],
                "position": "before"
              },
              "name": "bio",
              "value": "",
              "placeholder": "tell us about yourself",
              "validations": {}
            },
            "metadata": {},
            "class": ["textyMcTextface"]
          },
          {
            "type": "input-group-radio",
            "body": {
              "label": {
                "text": "Pick a colour - radio1",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "What is your favourite colour",
                "class": ["desc"],
                "position": "after"
              },
              "name": "colour"
            },
            "metadata": {},
            "components": [
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "value": "R",
                  "text": "Red"
                },
                "metadata": {},
                "class": ["swatch", "red"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": true,
                  "value": "G",
                  "text": "Green"
                },
                "metadata": {},
                "class": ["swatch", "green"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "value": "B",
                  "text": "Blue"
                },
                "metadata": {},
                "class": ["swatch", "blue"]
              }
            ]
          },
          {
            "type": "input-group-checkbox",
            "body": {
              "name": "input-group-checkbox-3957",
              "label": {
                "text": "Pick multiple colours - checkbox1",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "What is your favourite colour",
                "class": ["desc"],
                "position": "after"
              }
            },
            "metadata": {},
            "components": [
              {
                "type": "input-checkbox",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "name": "R",
                  "value": "R",
                  "text": "Red",
                  "validations": {}
                },
                "metadata": {},
                "class": ["swatch", "red"]
              },
              {
                "type": "input-checkbox",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": true,
                  "name": "G",
                  "value": "G",
                  "text": "Green",
                  "validations": {}
                },
                "metadata": {},
                "class": ["swatch", "green"]
              },
              {
                "type": "input-checkbox",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "name": "B",
                  "value": "B",
                  "text": "Blue",
                  "validations": {}
                },
                "metadata": {},
                "class": ["swatch", "blue"]
              }
            ]
          },
          {
            "type": "input-group-radio",
            "body": {
              "label": {
                "text": "Pick a colour - radio2",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "What is your favourite colour",
                "class": ["desc"],
                "position": "after"
              },
              "name": "colour2",
              "validations": {}
            },
            "metadata": {},
            "components": [
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Red",
                    "class": ["block"],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "value": "R",
                  "text": "Red"
                },
                "metadata": {},
                "class": ["swatch", "red"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Green",
                    "class": ["block"],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": true,
                  "value": "G",
                  "text": "Green"
                },
                "metadata": {},
                "class": ["swatch", "green"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Blue",
                    "class": ["block"],
                    "position": "before"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "value": "B",
                  "text": "Blue"
                },
                "metadata": {},
                "class": ["swatch", "blue"]
              }
            ]
          },
          {
            "type": "input-group-checkbox",
            "body": {
              "name": "input-group-checkbox34239",
              "label": {
                "text": "Pick multiple colours - checkbox2",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "What is your favourite colour",
                "class": ["desc"],
                "position": "after"
              }
            },
            "metadata": {},
            "components": [
              {
                "type": "input-checkbox",
                "body": {
                  "label": {
                    "text": "Red",
                    "class": [],
                    "position": "after"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "name": "R",
                  "value": "R",
                  "text": "Red",
                  "validations": {}
                },
                "metadata": {},
                "class": ["swatch", "red", "stack"]
              },
              {
                "type": "input-checkbox",
                "body": {
                  "label": {
                    "text": "Green",
                    "class": [],
                    "position": "after"
                  },
                  "variant": "swatch",
                  "selected": true,
                  "name": "G",
                  "value": "G",
                  "text": "Green",
                  "validations": {}
                },
                "metadata": {},
                "class": ["swatch", "green", "stack"]
              },
              {
                "type": "input-checkbox",
                "body": {
                  "label": {
                    "text": "Blue",
                    "class": [],
                    "position": "after"
                  },
                  "variant": "swatch",
                  "selected": false,
                  "name": "B",
                  "value": "B",
                  "text": "Blue",
                  "validations": {}
                },
                "metadata": {},
                "class": ["swatch", "blue", "stack"]
              }
            ]
          },
          {
            "type": "input-group-rating",
            "body": {
              "label": {
                "text": "Rating",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "What do you think?",
                "class": ["desc"],
                "position": "after"
              },
              "name": "rating",
              "gmailFallback": "inline",
              "validations": {}
            },
            "metadata": {},
            "components": [
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Bad",
                    "class": ["block"],
                    "position": "after"
                  },
                  "variant": "text",
                  "selected": false,
                  "value": "1",
                  "text": "1"
                },
                "metadata": {},
                "class": ["rating"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "text",
                  "selected": true,
                  "value": "2",
                  "text": "2"
                },
                "metadata": {},
                "class": ["rating"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "text",
                  "selected": false,
                  "value": "3",
                  "text": "3"
                },
                "metadata": {},
                "class": ["rating"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "text",
                  "selected": false,
                  "value": "4",
                  "text": "4"
                },
                "metadata": {},
                "class": ["rating"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Good",
                    "class": ["block"],
                    "position": "after"
                  },
                  "variant": "text",
                  "selected": false,
                  "value": "5",
                  "text": "5"
                },
                "metadata": {},
                "class": ["rating"]
              }
            ]
          },
          {
            "type": "input-group-rating",
            "body": {
              "label": {
                "text": "Rating",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "What do you think?",
                "class": ["desc"],
                "position": "after"
              },
              "name": "stars",
              "gmailFallback": "stack-high-to-low",
              "validations": {}
            },
            "metadata": {},
            "components": [
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Bad",
                    "class": ["block"],
                    "position": "after"
                  },
                  "variant": "icon-star",
                  "selected": false,
                  "value": "1",
                  "text": "1 star"
                },
                "metadata": {},
                "class": ["star"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "icon-star",
                  "selected": true,
                  "value": "2",
                  "text": "2 star"
                },
                "metadata": {},
                "class": ["star"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "icon-star",
                  "selected": false,
                  "value": "3",
                  "text": "3 star"
                },
                "metadata": {},
                "class": ["star"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "",
                    "class": [],
                    "position": "before"
                  },
                  "variant": "icon-star",
                  "selected": false,
                  "value": "4",
                  "text": "4 star"
                },
                "metadata": {},
                "class": ["star"]
              },
              {
                "type": "input-radio",
                "body": {
                  "label": {
                    "text": "Good",
                    "class": ["block"],
                    "position": "after"
                  },
                  "variant": "icon-star",
                  "selected": false,
                  "value": "5",
                  "text": "5 star"
                },
                "metadata": {},
                "class": ["star"]
              }
            ]
          },
          {
            "type": "input-select",
            "body": {
              "name": "select",
              "label": {
                "text": "Select something",
                "class": ["h3"],
                "position": "before"
              },
              "description": {
                "text": "Pick an option",
                "class": ["desc"],
                "position": "after"
              },
              "options": [
                {
                  "value": "a",
                  "text": "Options a",
                  "disabled": false,
                  "selected": false
                },
                {
                  "value": "b",
                  "text": "Options b",
                  "disabled": false,
                  "selected": false
                },
                {
                  "value": "c",
                  "text": "Options c",
                  "disabled": false,
                  "selected": false
                },
                {
                  "value": "d",
                  "text": "Options d is a very long options that may run onto multiple lines",
                  "disabled": false,
                  "selected": false
                },
                {
                  "value": "",
                  "text": "Select an option",
                  "disabled": true,
                  "selected": true
                }
              ],
              "validations": {}
            },
            "metadata": {},
            "class": ["dropdown"]
          },
          {
            "type": "form-button",
            "body": {
              "variant": "submit",
              "text": "click me"
            },
            "metadata": {},
            "class": ["submit"]
          },
          {
            "type": "display-if",
            "body": {
              "element": "form",
              "visible": false
            },
            "metadata": {},
            "components": [
              {
                "type": "custom-html",
                "body": {
                  "html": "<img src=\"https://dummyimage.com/600x400/f00/fff.png&text=FALLBACK\" width=\"600\" style=\"width:600px;max-width:100%;\" alt=\"fallback\">"
                }
              }
            ]
          }
        ]
      }
    ],
    "stylesheet": {
      "rules": [
        {
          "class": "fallback",
          "style": {
            "font": {
              "family": "arial",
              "color": "#ff0000",
              "weight": "bold",
              "style": "",
              "decoration": "",
              "align": "center",
              "size": {
                "value": "80",
                "unit": "px"
              }
            }
          }
        },
        {
          "class": "h3",
          "style": {
            "font": {
              "family": "monospace",
              "color": "#663300",
              "weight": "bold",
              "style": "italic",
              "decoration": "underline",
              "align": "left",
              "size": {
                "value": "22",
                "unit": "px"
              },
              "lineHeight": {
                "value": "210",
                "unit": "%"
              },
              "letterSpacing": {
                "value": "2",
                "unit": "px"
              },
              "wordSpacing": {
                "value": "1",
                "unit": "px"
              }
            }
          }
        },
        {
          "class": "desc",
          "style": {
            "font": {
              "family": "arial",
              "color": "#444444",
              "weight": "",
              "style": "",
              "decoration": "",
              "align": "left",
              "size": {
                "value": "14",
                "unit": "px"
              },
              "lineHeight": {
                "value": "",
                "unit": ""
              },
              "letterSpacing": {
                "value": "",
                "unit": ""
              },
              "wordSpacing": {
                "value": "",
                "unit": ""
              }
            },
            "margin": {
              "top": {
                "value": "4",
                "unit": "px"
              },
              "right": {
                "value": "",
                "unit": ""
              },
              "bottom": {
                "value": "",
                "unit": ""
              },
              "left": {
                "value": "",
                "unit": ""
              }
            }
          }
        },
        {
          "class": "redtext",
          "style": {
            "font": {
              "color": "#ff0000"
            }
          }
        },
        {
          "class": "foo",
          "style": {
            "padding": {
              "top": {
                "value": "15",
                "unit": "px"
              },
              "right": {
                "value": "15",
                "unit": "px"
              },
              "bottom": {
                "value": "15",
                "unit": "px"
              },
              "left": {
                "value": "15",
                "unit": "px"
              }
            },
            "width": {
              "value": "550",
              "unit": "px"
            },
            "boxShadows": [
              {
                "inset": false,
                "horizontalOffset": {
                  "value": "15",
                  "unit": "px"
                },
                "verticalOffset": {
                  "value": "-15",
                  "unit": "px"
                },
                "blur": {
                  "value": "20",
                  "unit": "px"
                },
                "spread": {
                  "value": "5",
                  "unit": "px"
                },
                "color": "#999999"
              },
              {
                "inset": false,
                "horizontalOffset": {
                  "value": "-5",
                  "unit": "px"
                },
                "verticalOffset": {
                  "value": "5",
                  "unit": "px"
                },
                "blur": {
                  "value": "20",
                  "unit": "px"
                },
                "spread": {
                  "value": "",
                  "unit": "px"
                },
                "color": "#ecbe2d"
              }
            ],
            "background": [
              {
                "image": "https://clipart.info/images/ccovers/1486149501Sunshine-free-sun-clipart-public-domain-sun-clip-art-images-and-3.png",
                "positionX": {
                  "value": "right",
                  "unit": "keyword"
                },
                "positionY": {
                  "value": "top",
                  "unit": "keyword"
                },
                "sizeWidth": {
                  "value": "150",
                  "unit": "px"
                },
                "sizeHeight": {
                  "value": "auto",
                  "unit": "keyword"
                },
                "repeat": "no-repeat",
                "color": "purple"
              },
              {
                "image": "https://purepng.com/public/uploads/large/purepng.com-grassgrasstype-of-plantgrasslandgrass-lawn-1411527053397pbrsp.png",
                "positionX": {
                  "value": "",
                  "unit": ""
                },
                "positionY": {
                  "value": "bottom",
                  "unit": "keyword"
                },
                "sizeWidth": {
                  "value": "250",
                  "unit": "px"
                },
                "sizeHeight": {
                  "value": "auto",
                  "unit": "keyword"
                },
                "repeat": "repeat-x",
                "color": "#88cfec"
              }
            ]
          }
        },
        {
          "class": "input1",
          "style": {
            "width": {
              "value": "300",
              "unit": "px"
            },
            "height": {
              "value": "50",
              "unit": "px"
            },
            "padding": {
              "top": {
                "value": "10",
                "unit": "px"
              },
              "right": {
                "value": "10",
                "unit": "px"
              },
              "bottom": {
                "value": "10",
                "unit": "px"
              },
              "left": {
                "value": "10",
                "unit": "px"
              }
            },
            "font": {
              "size": {
                "value": "22",
                "unit": "px"
              },
              "color": "#000000"
            },
            "background": [
              {
                "color": "#ccffcc"
              }
            ],
            "border": {
              "top": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#333333",
                "width": {
                  "value": "4",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#333333",
                "width": {
                  "value": "4",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "5",
                "unit": "px"
              },
              "topRight": {
                "value": "15",
                "unit": "px"
              },
              "bottomRight": {
                "value": "5",
                "unit": "px"
              },
              "bottomLeft": {
                "value": "5",
                "unit": "px"
              }
            },
            ":focus": {
              "background": [
                {
                  "color": "olive"
                }
              ]
            },
            ":hover": {
              "background": [
                {
                  "color": "teal"
                }
              ]
            },
            ":placeholder": {
              "font": {
                "size": {
                  "value": "18",
                  "unit": "px"
                },
                "color": "#999999"
              }
            }
          }
        },
        {
          "class": "textyMcTextface",
          "style": {
            "width": {
              "value": "450",
              "unit": "px"
            },
            "height": {
              "value": "150",
              "unit": "px"
            },
            "padding": {
              "top": {
                "value": "10",
                "unit": "px"
              },
              "right": {
                "value": "10",
                "unit": "px"
              },
              "bottom": {
                "value": "10",
                "unit": "px"
              },
              "left": {
                "value": "10",
                "unit": "px"
              }
            },
            "font": {
              "size": {
                "value": "22",
                "unit": "px"
              },
              "color": "#000000"
            },
            "background": [
              {
                "color": "#ccffcc"
              }
            ],
            "border": {
              "top": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#333333",
                "width": {
                  "value": "4",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#333333",
                "width": {
                  "value": "4",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "5",
                "unit": "px"
              },
              "topRight": {
                "value": "15",
                "unit": "px"
              },
              "bottomRight": {
                "value": "5",
                "unit": "px"
              },
              "bottomLeft": {
                "value": "5",
                "unit": "px"
              }
            },
            ":focus": {
              "background": [
                {
                  "color": "olive"
                }
              ]
            },
            ":hover": {
              "background": [
                {
                  "color": "teal"
                }
              ]
            },
            ":placeholder": {
              "font": {
                "size": {
                  "value": "18",
                  "unit": "px"
                },
                "color": "#999999"
              }
            }
          }
        },
        {
          "class": "swatch",
          "style": {
            "width": {
              "value": "60",
              "unit": "px"
            },
            "height": {
              "value": "60",
              "unit": "px"
            },
            "background": [
              {
                "color": "purple"
              }
            ],
            "border": {
              "top": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "50",
                "unit": "%"
              },
              "topRight": {
                "value": "50",
                "unit": "%"
              },
              "bottomRight": {
                "value": "50",
                "unit": "%"
              },
              "bottomLeft": {
                "value": "50",
                "unit": "%"
              }
            },
            ":checked": {
              "background": [
                {
                  "image": "https://blogs.adobe.com/creativecloud/files/2015/08/checkbox-radio-sprite-image.png",
                  "position": "-275px -21px",
                  "size": "350px",
                  "positionX": {
                    "value": "-275",
                    "unit": "px"
                  },
                  "positionY": {
                    "value": "-21",
                    "unit": "px"
                  },
                  "sizeWidth": {
                    "value": "350",
                    "unit": "px"
                  },
                  "sizeHeight": {
                    "value": "auto",
                    "unit": "keyword"
                  },
                  "repeat": "no-repeat",
                  "color": "purple"
                }
              ],
              "border": {
                "top": {
                  "color": "#ffffff",
                  "width": {
                    "value": "2",
                    "unit": "px"
                  },
                  "style": "solid"
                },
                "right": {
                  "color": "#ffffff",
                  "width": {
                    "value": "2",
                    "unit": "px"
                  },
                  "style": "solid"
                },
                "bottom": {
                  "color": "#ffffff",
                  "width": {
                    "value": "2",
                    "unit": "px"
                  },
                  "style": "solid"
                },
                "left": {
                  "color": "#ffffff",
                  "width": {
                    "value": "2",
                    "unit": "px"
                  },
                  "style": "solid"
                }
              }
            }
          }
        },
        {
          "class": "rating",
          "style": {
            "width": {
              "value": "",
              "unit": ""
            },
            "height": {
              "value": "",
              "unit": ""
            },
            "padding": {
              "top": {
                "value": "10",
                "unit": "px"
              },
              "right": {
                "value": "15",
                "unit": "px"
              },
              "bottom": {
                "value": "10",
                "unit": "px"
              },
              "left": {
                "value": "15",
                "unit": "px"
              }
            },
            "border": {
              "top": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "60",
                "unit": "px"
              },
              "topRight": {
                "value": "60",
                "unit": "px"
              },
              "bottomRight": {
                "value": "60",
                "unit": "px"
              },
              "bottomLeft": {
                "value": "60",
                "unit": "px"
              }
            },
            "background": [
              {
                "color": "#666666"
              }
            ],
            ":hover": {
              "background": [
                {
                  "color": "#f6e799"
                }
              ]
            },
            ":checked": {
              "background": [
                {
                  "color": "gold"
                }
              ]
            }
          }
        },
        {
          "class": "star",
          "style": {
            "width": {
              "value": "40",
              "unit": "px"
            },
            "height": {
              "value": "40",
              "unit": "px"
            },
            "border": {
              "top": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#333333",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "60",
                "unit": "px"
              },
              "topRight": {
                "value": "60",
                "unit": "px"
              },
              "bottomRight": {
                "value": "60",
                "unit": "px"
              },
              "bottomLeft": {
                "value": "60",
                "unit": "px"
              }
            },
            "background": [
              {
                "color": "#777777"
              }
            ],
            "font": {
              "color": "#dddddd",
              "size": {
                "value": "30",
                "unit": "px"
              },
              "align": "center",
              "lineHeight": {
                "value": "40",
                "unit": "px"
              }
            },
            ":hover": {
              "font": {
                "color": "#f6e799"
              }
            },
            ":checked": {
              "font": {
                "color": "gold"
              }
            }
          }
        },
        {
          "class": "red",
          "style": {
            "background": [
              {
                "color": "red"
              }
            ]
          }
        },
        {
          "class": "green",
          "style": {
            "background": [
              {
                "color": "green"
              }
            ]
          }
        },
        {
          "class": "blue",
          "style": {
            "background": [
              {
                "color": "blue"
              }
            ]
          }
        },
        {
          "class": "dropdown",
          "style": {
            "width": {
              "value": "400",
              "unit": "px"
            },
            "height": {
              "value": "50",
              "unit": "px"
            },
            "background": [
              {
                "color": "#f9ffda"
              }
            ],
            "border": {
              "top": {
                "color": "#425d43",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#425d43",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#425d43",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#425d43",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "5",
                "unit": "px"
              },
              "topRight": {
                "value": "5",
                "unit": "px"
              },
              "bottomRight": {
                "value": "5",
                "unit": "px"
              },
              "bottomLeft": {
                "value": "5",
                "unit": "px"
              }
            },
            "font": {
              "size": {
                "value": "18",
                "unit": "px"
              },
              "color": "#425d43"
            }
          }
        },
        {
          "class": "submit",
          "style": {
            "width": {
              "value": "400",
              "unit": "px"
            },
            "background": [
              {
                "color": "#fa736d"
              }
            ],
            "border": {
              "top": {
                "color": "#546a8f",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "right": {
                "color": "#546a8f",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "bottom": {
                "color": "#546a8f",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              },
              "left": {
                "color": "#546a8f",
                "width": {
                  "value": "2",
                  "unit": "px"
                },
                "style": "solid"
              }
            },
            "borderRadius": {
              "topLeft": {
                "value": "5",
                "unit": "px"
              },
              "topRight": {
                "value": "5",
                "unit": "px"
              },
              "bottomRight": {
                "value": "5",
                "unit": "px"
              },
              "bottomLeft": {
                "value": "5",
                "unit": "px"
              }
            },
            "margin": {
              "top": {
                "value": "1",
                "unit": "em"
              },
              "right": {
                "value": "",
                "unit": ""
              },
              "bottom": {
                "value": "",
                "unit": ""
              },
              "left": {
                "value": "",
                "unit": ""
              }
            },
            "padding": {
              "top": {
                "value": "10",
                "unit": "px"
              },
              "right": {
                "value": "0",
                "unit": ""
              },
              "bottom": {
                "value": "10",
                "unit": "px"
              },
              "left": {
                "value": "0",
                "unit": ""
              }
            }
          }
        },
        {
          "class": "block",
          "style": {
            "font": {
              "align": "center"
            },
            "display": "block"
          }
        },
        {
          "class": "stack",
          "style": {
            "display": "block"
          }
        }
      ],
      "media": [
        {
          "query": "@media only screen and (max-width:450px)",
          "rules": [
            {
              "class": "foo",
              "style": {
                "width": {
                  "value": "450",
                  "unit": "px"
                },
                "padding": {
                  "top": {
                    "value": "11",
                    "unit": "px"
                  },
                  "right": {
                    "value": "12",
                    "unit": "px"
                  },
                  "bottom": {
                    "value": "14",
                    "unit": "px"
                  },
                  "left": {
                    "value": "16",
                    "unit": "px"
                  }
                },
                "background": [
                  {
                    "image": "https://storage.googleapis.com/kapwing/Rain-wocDHnOT7.gif",
                    "positionX": {
                      "value": "right",
                      "unit": "keyword"
                    },
                    "positionY": {
                      "value": "top",
                      "unit": "keyword"
                    },
                    "sizeWidth": {
                      "value": "150",
                      "unit": "px"
                    },
                    "sizeHeight": {
                      "value": "auto",
                      "unit": "keyword"
                    },
                    "repeat": "repeat",
                    "color": "purple"
                  },
                  {
                    "image": "https://i.pinimg.com/originals/23/eb/fc/23ebfcc40b2fe012cbf8be46bc130245.png",
                    "positionX": {
                      "value": "center",
                      "unit": "keyword"
                    },
                    "positionY": {
                      "value": "30",
                      "unit": "px"
                    },
                    "sizeWidth": {
                      "value": "150",
                      "unit": "px"
                    },
                    "sizeHeight": {
                      "value": "auto",
                      "unit": "keyword"
                    },
                    "repeat": "repeat-x",
                    "color": "purple"
                  },
                  {
                    "image": "https://purepng.com/public/uploads/large/purepng.com-grassgrasstype-of-plantgrasslandgrass-lawn-1411527053397pbrsp.png",
                    "positionX": {
                      "value": "",
                      "unit": ""
                    },
                    "positionY": {
                      "value": "bottom",
                      "unit": "keyword"
                    },
                    "sizeWidth": {
                      "value": "250",
                      "unit": "px"
                    },
                    "sizeHeight": {
                      "value": "auto",
                      "unit": "keyword"
                    },
                    "repeat": "repeat-x",
                    "color": "#7bbad4"
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  });
  
  //encoder.encodeInto(text, view);
  //view.set(encoder.encode(text));
  

};
</script>

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
oldhash
return oldhash(text);
pending…
dathash
return dathash(text);
pending…
stringHash
return stringHash(text);
pending…
djb2CodeMod
return djb2CodeMod(text);
pending…
djb2Code
return djb2Code(text);
pending…
hashJavaDJB2
return hashJavaDJB2(text);
pending…
str2hash2
return str2hash2(text);
pending…
murmur2
return murmur2(text);
pending…

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

0 Comments