EmberJS: wie kann das Rendern des DOM aufgeteilt werden?

Question

Ich versuche, das Rendern in meiner App zu optimieren. Ich habe die folgende Schleife:

stuff.forEach(function(content){
    ...
    content.doUpdates(); // Generates a bunch of DOM updates
})

Wenn stuff nur 2 oder 3 Elemente hat, ist alles in Ordnung, aber wenn es 10 oder mehr hat, beginnt das Rendern, den Browser zu blockieren - und das ist normal, da versucht wird, alle Updates auf einmal durchzuführen.

Also würde ich gerne das Rendering aufteilen. Mein erster Gedanke war, jedes doUpdates in ein Ember.run.next zu setzen. http://emberjs.com/api/classes/Ember.run.html#method_next (Es macht mir nichts aus, wenn jedes Inhaltsobjekt separat gerendert wird). Aber "multiple operations scheduled with Ember.run.next will coalesce into the same later run loop".

Gibt es eine empfohlene Möglichkeit, das zu tun?

Answer 1

Ember.run.next ist wirklich nur eine schicke setInterval. Es gibt nicht viel Nutzen, es sei denn, Sie suchen nach einer schnellen Lösung.

Ember.run.scheduleOnce ist eine bessere Alternative. Sie können ihr den spezifischen Lifecycle-Runloop wie nachRender geben, abhängig davon, wann Sie es innerhalb des Runloops ausführen möchten.

Ein Ansatz, den ich nützlich gefunden habe, ist sicherzustellen, dass die gebundenen Eigenschaften auf phasenweise aktualisiert werden. Dies bietet einige einfache Möglichkeiten in Bezug auf die Leistung, da Sie Ember die meiste Arbeit erledigen lassen.

Ein weiterer einfacher Weg, um Leistung zu steigern, besteht darin, sich nicht an Dinge zu binden, die sich nicht ändern. Oder verwenden Sie oneWayBinding, wenn möglich.