Rework component update logic avoiding memory allocations (#5474)

Co-authored-by: Noeri Huisman <mrxz@users.noreply.github.com>

src/core/a-mixin.js

@@ -2,6 +2,7 @@
 var ANode = require('./a-node').ANode;
 var components = require('./component').components;
 var utils = require('../utils');
+var styleParser = utils.styleParser;
 
 var MULTIPLE_COMPONENT_DELIMITER = '__';
 
@@ -55,9 +56,32 @@ class AMixin extends ANode {
     if (value === undefined) {
       value = window.HTMLElement.prototype.getAttribute.call(this, attr);
     }
+
     this.rawAttributeCache[attr] = value;
     if (!component) { return; }
-    this.componentCache[attr] = component.parseAttrValueForCache(value);
+    this.componentCache[attr] = this.parseComponentAttrValue(component, value);
+  }
+
+  /**
+   * Given an HTML attribute value parses the string based on the component schema.
+   * To avoid double parsing of strings when mixed into the actual component,
+   * we store the original instead of the parsed one.
+   *
+   * @param {object} component - The component to parse for.
+   * @param {string} attrValue - HTML attribute value.
+   */
+  parseComponentAttrValue (component, attrValue) {
+    var parsedValue;
+    if (typeof attrValue !== 'string') { return attrValue; }
+    if (component.isSingleProperty) {
+      parsedValue = component.schema.parse(attrValue);
+      if (typeof parsedValue === 'string') { parsedValue = attrValue; }
+    } else {
+      // Use style parser as the values will be parsed once mixed in.
+      // Furthermore parsing might fail with dynamic schema's.
+      parsedValue = styleParser.parse(attrValue);
+    }
+    return parsedValue;
   }
 
   /**