So verbessern Sie die Renderleistung bei Verwendung von $ .html()

Question

Ich arbeite an einem Backbone demo app, das eine Liste von Tweets zeigt. Als ich all die „Tweets“ mit unterschiedlichen Daten bin ersetzt lösche ich die Liste mit $.html()

render: function() { 
    $("#item-table").html(''); 
    this.collection.each(this.addItem); 
} 

ich mich gefragt, ob jemand mir einen Hinweis mit geben könnte, was kann ich diese ersetzen $.html() für eine bessere Leistung, denn durch $.html() mit Ich verursache Reflows und die Layout-Prozesszeiten sind schlecht.

Es gibt zwei andere Orte in dem Code, wo ich $.html() verwende und es wäre wirklich toll, wenn jemand mir Ratschläge geben könnte, wie man diese auch ändert, wenn diese anderen Orte sogar möglich sind.

Answer 1

Create ein neues DocumentFragment, um alle Elemente vorzurendern, dann aktualisieren Sie das DOM einmal.

Auch zugunsten this.$(...) über den globalen jQuery-Selektor $(...).

this.$ ist ein Proxy zu this.$el.find(...), die effizienter und weniger anfällig ist, etwas außerhalb der Ansicht zu wählen.

Die Verwendung der Kernfunktion von jQuery ($()) in einer Ansicht kann fehlschlagen, wenn die Ansicht noch nicht gerendert wurde. Es ist also besser, immer durch this.$el zu manipulieren, damit Sie Änderungen vornehmen können, bevor die Ansicht tatsächlich in das DOM eingefügt wird.

Behalten Sie alle Unteransichten, die in einem Array erstellt wurden, um sie später sauber zu entfernen.

initialize: function() { 
    this.childViews = []; 
}, 
render: function() { 
    // cache the list jQuery object 
    this.$list = this.$("#item-table"); 

    // Make sure to destroy every child view explicitely 
    // to avoid memory leaks 
    this.cleanup(); 

    this.renderCollection(); 
    return this; 
}, 

Die eigentliche Optimierung beginnt hier mit einem temporären Container.

renderCollection: function() { 
    var container = document.createDocumentFragment(); 

    this.collection.each(function(model) { 
     // this appends to a in memory document 
     container.appendChild(this.renderItem(model, false).el); 
    }, this); 

    // Update the DOM only once every child view was rendered. 
    this.$list.html(container); 
    return this; 
}, 

Unsere renderItem Funktion kann weiterhin verwendet werden, um ein einzelnes Element Ansicht zu machen und es sofort in den DOM setzen. Aber es bietet auch eine Option, um die DOM-Manipulation zu verschieben, und es gibt nur die Ansicht zurück.

renderItem: function(model, render) { 
    var view = new Item({ model: model }); 

    this.childViews.push(view); 
    view.render(); 
    if (render !== false) this.$list.append(view.el); 
    return view; 
}, 

Um Speicherlecks mit baumelnden Hörer zu vermeiden, ist es wichtig, remove auf jeder Ansicht aufrufen, bevor über sie zu vergessen.

Ich nutze eine zusätzliche Optimierung, indem ich den eigentlichen Anruf auf remove verschiebe, damit wir keine Zeit verschwenden, während der Benutzer wartet.