Dieses Mal werde ich Ihnen die JavaScript-Optimierung von DOM vorstellen und welche Vorsichtsmaßnahmen für die Optimierung von DOM in JavaScript gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.
Die Optimierung von DOM beginnt mit dem Neuzeichnen und Neuanordnen, vor langer, langer Zeit...
1.2 Browser-Rendering-Seite
Wenn Sie zu einem Vorstellungsgespräch gehen, wird Ihnen immer eine Frage gestellt, nämlich „Geben Sie eine Zeile ein.“ der URL in den Browser. „Was ist passiert?“ betrifft die Antwort auf diese Frage nicht nur Netzwerkkenntnisse, sondern auch die Frage der Browserdarstellung der Seite. Wenn unser Browser die Antwort vom Server empfängt, beginnt er mit dem Rendern. Wenn er auf CSS trifft, berechnet er asynchron den DOM-Baum gebildet, der asynchron
Der berechnete Stil (Style-Box) wird mit dem DOM-Baum kombiniert, um einen Render-Baum zu bilden, der dann vom Browser auf der Seite gezeichnet wird.1.3 Gründe für Neuzeichnen und NeufließenFaktoren, die Neuzeichnen verursachen:
Sichtbarkeit, der Umrisslinie, der Hintergrundfarbe und anderer Stilattribute hat keine Auswirkungen auf die Elementgröße, Position usw. Der Browser wird basierend auf den neuen Eigenschaften des Elements neu gezeichnet.
Textänderungen oder Bildgrößenänderungen
,
, , offsetTop, offsetLeft, offsetWidth, offsetHeight. scrollTop
Änderungen in der Browserfenstergröße
Änderungen in der Fenstergröße wirken sich auf Änderungen in der Größe von Elementen innerhalb der gesamten Webseite aus. Das heißt, DOM-Elemente Die Sammlungseigenschaften ändern sich, was zu einer Neuanordnung führt.
Das Erscheinen der Bildlaufleiste (löst den Reflow der gesamten Seite aus)
Kurz gesagt, Sie müssen es wissen dass js Single-Threaded ist, blockiert das Neuzeichnen und Neufließen die Leistung der Webseite, wenn eine Seite mehrmals neu gezeichnet und neu gegliedert wird, z. Die Seite bleibt möglicherweise immer mehr hängen, daher müssen wir das Neuzeichnen und Umfließen so weit wie möglich reduzieren. Dann basiert auch unsere Optimierung von DOM auf diesem Ausgangspunkt.
Die Anzahl der Zugriffe zu reduzieren bedeutet natürlich, Elemente zwischenzuspeichern, aber achten Sie darauf >
Dadurch wird ele nicht zwischengespeichert. Jedes Mal, wenn Sie ele aufrufen, entspricht dies dem Besuch des Knotens mit der ID von ele.
var ele = document.getElementById('ele');var foods = document.getElementsByClassName('food');// 优化前var lis = document.getElementsByTagName('li');for(var i = 0; i < lis.length; i++) { // do something... }// 优化后，将length的值缓存起来就不会每次都去查询length的值var lis = document.getElementsByTagName('li');for(var i = 0, len = lis.length; i < len; i++) { // do something... }2.1.2 Ändern des Selektors
// 假设一开始有2个livar lis = document.getElementsByTagName('li'); // 动态集合var ul = document.getElementsByTagName('ul')[0];
for(var i = 0; i < 3; i++) {
console.log(lis.length); var newLi = document.createElement('li');
ul.appendChild(newLi);
}// 输出结果：2， 3， 4var lis = document.querySelector('li'); // 静态集合 var ul = document.getElementsByTagName('ul')[0];
for(var i = 0; i < 3; i++) {
console.log(lis.length); var newLi = document.createElement('li');
ul.appendChild(newLi);
}// 输出结果：2， 2， 22.1.3 Vermeiden Sie unnötige Schleifen
// 优化前
for(var i = 0; i < 10; i++) {
document.getElementById('ele').innerHTML += 'a';}
// 优化后
var str = '';
for(var i = 0; i < 10; i++) {
str += 'a';
}
document.getElementById('ele').innerHTML = str;2.1.4 Ereignisdelegierter
// 事件委托前var lis = document.getElementsByTagName('li');for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(this.innerHTML);
};
}
// 事件委托后var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(event) {
console.log(event.target.innerHTML);
};Auf diese Weise können wir mehrere Stile gleichzeitig bedienen
p = document.getElementById('p1'/* css
.change {
width: 220px;
height: 300px;
}*/document.getElementById('p').className = 'change';Die erste Methode, die mir in den Sinn kommt, besteht darin, die Sammlung zu durchlaufen und jedem Knoten einen Klassennamen hinzuzufügen. Denken Sie noch einmal darüber nach: Bedeutet das nicht, dass Sie den DOM-Knoten mehrmals besucht haben? Denken Sie an den Unterschied zwischen dem DOM-Baum und dem am Anfang des Artikels erwähnten Rendering-Baum. Wenn das Anzeigeattribut eines Knotens „none“ ist, ist dieser Knoten nicht im Rendering-Baum vorhanden, was bedeutet, dass die Operation dieses Knotens nicht möglich ist wirkt sich nicht auf den Renderbaum aus und verursacht kein Neuzeichnen und Neuanordnen. Basierend auf dieser Idee können wir eine Optimierung erreichen:
Zeigt das übergeordnete Element der zu ändernden Sammlung an: keines;
之后遍历修改集合节点
将集合父元素display: block;
// 假设增加的class为.changevar lis = document.getElementsByTagName('li');
var ul = document.getElementsByTagName('ul')[0];
ul.style.display = 'none';for(var i = 0; i < lis.length; i++) {
lis[i].className = 'change';
}
ul.style.display = 'block';减少访问dom的次数
缓存节点属性值
选择器的使用
避免不必要的循环
事件委托
减少重绘与重排
使用className改变多个样式
使父元素脱离文档流再恢复
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonJavaScript-optimiertes DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
