PERF: Render logo significantly faster

This commit is contained in:
Robin Ward 2016-03-21 15:14:16 -04:00
parent d513aeb8b0
commit d1b9a9370a
4 changed files with 52 additions and 51 deletions

View File

@ -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() {
// For overriding by customizations
return '/';
}.property(),
init() {
this._super();
this.showMobileLogo = this.site.mobileView && !Ember.isEmpty(this.siteSettings.mobile_logo_url);
this.linkUrl = this.get('targetUrl') || '/';
},
linkUrl: function() {
return Discourse.getURL(this.get('targetUrl'));
}.property('targetUrl'),
@observes('minimized')
_updateLogo() {
// On mobile we don't minimize the logo
if (!this.site.mobileView) {
this.rerender();
}
},
showSmallLogo: function() {
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) {
click(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>');
}
});

View File

@ -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);
}
}
}

View File

@ -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>

View File

@ -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;
},