Tiefes Verständnis für JavaScript-Speicher- und Leistungsprobleme

So starten Sie schnell mit VUE3.0: Geben Sie lernbezogene

Empfehlungen ein: JavaScript-Tutorial

1. Was ist JavaScript-Speicher und -Leistung? Da

Ereignishandler in modernen Webanwendungen interagieren können, verwenden viele Entwickler fälschlicherweise eine große Anzahl davon auf der Seite. In JavaScript steht die Anzahl der Event-Handler auf einer Seite in direktem Zusammenhang mit der Gesamtleistung der Seite. Dafür gibt es viele Gründe: ① Jede Funktion ist ein Objekt und belegt Speicherplatz. Je mehr Objekte vorhanden sind, desto schlechter ist die Leistung. ② Die Anzahl der DOM-Besuche, die für einen bestimmten Ereignishandler erforderlich sind, führt zunächst zu einer Verzögerung im gesamten Seiteninteraktion.

2. Sprechen Sie über die Leistungsprobleme von innerHTML?

1. Verwenden Sie das negative Lehrmaterial von innerHTML

für (Wert von Werten) {
	ul.innerHTML += '<li>${value}</li>';}

Dieser Code ist ineffizient, da innerHTML einmal für jede Iteration festgelegt werden muss. Darüber hinaus muss innerHTML zuerst für jede Schleife gelesen werden Das heißt, auf innerHTML muss zweimal in einer Schleife zugegriffen werden.

2. So lösen Sie

let itemsHtml = "";for(let value of value){
	itemsHtml += '<li>${value}</li>';}ul.innerHTML = itemsHtml;

Nach dieser Änderung wird nur innerHTML ein Wert zugewiesen :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

3. Wie kann das Problem zu vieler Schaltflächen gelöst werden?

Die Lösung für zu viele Event-Handler ist die Verwendung der Event-Delegation. Die Ereignisdelegation nutzt das Ereignis-Bubbling, sodass Sie nur einen Ereignishandler zum Verwalten eines Ereignistyps verwenden können. Beispielsweise sprudelt das Klickereignis zum Dokument. Dies bedeutet, dass Sie einen Onclick-Ereignishandler für die gesamte Seite angeben können, anstatt für jedes anklickbare Element einen separaten Ereignishandler anzugeben.

<ul id="myGirls">
	<li id="girl1">Bibi Dong</li>
	<li id="girl2">Yun Yun</li>
	<li id="girl3">Medusa</li></ul>

Dies enthält drei Listenelemente, die beim Klicken eine bestimmte Aktion ausführen sollen. Der übliche Weg besteht darin, drei Ereignishandler anzugeben:

let item1 = document.getElementById("girl1 ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
	console.log("Ich bin Bibi Dong!");})item2.addEventListener("click",(event) => {
	console.log("Ich bin Yunyun!");})item3.addEventListener("click",(event) => {
	console.log("Ich bin Medusa!");})

Es gibt zu viele identische Codes und der Code ist zu hässlich.
Fügen Sie mithilfe der Ereignisdelegierung einfach einen Ereignishandler zum gemeinsamen Vorfahrenknoten mehrerer Elemente hinzu, und Sie können die Hässlichkeit lösen!

let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
	let target = event.target;
	switch(target.id){
		Fall „girl1“:
			console.log("Ich bin Bibi Dong!");
			brechen;
		Fall „girl2“:
			console.log("Ich bin Yunyun!");
			brechen;
		Fall „girl3“:
			console.log("Ich bin Medusa!");
			brechen;
	}})

4. Was sind die Vorteile der Event-Delegation?

• Das Dokumentobjekt ist jederzeit verfügbar, und Sie können ihm jederzeit einen Ereignishandler hinzufügen (ohne auf DOMContentLoaded- oder Ladeereignisse warten zu müssen) und ihn verwenden, um alle Ereignisse eines bestimmten Typs auf der Seite zu verarbeiten. Das bedeutet, dass die Seite ohne Verzögerung funktioniert, solange sie anklickbare Elemente darstellt.

• Sparen Sie Zeit beim Einrichten von Seitenereignisroutinen.

• Reduzieren Sie den für die gesamte Seite erforderlichen Speicher und verbessern Sie die Gesamtleistung.

5. Event-Handler löschen

Durch die Zuweisung von Event-Handlern zu Elementen wird eine Verbindung zwischen dem Browser-Code und dem für die Seiteninteraktion verantwortlichen JavaScript-Code hergestellt. Je öfter solche Kontakte wieder aufgenommen werden, desto schlechter wird die Seitenleistung. Zusätzlich zur Einschränkung solcher Verbindungen durch Ereignisdelegierung sollten nicht verwendete Ereignishandler umgehend entfernt werden. Die schlechte Leistung vieler Webanwendungen wird dadurch verursacht, dass nutzlose Event-Handler im Speicher verbleiben.
Es gibt zwei Gründe für dieses Problem:

1. Das Löschen von Elementen mit Event-Handlern,

z. B. das Löschen von Knoten über die DOM-Methode „removeChild()“ oder „replaceChild()“. Am häufigsten wird innerHTML verwendet, um einen bestimmten Teil der Seite als Ganzes zu ersetzen. Wenn zu diesem Zeitpunkt ein Ereignishandler für das von innerHTML gelöschte Element vorhanden ist, wird es vom Garbage Collection-Programm nicht normal bereinigt.
Wenn Sie also wissen, dass ein Element gelöscht wird, sollten Sie seinen Ereignishandler manuell löschen, z. B. btn.onclick = null;//删除事件处理程序Ereignisdelegation kann auch zur Lösung dieses Problems beitragen Durch innerHTML ersetzt, fügen Sie dem Element keinen Ereignishandler hinzu, sondern fügen Sie ihn einfach einem Knoten einer höheren Ebene hinzu.

2. Das Entladen der Seite kann auch das Problem verbleibender Referenzen im Speicher verursachen.

Wenn die Ereignishandler nach dem Entladen der Seite nicht bereinigt werden, verbleiben sie weiterhin im Speicher. Danach erhöht sich jedes Mal, wenn der Browser die Seite lädt und entlädt (z. B. durch Vor- oder Zurückblättern oder Aktualisieren), die Anzahl der verbleibenden Objekte im Speicher, da die Ereignishandler nicht wiederverwendet werden.
Im Allgemeinen ist es am besten, alle Event-Handler im Onunload-Event-Handler zu löschen, bevor die Seite entladen wird. Auch hier zeigt sich der Vorteil der Event-Delegation. Da es nur wenige Event-Handler gibt, kann man sich leicht merken, welche man löschen muss.

6. Wie kann das Endlosschleifenproblem gelöst werden, das durch das dynamische Hinzufügen von p zur Schleife verursacht wird?

Ausdruck

let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

Ausdruck

let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

Die erste Zeile in Ausdruck ① ruft eine HTMLCollection ab, die alle <p> -Elemente im Dokument enthält. Da diese Sammlung in Echtzeit erfolgt, gibt es jedes Mal, wenn Sie der Seite ein neues <p> -Element hinzufügen und dann diese Sammlung abfragen, ein weiteres Element. Da der Browser die Sammlung nicht bei jeder Erstellung speichern möchte, aktualisiert er die Sammlung bei jedem Besuch. Jede Schleife wertet i < ps.length aus, was eine Abfrage zum Abrufen aller <p> -Elemente bedeutet. Da im Hauptteil der Schleife ein neues <p> -Element erstellt und dem Dokument hinzugefügt wird, wird auch der Wert von ps.length bei jedem Schleifendurchlauf erhöht. Da beide Werte erhöht werden, wird i nie gleich ps.length sein, sodass Ausdruck ① eine Endlosschleife verursacht.
In Ausdruck ② wird eine Variable len initialisiert, die die Länge der Menge enthält, da len die Länge der Menge am Anfang der Schleife enthält und dieser Wert nicht dynamisch wächst, wenn die Menge zunimmt ( for循环中初始化变量处只会初始化一次), sodass das in Ausdruck ① auftretende Endlosschleifenproblem vermieden werden kann.
Wenn Sie eine Variable nicht initialisieren möchten, können Sie auch eine umgekehrte Iteration verwenden:

den Ausdruck

let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
	let p = document.createElement("p");
	document.body.appendChild(p);}

7. JavaScript-Mindmap

Verwandte Empfehlungen: JavaScript-Tutorial

Das Obige ist ein detailliertes Verständnis der Speicher- und Leistungsprobleme von JavaScript. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!