Häufige Neuzeichnungen und Reflows: Warum sollten sie vermieden werden?

Neu zeichnen und umfließen: Warum sollten Sie vermeiden, dass es zu oft passiert?

In der Frontend-Entwicklung hören wir oft zwei Konzepte: Redraw und Reflow. Sie beziehen sich auf die beiden Schlüsselprozesse beim Rendern der Seite durch den Browser. Unter „Neuzeichnen“ versteht man den Vorgang, bei dem sich das Erscheinungsbild eines Elements ändert und die Anzeige aktualisiert werden muss. Unter „Neuzeichnen“ versteht man den Vorgang, bei dem sich die geometrischen Eigenschaften des Elements ändern und das Layout neu berechnet und neu gezeichnet werden muss.

Neuzeichnen und Umfließen sind sehr leistungsintensive Vorgänge, die zu einer Verschlechterung der Seitenleistung und sogar zum Einfrieren und langsamen Laden der Seite führen. Daher sollten wir unser Bestes geben, um häufiges Neuzeichnen und Reflow während der Entwicklung zu vermeiden. Schauen wir uns als Nächstes einige häufige Situationen an, die zu Neuzeichnungen und Reflows führen, und wie man sie vermeidet.

1. Vermeiden Sie häufige Änderungen an den Stilen von DOM-Elementen.

Wenn wir die Stile von DOM-Elementen häufig ändern, löst der Browser häufig Neuzeichnungen und Umflüsse aus. Daher ist es beim Ändern des Stils von DOM-Elementen am besten, die Änderungsvorgänge zusammenzuführen und den Stilwechsel durch Ändern des Klassennamens des Elements zu implementieren, wodurch die Anzahl der Neuzeichnungen und Reflows verringert werden kann.

// 不推荐写法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐写法
var element = document.getElementById('example');
element.classList.add('active');

2. Verwenden Sie das Transformationsattribut anstelle der Top-/Links-Attribute

Wenn Sie die Top-/Links-Attribute verwenden, um die Position eines Elements zu ändern, werden Neuzeichnen und Umfließen ausgelöst. Die Verwendung des Transformationsattributs (z. B. translatorX/translateY) zum Ändern der Position des Elements löst keinen Reflow aus, sondern nur ein Neuzeichnen. Daher ist es am besten, das Transformationsattribut zu verwenden, wenn Sie die Position eines Elements ändern müssen.

// 不推荐写法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';

// 推荐写法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';

3. Vermeiden Sie das häufige Lesen der Größenattribute von Elementen.

Jedes Mal, wenn Sie die Größenattribute eines Elements lesen (z. B. offsetWidth, offsetHeight), wird ein Reflow ausgelöst, und das Lesen der Werte dieser Attribute ist relativ leistungsintensiver Betrieb. Daher sollten wir versuchen, das häufige Auslesen der Größeneigenschaften von Elementen zu vermeiden. Wir können diese Werte zwischenspeichern oder bei Bedarf alle auf einmal abrufen.

// 不推荐写法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;

// 推荐写法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;

4. Verwenden Sie documentFragment, um das Einfügen mehrerer Knoten zu optimieren.

Das Einfügen von Knoten ist ein Vorgang, der einen Reflow auslöst. Wenn Sie Knoten mehrmals einfügen müssen, verwenden Sie am besten documentFragment zum Optimieren, fügen Sie dem documentFragment mehrere Knoten hinzu und Dann machen Sie es noch einmal. Dauerhaft in das DOM eingefügt.

// 不推荐写法
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  document.body.appendChild(element);
}

// 推荐写法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

Durch die Optimierung der oben genannten Aspekte können wir die Anzahl der Neuzeichnungen und Reflows effektiv reduzieren und die Leistung und Benutzererfahrung der Seite verbessern. In der tatsächlichen Entwicklung können wir auch einige Tools und Bibliotheken verwenden, die uns beim Erkennen und Optimieren von Redraw- und Reflow-Problemen helfen, z. B. Chrome DevTools und Leistungsanalysetools.

Zusammenfassend lässt sich sagen, dass Neuzeichnen und Umfließen wichtige Faktoren sind, die sich auf die Seitenleistung auswirken und bei der Frontend-Entwicklung so häufig wie möglich vermieden werden sollten. Durch das Zusammenführen von Stiländerungen, die Verwendung von Transformationsattributen, das Vermeiden des häufigen Lesens von Größenattributen und die Verwendung von documentFragment zur Optimierung mehrerer Knoteneinfügungen können wir die Seitenleistung effektiv optimieren und die Benutzererfahrung verbessern.

Das obige ist der detaillierte Inhalt vonHäufige Neuzeichnungen und Reflows: Warum sollten sie vermieden werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!