PERF: Render logo significantly faster

app/assets/javascripts/discourse/components/home-logo.js.es6

@@ -1,32 +1,28 @@
 import DiscourseURL from 'discourse/lib/url';
-import { setting } from 'discourse/lib/computed';
+import { iconHTML } from 'discourse/helpers/fa-icon';
+import { observes } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
-  classNames: ["title"],
+  widget: 'home-logo',
+  showMobileLogo: null,
+  linkUrl: null,
+  classNames: ['title'],
 
-  targetUrl: function() {
+  init() {
-    // For overriding by customizations
+    this._super();
-    return '/';
+    this.showMobileLogo = this.site.mobileView && !Ember.isEmpty(this.siteSettings.mobile_logo_url);
-  }.property(),
+    this.linkUrl = this.get('targetUrl') || '/';
+  },
 
-  linkUrl: function() {
+  @observes('minimized')
-    return Discourse.getURL(this.get('targetUrl'));
+  _updateLogo() {
-  }.property('targetUrl'),
+    // On mobile we don't minimize the logo
+    if (!this.site.mobileView) {
+      this.rerender();
+    }
+  },
 
-  showSmallLogo: function() {
+  click(e) {
-    return !this.site.mobileView && this.get("minimized");
-  }.property("minimized"),
-
-  showMobileLogo: function() {
-    return this.site.mobileView && !Ember.isBlank(this.get('mobileBigLogoUrl'));
-  }.property(),
-
-  smallLogoUrl: setting('logo_small_url'),
-  bigLogoUrl: setting('logo_url'),
-  mobileBigLogoUrl: setting('mobile_logo_url'),
-  title: setting('title'),
-
-  click: function(e) {
     // if they want to open in a new tab, let it so
     if (e.shiftKey || e.metaKey || e.ctrlKey || e.which === 2) { return true; }
 
@@ -34,5 +30,29 @@ export default Ember.Component.extend({
 
     DiscourseURL.routeTo(this.get('targetUrl'));
     return false;
+  },
+
+  render(buffer) {
+    const { siteSettings } = this;
+    const logoUrl = siteSettings.logo_url || '';
+    const title = siteSettings.title;
+
+    buffer.push(`<a href="${this.linkUrl}" data-auto-route="true">`);
+    if (!this.site.mobileView && this.get('minimized')) {
+      const logoSmallUrl = siteSettings.logo_small_url || '';
+      if (logoSmallUrl.length) {
+        buffer.push(`<img id='site-logo' class="logo-small" src="${logoSmallUrl}" width="33" height="33" alt="${title}">`);
+      } else {
+        buffer.push(iconHTML('home'));
       }
+    } else if (this.showMobileLogo) {
+      buffer.push(`<img id="site-logo" class="logo-big" src="${siteSettings.mobile_logo_url}" alt="${title}">`);
+    } else if (logoUrl.length) {
+      buffer.push(`<img id="site-logo" class="logo-big" src="${logoUrl}" alt="${title}">`);
+    } else {
+      buffer.push(`<h2 id="site-text-logo" class="text-logo">${title}</h2>`);
+    }
+    buffer.push('</a>');
+  }
+
 });

app/assets/javascripts/discourse/components/mount-widget.js.es6

@@ -56,6 +56,8 @@ export default Ember.Component.extend({
   rerenderWidget() {
     Ember.run.cancel(this._timeout);
     if (this._rootNode) {
+      const t0 = new Date().getTime();
+
       const opts = { model: this.get('model') };
       const newTree = new this._widgetClass(this.get('args'), this.container, opts);
 
@@ -86,6 +88,10 @@ export default Ember.Component.extend({
       }
 
       renderedKey('*');
+      if (this.profileWidget) {
+        console.log(new Date().getTime() - t0);
+      }
+
     }
   }
 

app/assets/javascripts/discourse/templates/components/home-logo.hbs

@@ -1,19 +0,0 @@
-<a href="{{unbound linkUrl}}" data-auto-route="true">
-  {{#if showSmallLogo}}
-    {{#if smallLogoUrl}}
-      <img class="logo-small" src="{{unbound smallLogoUrl}}" width="33" height="33" alt="{{unbound title}}">
-    {{else}}
-      <i class="fa fa-home"></i>
-    {{/if}}
-  {{else}}
-    {{#if showMobileLogo}}
-      <img id="site-logo" class="logo-big" src="{{unbound mobileBigLogoUrl}}" alt="{{unbound title}}">
-    {{else}}
-      {{#if bigLogoUrl}}
-        <img id="site-logo" class="logo-big" src="{{unbound bigLogoUrl}}" alt="{{unbound title}}">
-      {{else}}
-        <h2 id="site-text-logo" class="text-logo">{{unbound title}}</h2>
-      {{/if}}
-    {{/if}}
-  {{/if}}
-</a>

test/javascripts/components/home-logo-test.js.es6

@@ -17,6 +17,7 @@ componentTest('basics', {
   },
 
   test(assert) {
+    assert.ok(this.$('.title').length === 1);
     assert.ok(this.$('a[data-auto-route]').length === 1);
 
     assert.ok(this.$('img#site-logo.logo-big').length === 1);
@@ -55,29 +56,22 @@ componentTest('no logo', {
 });
 
 componentTest('mobile logo', {
-  template: "{{home-logo minimized=minimized}}",
+  template: "{{home-logo}}",
   setup() {
     this.siteSettings.mobile_logo_url = mobileLogo;
     this.siteSettings.logo_small_url= smallLogo;
-    this.set('minimized', true);
     this.site.mobileView = true;
   },
 
   test(assert) {
     assert.ok(this.$('img#site-logo.logo-big').length === 1);
     assert.equal(this.$('#site-logo').attr('src'), mobileLogo);
-
-    this.set('minimized', true);
-    andThen(() => {
-      assert.equal(this.$('#site-logo').attr('src'), mobileLogo);
-    });
   }
 });
 
 componentTest('mobile without logo', {
-  template: "{{home-logo minimized=minimized}}",
+  template: "{{home-logo}}",
   setup() {
-    this.set('minimized', true);
     this.siteSettings.logo_url = bigLogo;
     this.site.mobileView = true;
   },