cssobject-serialization

JavaScript performance comparison

Test case created by devinus

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  // tslint:disable
  var styles = [{"font":{"family":"arial","color":"#ff0000","weight":"bold","style":"","decoration":"","align":"center","size":{"value":"80","unit":"px"}}},{"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"}}},{"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":""}}},{"font":{"color":"#ff0000"}},{"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"}]},{"font":{"size":{"value":"22","unit":"px"},"color":"red"},"background":[{"color":"#ccffcc"}]},{"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":"blue"},"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"}}},{"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"}}},{"width":{"value":"60","unit":"px"},"height":{"value":"60","unit":"px"},"background":[{"image":"https://blogs.adobe.com/creativecloud/files/2015/08/checkbox-radio-sprite-image.png","positionX":{"value":"-194","unit":"px"},"positionY":{"value":"-21","unit":"px"},"sizeWidth":{"value":"350","unit":"px"},"sizeHeight":{"value":"","unit":""},"repeat":"no-repeat","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"}}}},{"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"}]}},{"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"}}},{"background":[{"color":"red"}]},{"background":[{"color":"green"}]},{"background":[{"color":"blue"}]},{"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"}},{"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":""}}},{"font":{"align":"center"},"display":"block"},{"display":"block"}];
  
  (function (exports) {

      "use strict";
      var __spreadArrays = (this && this.__spreadArrays) || function () {
          for (var s = 0, i = 0, il = arguments.length; i < il; i++)
              s += arguments[i].length;
          for (var r = Array(s), k = 0, i = 0; i < il; i++)
              for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                  r[k] = a[j];
          return r;
      };
      var hasOwnProperty = Object.prototype.hasOwnProperty;
      function merge(target, varArgs) {
          for (var index = 1; index < arguments.length; index++) {
              var nextSource = arguments[index];
              if (nextSource !== null && nextSource !== undefined) {
                  for (var nextKey in nextSource) {
                      // Avoid bugs when hasOwnProperty is shadowed
                      if (hasOwnProperty.call(nextSource, nextKey)) {
                          target[nextKey] = nextSource[nextKey];
                      }
                  }
              }
          }
          return target;
      }
      var positionMap = ['Top', 'Right', 'Bottom', 'Left'];
      function generateProperty(property, position) {
          if (!property)
              return position.toLowerCase();
          var splitProperty = property.split('-');
          if (splitProperty.length > 1) {
              splitProperty.splice(1, 0, position);
              return splitProperty.reduce(function (acc, val) { return "" + acc + capitalize(val); });
          }
          var joinedProperty = property.replace(/([a-z])([A-Z])/g, "$1" + position + "$2");
          return property === joinedProperty ? "" + property + position : joinedProperty;
      }
      function generateStyles(property, valuesWithDefaults) {
          var styles = {};
          for (var i = 0; i < valuesWithDefaults.length; i += 1) {
              if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
                  styles[generateProperty(property, positionMap[i])] = valuesWithDefaults[i];
              }
          }
          return styles;
      }
      function directionalProperty(property) {
          var values = [];
          for (var _i = 1; _i < arguments.length; _i++) {
              values[_i - 1] = arguments[_i];
          }
          //  prettier-ignore
          var firstValue = values[0], _a = values[1], secondValue = _a === void 0 ? firstValue : _a, _b = values[2], thirdValue = _b === void 0 ? firstValue : _b, _c = values[3], fourthValue = _c === void 0 ? secondValue : _c;
          var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
          return generateStyles(property, valuesWithDefaults);
      }
      function padding() {
          var values = [];
          for (var _i = 0; _i < arguments.length; _i++) {
              values[_i] = arguments[_i];
          }
          return directionalProperty.apply(void 0, __spreadArrays(['padding'], values));
      }
      function capitalize(value) {
          return "" + value.charAt(0).toUpperCase() + value.slice(1);
      }
      function dimension(_a) {
          var value = _a.value, unit = _a.unit;
          return "" + value + unit;
      }
      var sideMap = ['top', 'right', 'bottom', 'left'];
      function border(sideKeyword) {
          var _a;
          var values = [];
          for (var _i = 1; _i < arguments.length; _i++) {
              values[_i - 1] = arguments[_i];
          }
          if (typeof sideKeyword === 'string' && sideMap.indexOf(sideKeyword) >= 0) {
              return _a = {},
                  _a["border" + capitalize(sideKeyword) + "Width"] = values[0],
                  _a["border" + capitalize(sideKeyword) + "Style"] = values[1],
                  _a["border" + capitalize(sideKeyword) + "Color"] = values[2],
                  _a;
          }
          else {
              values.unshift(sideKeyword);
              return {
                  borderWidth: values[0],
                  borderStyle: values[1],
                  borderColor: values[2],
              };
          }
      }
      function convertFontToCSS(font) {
          var object = {};
          if (font.size) {
              object.fontSize = dimension(font.size);
          }
          object = merge(object, {
              color: font.color,
              fontFamily: font.family,
              fontWeight: font.weight,
              textAlign: font.align,
              textDecoration: font.decoration,
          });
          for (var key in ['lineHeight', 'letterSpacing', 'wordSpacing']) {
              if (font[key]) {
                  object[key] = dimension(font[key]);
              }
          }
          return object;
      }
      exports.convertToCSS = function convertToCSS(styles) {
          if (styles === void 0) {
              styles = {};
          }
          var object = {};
          if (styles.font) {
              object = merge(object, convertFontToCSS(styles.font));
          }
          for (var _i = 0, _a = ['width', 'height']; _i < _a.length; _i++) {
              var key = _a[_i];
              if (styles[key]) {
                  object[key] = dimension(styles[key]);
              }
          }
          if (styles.padding) {
              var dims = ['top', 'right', 'bottom', 'left']
                  .filter(function (k) { return styles.padding[k]; })
                  .map(function (k) { return dimension(styles.padding[k]); });
              object = merge(object, padding.apply(void 0, dims));
          }
          if (styles.border) {
              for (var _b = 0, _c = ['top', 'right', 'bottom', 'left']; _b < _c.length; _b++) {
                  var key = _c[_b];
                  var line = styles.border[key];
                  if (line) {
                      object = merge(object, border.apply(void 0, __spreadArrays([key], [dimension(line.width), line.style, line.color].filter(Boolean))));
                  }
              }
          }
          if (styles.borderRadius) {
              for (var _d = 0, _e = ['topLeft', 'topRight', 'bottomRight', 'bottomLeft']; _d < _e.length; _d++) {
                  var key = _e[_d];
                  var side = styles.borderRadius[key];
                  if (side) {
                      var newKey = "border" + capitalize(key) + "Radius";
                      object[newKey] = dimension(side);
                  }
              }
          }
          if (styles.background) {
              var layers = styles.background.map(function (bg) {
                  var value = '';
                  if (bg.image) {
                      value += "url(" + bg.image + ")";
                  }
                  for (var _i = 0, _a = ['positionX', 'positionY', 'sizeWidth', 'sizeHeight']; _i < _a.length; _i++) {
                      var key = _a[_i];
                      if (bg[key]) {
                          value += " " + dimension(bg[key]);
                      }
                  }
                  for (var _b = 0, _c = ['color', 'repeat']; _b < _c.length; _b++) {
                      var key = _c[_b];
                      if (bg[key]) {
                          value += " " + bg[key];
                      }
                  }
                  return value;
              });
              object = merge(object, {
                  background: layers.join(', ')
              });
          }
          if (styles[':placeholder']) {
              var placeholder = {};
              if (styles[':placeholder'].font) {
                  placeholder = merge(placeholder, convertFontToCSS(styles[':placeholder'].font));
              }
              object['::placeholder'] = placeholder;
          }
          return object;
      };
  })(window);
  
  (function (exports) {

      "use strict";
      var __spreadArrays = (this && this.__spreadArrays) || function () {
          for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
          for (var r = Array(s), k = 0, i = 0; i < il; i++)
              for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                  r[k] = a[j];
          return r;
      };
      function capitalize(value) {
          return "" + value.charAt(0).toUpperCase() + value.slice(1);
      }
      function dimension(dim) {
          if (!dim) {
              return;
          }
          var value = dim.value, unit = dim.unit;
          return "" + value + unit;
      };
      function font(style) {
          return {
              fontSize: dimension(style.size),
              color: style.color,
              fontFamily: style.family,
              fontWeight: style.weight,
              textAlign: style.align,
              textDecoration: style.decoration,
              lineHeight: dimension(style.lineHeight),
              wordSpacing: dimension(style.wordSpacing),
              letterSpacing: dimension(style.letterSpacing),
          };
      }
      function padding(style) {
          return {
              paddingTop: dimension(style.top),
              paddingRight: dimension(style.right),
              paddingBottom: dimension(style.bottom),
              paddingLeft: dimension(style.left),
          };
      }
      function margin(style) {
          return {
              marginTop: dimension(style.top),
              marginRight: dimension(style.right),
              marginBottom: dimension(style.bottom),
              marginLeft: dimension(style.left),
          };
      }
      var BORDER_PROPERTY_MAP = Object.assign.apply(Object, __spreadArrays([{}], ['top', 'right', 'bottom', 'left'].map(function (side) {
          var _a;
          return (_a = {},
              _a[side] = {
                  color: "border" + capitalize(side) + "Color",
                  style: "border" + capitalize(side) + "Style",
                  width: "border" + capitalize(side) + "Width",
              },
              _a);
      })));
      function border(style) {
          return ['top', 'right', 'bottom', 'left']
              .filter(function (key) { return style[key]; })
              .map(function (key) { return [key, BORDER_PROPERTY_MAP[key]]; })
              .map(function (_a) {
              var _b;
              var key = _a[0], keyMap = _a[1];
              return (_b = {},
                  _b[keyMap.color] = style[key].color,
                  _b[keyMap.style] = style[key].style,
                  _b[keyMap.width] = dimension(style[key].width),
                  _b);
          });
      }
      function borderRadius(style) {
          return {
              borderTopLeftRadius: dimension(style.topLeft),
              borderTopRightRadius: dimension(style.topRight),
              borderBottomRightRadius: dimension(style.bottomRight),
              borderBottomLeftRadius: dimension(style.bottomLeft),
          };
      }
      function background(style) {
  		var last = style.length - 1;
  		var result = style
  			.map(function (bg, idx) {
  				return []
  					.concat(
  						bg.image ? "url(" + bg.image + ")" : [], bg.positionY
  						? ['/', dimension(bg.positionX) || '0%', dimension(bg.positionY)]
  						: bg.positionX
  							? ['/', dimension(bg.positionX)]
  							: [], bg.sizeWidth || [], bg.sizeHeight || [], bg.repeat || [], (idx === last && bg.color) || [])
  						.join(' ');
  			})
  			.join(', ');
  		result | 0;
          return {
              background: result,
          };
      }
      function width(dim) {
          return {
              width: dimension(dim),
          };
      }
      function height(dim) {
          return {
              height: dimension(dim),
          };
      }
      function focus(style) {
          return {
              ':focus': serializeStyle(style),
          };
      }
      function hover(style) {
          return {
              ':hover': serializeStyle(style),
          };
      }
      function placeholder(style) {
          return {
              '::placeholder': serializeStyle(style),
          };
      }
      function skip(key) {
          return function () {
              // tslint:disable-next-line no-console
              console.warn("unsupported style key: " + key);
              return;
          };
      }
      var HANDLERS = {
          width: width,
          height: height,
          margin: margin,
          padding: padding,
          border: border,
          borderRadius: borderRadius,
          background: background,
          font: font,
          ':focus': focus,
          ':hover': hover,
          ':placeholder': placeholder,
      };
      function weakMemoize(func) {
          return (function (cache, func, arg) {
              var ret;
              return cache.get(arg) || (cache.set(arg, ret = func.call(func, arg)), ret);
          }).bind(null, new WeakMap(), func);
      }
      var nanomemoize = (function () {
        var vrgs = f => {
          var s = f+"",
            i = s.indexOf("...");
          return i>=0 && i<s.indexOf(")" || s.indexOf("arguments")>=0);
        },
        nanomemoize = (fn, {
          serializer, // used to serialize arguments of single argument functions, multis are not serialized
          equals, // equality tester, will force use of slower multiarg approach even for single arg functions
          maxAge, // max cache age is ms, set > 0 && < Infinity if you want automatic clearing
          maxArgs, // max args to use for signature
          vargs = vrgs(fn) // set to true if function may have variable or beyond-signature arguments, default if best attempt at infering
        }={}) => {
          var s = Object.create(null), // single arg function key/value cache
            k = [], // multiple arg function arg key cache
            v = [], // multiple arg function result cache
            wm = {m:new WeakMap()},
            d = (key,c) => setTimeout(() => { 
                c instanceof WeakMap  ? c.delete(key) : delete c[key] 
              },maxAge),
            I = Infinity,
            f, // memoized function to return
            u; // flag indicating a unary arg function is in use for clear operation
          if(fn.length===1 && !equals && !vargs) {
            // for single argument functions, just use a JS object key look-up
            // f = original function
            // s = result cache
            // wm = weakmap
            // c = cache change timeout
            // p = arg serializer
            // a = the arguments
            f =  (function(f,s,wm,c,p,a) { // pre-bind core arguments, faster than using a closure or passing on stack
                  // strings must be serialized because cache[1] should not equal or overwrite cache["1"] for value = 1 and value = "1"
                  var t = typeof a;
                  // set chng timeout only when new value computed, hits will not push out the tte, but it is arguable they should not
                  if(!p && (t==="object"  || t==="function")) {
                    var r;
                    return wm.m.get(a) || ((!c||c(a,wm.m)),wm.m.set(a,r = fn.call(this, a)),r);
                  }
                  var key = t === "number" || t === "boolean" || t==="undefined" ? a : t === "string" ? JSON.stringify(a) : p(a);
                  return s[key] || ((!c||c(key,s)),s[key] = fn.call(this, a));
                }).bind(
                  this,
                  fn,
                  s,
                  wm,
                  maxAge>0 && maxAge<I ? d : 0,
                  serializer
                  );
                u = 1;
          } else {
            // for multiple arg functions, loop through a cache of all the args
            // looking at each arg separately so a test can abort as soon as possible
            // f = original function
            // k = arg cache
            // v = results cache
            // e = equality tester
            // c = cache change timeout
            // m = maxArgs
            // ...a = the arguments
            f = (function(f,k,v,e,c,m,...a) {
                  var i,j,l = m||a.length; // use var, slightly smaller and faster for loops, and i needs more scope
                  for(i=0;i<k.length && v[i]!==undefined;i++) { // an array of arrays of args, each array represents a call signature
                    for(j=0;j<=l && (k[i][j]===a[j] || (e && e(k[i][j],a[j])));j++) {	// compare each arg									//if(p[j]!==a[j] && (!e || !e(p[j],a[j]))) break; // go to next call signature if args don't match
                      if(j===l) return v[i]; // the args matched
                    }
                  }
                  // set chng timeout only when new value computed, hits will not push out the tte, but it is arguable they should not
                  !c||c(i,v);
                  return v[i] = fn.apply(this,k[i] = a);
                }).bind(
                    this,
                    fn,
                    k,
                    v,
                    equals,
                    maxAge>0 && maxAge<I ? d : 0, 
                    maxArgs
                    );
          }
          // reset all the caches, must change array length or delete keys on objects to retain bind integrity
          f.clear = _ => {
            Object.keys(s).forEach(k => delete s[k]);
            wm.m = new WeakMap();
            k.length = 0;
            v.length = 0; 
          };
          f.keys = _ => u ? null : k.slice();
          f.values = _ => u ? null : v.slice();
          f.keyValues = _ => u ? {primitives:Object.assign({},s),objects:wm.m} : null;
          return f;
        }
  
        return nanomemoize;
      })();
      function jsonMemoize(func) {
          var cache = Object.create(null);
          return function (arg) {
              var key = JSON.stringify(arg);
              if (key in cache) {
                  return cache[key];
              }
              var ret = func(arg);
              cache[key] = arg;
              return ret;
          };
      }
      exports.serializeStyle = function serializeStyle(style) {
          if (style === void 0) { style = {}; }
          return Object.keys(style).map(function (key) {
              return (HANDLERS[key] || skip(key)).call(null, style[key]);
          });
      }
      exports.serializeStyleMemoized = weakMemoize(serializeStyle);
      exports.serializeStyleNanomemoized = nanomemoize(serializeStyle);
      exports.serializeStyleJSONMemoized = jsonMemoize(serializeStyle);
  })(window);
  

};
</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
serializeStyle
blackbox = styles.map(function(s) { return serializeStyle(s); });
pending…
convertToCSS
blackbox = styles.map(function(s) { return convertToCSS(s); });
pending…
serializeStyleMemoized
blackbox = styles.map(function(s) { return serializeStyleMemoized(s); });
pending…
serializeStyleJSONMemoized
blackbox = styles.map(function(s) { return serializeStyleJSONMemoized(s); });
pending…
serializeStyleNanomemoized
blackbox = styles.map(function(s) { return serializeStyleNanomemoized(s); });
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.

0 Comments