Es gibt rund 300 Komponenten innerhalb der Wrapper-Komponente gerendert und es dauert zu viel Zeit zu rendern. Aber ich brauche Tausende von Komponenten, die im Wrapper-Container gerendert werden. Wie kann ich dies erreichen, ohne Performance-Probleme, während die Komponenten-Rendering Image shows the rendering time taken by 300 components which is too muchSo optimieren Sie das Rendering von Komponenten in Ember JS
Wenn Sie eine Rolle und alle Ihre Komponenten sind in der viewport zugleich nicht, können Sie die Proxy Pattern verwenden.
Es gibt ein Ember-Addon namens ember-in-viewport, das erkennt, ob sich Ihre Komponente im Ansichtsfenster befindet oder nicht. Wenn Sie es verwenden, können Sie das Proxy-Muster implementieren.
Hier ist ein sample twiddle. Wenn Sie application.hbsmy-proxy-component anstelle von my-component verwenden, würde Seitenrendering fast 3 mal schneller sein.
Diese Tipps sind ein bisschen hacky aber helfen könnten:
Sie zu faul Last die kritischsten einige der Komponenten, wie zum Beispiel wollen könnte laden und dann den Rest laden eine berechnete Eigenschaft nach einer festgelegten Timeout-Wechsel auf didRender-Ereignis (im Ruhezustand).
Zum Beispiel:
onDidRender: Ember.on('didRender', function() {
Ember.run.later(() => {
this.set('displayLazyItems', true);
}, 2000);
})
Eine andere Sache, die Sie wollen könnte, ist Inline-Code zu tun, anstatt eine neue Komponente für kleine Gegenstände zu schaffen. Rendering könnte einige Zeit dauern.
Zeichnen Sie eine Zeitleiste und stellen Sie sicher, dass die Leistung tatsächlich von Renderzeit kommt, manchmal ist tatsächlich einige Javascript-Ausführung oder das Laden, das versaut ist.
Zu guter Letzt enthält Ember 2.10 Glimmer 2, diese neue Render-Engine kann die Renderzeit um bis zu 50% optimieren. Vielleicht möchten Sie sie verwenden.
Sind diese Komponenten Datenobjekten, die Sie von Ihrem API erhalten? Müssen Sie wirklich alle beim Start gerendert werden, oder bevorzugen Sie eine Art Seitenumbruch? – Ninigi
Ja, die Komponentendatenobjekte stammen aus der API. Und ich muss sie wirklich alle auflisten und die Auswahl der Komponenten implementieren und dann die ausgewählten Elemente in der Liste per Drag & Drop sortieren. –
Hm, ich denke, es würde helfen, etwas Code zu sehen, vor allem Ihre Route vielleicht? Mach dir aber nicht zu große Hoffnungen, es könnte einfach sein, dass es unmöglich ist, es schneller zu machen, als du vielleicht schon getan hast. – Ninigi