Ausführliche Erläuterung der Datenbindungs- und DOM-Reflow-Beispiele

Datenbindungsmethode:

1. Verwenden Sie die Methode zum dynamischen Erstellen von Elementknoten und deren Anhängen an die Seite, um die Datenbindung zu implementieren (fügen Sie das dynamisch hinzugefügte Li hinzu ul)

var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            oUl.appendChild(oLi)
        }

　Vorteil: Hängen Sie den Inhalt, der dynamisch an die Seite gebunden werden muss, einzeln an Die ursprünglichen Elemente haben keine Auswirkungen

Nachteile: Immer wenn wir ein Li erstellen, fügen wir es der Seite hinzu, was einen DOM-Reflow auslöst. Schließlich werden zu viele Reflows ausgelöst, was sich auf unsere Leistung auswirkt.

2. String-Splicing-Methode: Führen Sie zunächst eine Schleife der Daten durch, die gebunden werden müssen, und verbinden Sie dann die Tags, die dynamisch in Form von Strings miteinander verbunden werden müssen. (String-Splicing ist die am häufigsten verwendete Methode zum Binden von Daten in unserer zukünftigen Arbeit)

 str = ""( i = 0;i<ary.length;i++ cur =+="<li>"+="<span>"+(i+1)+"</span>"+=+="</li>"+= str;//oUl.innerHTML(把之前的li以字符串的方式获取到)+str;拼接完成的整体还是字符串
　　　　 最后再把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签

Zu ul hinzugefügt, Die durch das ursprüngliche Li gebundenen Ereignisse verschwinden

　Vorteil: Den Inhalt im Voraus zusammenfügen und am Ende vereinheitlichen. Zur Seite hinzufügen, wodurch nur ein Reflow ausgelöst wird

Vertiefte Kenntnisse von DOM in JS: Reflow sollte minimiert werden

Reflow (Neuanordnungs-Reflow): Wenn die Die HTML-Struktur auf der Seite ändert sich (Elemente werden hinzugefügt, gelöscht und die Position ändert sich). Der Browser muss die neueste DOM-Struktur neu berechnen und die aktuelle Seite neu kompilieren

Neu zeichnen: Ein Teil des Stils eines Elements hat sich geändert (Hintergrundfarbe), der Browser muss nur neu rendern. Das aktuelle Element kann

3. Dokumentfragmente:

var frg = document.createDocumentFragment();

Ein Dokumentfragment entspricht der temporären Erstellung eines Containers

　

　

for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            frg.appendChild(oLi)
        }
        oUl.appendChild(frg);
        frg = null;

Es gibt nur einen Reflow und dieser hat keine Auswirkungen auf das Original

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Datenbindungs- und DOM-Reflow-Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!