perf(view): increase view instantiation speed 40%

1) Stop using futures when the value is already cached
2) Remove adding nodes to fake parent during view instantiation

Closes #1358

Author: mhevery

lib/core_dom/directive.dart

@@ -22,7 +22,7 @@ class NodeAttrs {
 
   NodeAttrs(this.element);
 
-  operator [](String attrName) => element.attributes[attrName];
+  operator [](String attrName) => element.getAttribute(attrName);
 
   void operator []=(String attrName, String value) {
     if (_mustacheAttrs.containsKey(attrName)) {
@@ -31,7 +31,7 @@ class NodeAttrs {
     if (value == null) {
       element.attributes.remove(attrName);
     } else {
-      element.attributes[attrName] = value;
+      element.setAttribute(attrName, value);
     }
 
     if (_observers != null && _observers.containsKey(attrName)) {
@@ -86,9 +86,18 @@ class NodeAttrs {
  * ShadowRoot is ready.
  */
 class TemplateLoader {
-  final async.Future<dom.Node> template;
+  async.Future<dom.Node> _template;
+  List<async.Future> _futures;
+  final dom.Node _shadowRoot;
 
-  TemplateLoader(this.template);
+  TemplateLoader(this._shadowRoot, this._futures);
+
+  async.Future<dom.Node> get template {
+    if (_template == null) {
+      _template = async.Future.wait(_futures).then((_) => _shadowRoot);
+    }
+    return _template;
+  }
 }
 
 class _MustacheAttr {

lib/core_dom/shadow_boundary.dart

@@ -7,8 +7,29 @@ part of angular.core.dom_internal;
 */
 abstract class ShadowBoundary {
   Set<dom.StyleElement> _insertedStyles;
+  final dom.Node root;
+  dom.StyleElement _lastStyleElement;
+
+  ShadowBoundary(this.root);
 
-  void insertStyleElements(List<dom.StyleElement> elements);
+  void insertStyleElements(List<dom.StyleElement> elements, {bool prepend: false}) {
+    if (elements.isEmpty) return;
+
+    final newStyles = _newStyles(elements);
+    final cloned = newStyles.map((el) => el.clone(true));
+
+    cloned.forEach((style) {
+      if (_lastStyleElement != null && !prepend) {
+        _lastStyleElement = root.insertBefore(style, _lastStyleElement.nextNode);
+      } else if (root.hasChildNodes()) {
+        _lastStyleElement = root.insertBefore(style, root.firstChild);
+      } else {
+        _lastStyleElement = root.append(style);
+      }
+    });
+
+    _addInsertedStyles(newStyles);
+  }
 
   Iterable<dom.StyleElement> _newStyles(Iterable<dom.StyleElement> elements) {
     if (_insertedStyles == null) return elements;
@@ -23,37 +44,15 @@ abstract class ShadowBoundary {
 
 @Injectable()
 class DefaultShadowBoundary extends ShadowBoundary {
-  void insertStyleElements(List<dom.StyleElement> elements) {
-    final newStyles = _newStyles(elements);
-    final cloned = newStyles.map((el) => el.clone(true));
-    dom.document.head.nodes.addAll(cloned);
-    _addInsertedStyles(newStyles);
-  }
+  DefaultShadowBoundary()
+      : super(dom.document.head);
+
+  DefaultShadowBoundary.custom(dom.Node node)
+      : super(node);
 }
 
 @Injectable()
 class ShadowRootBoundary extends ShadowBoundary {
-  final dom.ShadowRoot shadowRoot;
-  dom.StyleElement _lastStyleElement;
-
-  ShadowRootBoundary(this.shadowRoot);
-
-  void insertStyleElements(List<dom.StyleElement> elements) {
-    if (elements.isEmpty) return;
-
-    final newStyles = _newStyles(elements);
-    final cloned = newStyles.map((el) => el.clone(true));
-
-    cloned.forEach((style) {
-      if (_lastStyleElement != null) {
-        _lastStyleElement = shadowRoot.insertBefore(style, _lastStyleElement.nextNode);
-      } else if (shadowRoot.hasChildNodes()) {
-        _lastStyleElement = shadowRoot.insertBefore(style, shadowRoot.firstChild);
-      } else {
-        _lastStyleElement = shadowRoot.append(style);
-      }
-    });
-
-    _addInsertedStyles(newStyles);
-  }
+  ShadowRootBoundary(dom.ShadowRoot shadowRoot)
+      : super(shadowRoot);
 }

lib/core_dom/shadow_dom_component_factory.dart

@@ -11,10 +11,9 @@ abstract class BoundComponentFactory {
   List<Key> get callArgs;
   Function call(dom.Element element);
 
-  static async.Future<ViewFactory> _viewFuture(
+  static async.Future<ViewFactory> _viewFactoryFuture(
         Component component, ViewCache viewCache, DirectiveMap directives,
         TypeToUriMapper uriMapper, ResourceUrlResolver resourceResolver, Type type) {
-
     if (component.template != null) {
       // TODO(chirayu): Replace this line with
       //     var baseUri = uriMapper.uriForType(type);
@@ -77,71 +76,95 @@ class BoundShadowDomComponentFactory implements BoundComponentFactory {
   Component get _component => _ref.annotation as Component;
 
   String _tag;
-  async.Future<Iterable<dom.StyleElement>> _styleElementsFuture;
-  async.Future<ViewFactory> _viewFuture;
+  async.Future<List<dom.StyleElement>> _styleElementsFuture;
+  List<dom.StyleElement> _styleElements;
+  async.Future<ViewFactory> _shadowViewFactoryFuture;
+  ViewFactory _shadowViewFactory;
 
   BoundShadowDomComponentFactory(this._componentFactory, this._ref,
       DirectiveMap directives, this._injector) {
     _tag = _ref.annotation.selector.toLowerCase();
-    _styleElementsFuture = _componentFactory.cssLoader(_tag, _component.cssUrls, type: _ref.type);
+    _styleElementsFuture = _componentFactory.cssLoader(_tag, _component.cssUrls, type: _ref.type)
+        .then((styleElements) => _styleElements = styleElements);
 
     final viewCache = new ShimmingViewCache(_componentFactory.viewCache,
         _tag, _componentFactory.platformShim);
-    _viewFuture = BoundComponentFactory._viewFuture(_component, viewCache, directives,
-        _componentFactory.uriMapper, _componentFactory.resourceResolver, _ref.type);
+
+    _shadowViewFactoryFuture = BoundComponentFactory._viewFactoryFuture(_component,
+        viewCache, directives, _componentFactory.uriMapper,
+        _componentFactory.resourceResolver, _ref.type);
+
+    if (_shadowViewFactoryFuture != null) {
+      _shadowViewFactoryFuture.then((viewFactory) => _shadowViewFactory = viewFactory);
+    }
   }
 
   List<Key> get callArgs => _CALL_ARGS;
   static final _CALL_ARGS = [DIRECTIVE_INJECTOR_KEY, SCOPE_KEY, VIEW_KEY, NG_BASE_CSS_KEY,
       SHADOW_BOUNDARY_KEY];
+
   Function call(dom.Element element) {
     return (DirectiveInjector injector, Scope scope, View view, NgBaseCss baseCss,
         ShadowBoundary parentShadowBoundary) {
       var s = traceEnter(View_createComponent);
       try {
-        var shadowDom = element.createShadowRoot();
+        var shadowRoot = element.createShadowRoot();
 
         var shadowBoundary;
         if (_componentFactory.platformShim.shimRequired) {
           shadowBoundary = parentShadowBoundary;
         } else {
-          shadowBoundary = new ShadowRootBoundary(shadowDom);
+          shadowBoundary = new ShadowRootBoundary(shadowRoot);
         }
 
-        //_styleFuture(cssUrl, resolveUri: false)
         var shadowScope = scope.createChild(new HashMap()); // Isolate
-        ComponentDirectiveInjector shadowInjector;
-
-        final baseUrls = (_component.useNgBaseCss) ? baseCss.urls : [];
-        final baseUrlsFuture = _componentFactory.cssLoader(_tag, baseUrls);
-        final cssFuture = mergeFutures(baseUrlsFuture, _styleElementsFuture);
-
-        async.Future<dom.Node> initShadowDom(_) {
-          if (_viewFuture == null) return new async.Future.value(shadowDom);
-          return _viewFuture.then((ViewFactory viewFactory) {
-            if (shadowScope.isAttached) {
-              shadowDom.nodes.addAll(
-                  viewFactory.call(shadowInjector.scope, shadowInjector).nodes);
-            }
-            return shadowDom;
-          });
-        }
-
-        TemplateLoader templateLoader = new TemplateLoader(
-            cssFuture.then(shadowBoundary.insertStyleElements).then(initShadowDom));
+        List<async.Future> futures = <async.Future>[];
+        TemplateLoader templateLoader = new TemplateLoader(shadowRoot, futures);
 
         var probe;
         var eventHandler = new ShadowRootEventHandler(
-            shadowDom, injector.getByKey(EXPANDO_KEY), injector.getByKey(EXCEPTION_HANDLER_KEY));
-        shadowInjector = new ComponentDirectiveInjector(injector, _injector, eventHandler, shadowScope,
-            templateLoader, shadowDom, null, view, shadowBoundary);
+            shadowRoot, injector.getByKey(EXPANDO_KEY), injector.getByKey(EXCEPTION_HANDLER_KEY));
+        final shadowInjector = new ComponentDirectiveInjector(injector, _injector, eventHandler, shadowScope,
+            templateLoader, shadowRoot, null, view, shadowBoundary);
+        shadowInjector.bindByKey(_ref.typeKey, _ref.factory, _ref.paramKeys, _ref.annotation.visibility);
 
+        if (_component.useNgBaseCss && baseCss.urls.isNotEmpty) {
+          if (baseCss.styles == null) {
+            final f = _componentFactory.cssLoader(_tag, baseCss.urls).then((cssList) {
+              baseCss.styles = cssList;
+              shadowBoundary.insertStyleElements(cssList, prepend: true);
+            });
+            futures.add(f);
+          } else {
+            shadowBoundary.insertStyleElements(baseCss.styles, prepend: true);
+          }
+        }
 
-        shadowInjector.bindByKey(_ref.typeKey, _ref.factory, _ref.paramKeys, _ref.annotation.visibility);
+        if (_styleElementsFuture != null) {
+          if (_styleElements == null) {
+            final f = _styleElementsFuture.then(shadowBoundary.insertStyleElements);
+            futures.add(f);
+          } else {
+            shadowBoundary.insertStyleElements(_styleElements);
+          }
+        }
+
+        if (_shadowViewFactoryFuture != null) {
+          if (_shadowViewFactory == null) {
+            final f = _shadowViewFactoryFuture.then((ViewFactory viewFactory) =>
+                _insertView(viewFactory, shadowRoot, shadowScope, shadowInjector));
+            futures.add(f);
+          } else {
+            final f = new Future.microtask(() {
+              _insertView(_shadowViewFactory, shadowRoot, shadowScope, shadowInjector);
+            });
+            futures.add(f);
+          }
+        }
 
         if (_componentFactory.config.elementProbeEnabled) {
-          probe = _componentFactory.expando[shadowDom] = shadowInjector.elementProbe;
-          shadowScope.on(ScopeEvent.DESTROY).listen((ScopeEvent) => _componentFactory.expando[shadowDom] = null);
+          ElementProbe probe = _componentFactory.expando[shadowRoot] = shadowInjector.elementProbe;
+          shadowScope.on(ScopeEvent.DESTROY).listen((ScopeEvent) => _componentFactory.expando[shadowRoot] = null);
         }
 
         var controller = shadowInjector.getByKey(_ref.typeKey);
@@ -155,6 +178,16 @@ class BoundShadowDomComponentFactory implements BoundComponentFactory {
       }
     };
   }
+
+  dom.Node _insertView(ViewFactory viewFactory,
+              dom.ShadowRoot shadowRoot,
+              Scope shadowScope,
+              ComponentDirectiveInjector shadowInjector) {
+    if (shadowScope.isAttached) {
+      shadowRoot.nodes.addAll(
+          viewFactory.call(shadowInjector.scope, shadowInjector).nodes);
+    }
+  }
 }
 
 @Injectable()