perf(compiler): 31%. Cache CSS in Style elements.

In a benchmark, I saw a 31% speedup while creating components which include
unminified Bootstrap (125K) as a cssUrl.

Author: jbdeboer

lib/core_dom/shadow_dom_component_factory.dart

@@ -30,6 +30,8 @@ class ShadowDomComponentFactory implements ComponentFactory {
 
   ShadowDomComponentFactory(this._expando);
 
+  final Map<String, async.Future<dom.StyleElement>> _styleElementCache = {};
+
   FactoryFn call(dom.Node node, DirectiveRef ref) {
     return (Injector injector) {
         var component = ref.annotation as Component;
@@ -41,7 +43,7 @@ class ShadowDomComponentFactory implements ComponentFactory {
         NgBaseCss baseCss = injector.get(NgBaseCss);
         // This is a bit of a hack since we are returning different type then we are.
         var componentFactory = new _ComponentFactory(node, ref.type, component,
-            injector.get(dom.NodeTreeSanitizer), _expando, baseCss);
+            injector.get(dom.NodeTreeSanitizer), _expando, baseCss, _styleElementCache);
         var controller = componentFactory.call(injector, scope, viewCache, http, templateCache,
             directives);
 
@@ -65,14 +67,15 @@ class _ComponentFactory implements Function {
   final dom.NodeTreeSanitizer treeSanitizer;
   final Expando _expando;
   final NgBaseCss _baseCss;
+  final Map<String, async.Future<dom.StyleElement>> _styleElementCache;
 
   dom.ShadowRoot shadowDom;
   Scope shadowScope;
   Injector shadowInjector;
   var controller;
 
   _ComponentFactory(this.element, this.type, this.component, this.treeSanitizer,
-                    this._expando, this._baseCss);
+                    this._expando, this._baseCss, this._styleElementCache);
 
   dynamic call(Injector injector, Scope scope,
                ViewCache viewCache, Http http, TemplateCache templateCache,
@@ -87,28 +90,24 @@ class _ComponentFactory implements Function {
     // styles all over the page. We shouldn't be doing browsers work,
     // so change back to using @import once Chrome bug is fixed or a
     // better work around is found.
-        List<async.Future<String>> cssFutures = new List();
+    Iterable<async.Future<dom.StyleElement>> cssFutures;
     var cssUrls = []..addAll(_baseCss.urls)..addAll(component.cssUrls);
     if (cssUrls.isNotEmpty) {
-      cssUrls.forEach((css) => cssFutures.add(http
-      .get(css, cache: templateCache).then(
-              (resp) => resp.responseText,
-              onError: (e) => '/*\n$e\n*/\n')
-      ));
+      cssFutures = cssUrls.map((cssUrl) => _styleElementCache.putIfAbsent(cssUrl, () =>
+        http.get(cssUrl, cache: templateCache)
+          .then((resp) => resp.responseText,
+            onError: (e) => '/*\n$e\n*/\n')
+          .then((styleContent) => new dom.StyleElement()..appendText(styleContent))
+      )).toList();
     } else {
-      cssFutures.add(new async.Future.value(null));
+      cssFutures = [new async.Future.value(null)];
     }
     var viewFuture = ComponentFactory._viewFuture(component, viewCache, directives);
     TemplateLoader templateLoader = new TemplateLoader(
         async.Future.wait(cssFutures).then((Iterable<String> cssList) {
-          if (cssList != null) {
-            shadowDom.setInnerHtml(
-                cssList
-                .where((css) => css != null)
-                .map((css) => '<style>$css</style>')
-                .join(''),
-                treeSanitizer: treeSanitizer);
-          }
+          cssList
+              .where((styleElement) => styleElement != null)
+              .forEach((styleElement) => shadowDom.append(styleElement.clone(true)));
           if (viewFuture != null) {
             return viewFuture.then((ViewFactory viewFactory) {
               return (!shadowScope.isAttached) ?

test/core/templateurl_spec.dart

@@ -42,6 +42,7 @@ class PrefixedUrlRewriter extends UrlRewriter {
 void main() {
   describe('template url', () {
     afterEach((MockHttpBackend backend) {
+      backend.verifyNoOutstandingExpectation();
       backend.verifyNoOutstandingRequest();
     });
 
@@ -242,5 +243,47 @@ void main() {
         expect(log.result()).toEqual('LOG; SIMPLE');
       })));
     });
+
+    describe('style cache', () {
+      beforeEachModule((Module module) {
+        module
+            ..type(HtmlAndCssComponent)
+            ..value(TemplateCache, new TemplateCache(capacity: 0));
+      });
+
+      it('should load css from the style cache for the second component', async(inject(
+          (Http http, Compiler compile, MockHttpBackend backend,
+           DirectiveMap directives, Injector injector) {
+        backend
+          ..expectGET('simple.css').respond(200, '.hello{}')
+          ..expectGET('simple.html').respond(200, '<div log="SIMPLE">Simple!</div>');
+
+        var element = e('<div><html-and-css>ignore</html-and-css><div>');
+        compile([element], directives)(injector, [element]);
+
+        microLeap();
+        backend.flush();
+        microLeap();
+
+        expect(element.children[0].shadowRoot).toHaveHtml(
+            '<style>.hello{}</style><div log="SIMPLE">Simple!</div>'
+        );
+
+        // Since the template cache is disabled, we expect a 'simple.html' call.
+        backend
+          ..expectGET('simple.html').respond(200, '<div log="SIMPLE">Simple!</div>');
+
+        var element2 = e('<div><html-and-css>ignore</html-and-css><div>');
+        compile([element2], directives)(injector, [element2]);
+
+        microLeap();
+        backend.flush();
+        microLeap();
+
+        expect(element2.children[0].shadowRoot).toHaveHtml(
+            '<style>.hello{}</style><div log="SIMPLE">Simple!</div>'
+        );
+      })));
+    });
   });
 }