Comprensión profunda de los problemas de memoria y rendimiento de JavaScript.

Cómo comenzar rápidamente con VUE3.0: Ingrese a

las recomendaciones relacionadas con el aprendizaje: Tutorial de JavaScript

1. ¿Qué es la memoria y el rendimiento de JavaScript? Debido a que

los controladores de eventos pueden interactuar en las aplicaciones web modernas, muchos desarrolladores usarán por error una gran cantidad de ellos en la página. En JavaScript, la cantidad de controladores de eventos en una página está directamente relacionada con el rendimiento general de la página. Hay muchas razones, como ① cada función es un objeto y ocupa espacio en la memoria. Cuanto más objetos haya, peor será el rendimiento ② La cantidad de visitas DOM requeridas para un controlador de eventos específico causará primero un retraso en todo el proceso; interacción de la página.

2. ¿Hablar sobre los problemas de rendimiento de InnerHTML?

1. Utilice el material didáctico negativo de InnerHTML

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

Este código es ineficiente porque InnerHTML debe configurarse una vez para cada iteración. No solo eso, InnerHTML debe leerse primero para cada bucle, y eso es. es decir, es necesario acceder a internalHTML dos veces en un bucle.

2. Cómo resolver

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

Después de esta modificación, la eficiencia será mucho mayor. Solo se puede asignar un valor a internalHTML. :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

3. ¿Cómo resolver el problema de demasiados botones?

La solución para demasiados controladores de eventos es utilizar la delegación de eventos. La delegación de eventos aprovecha la propagación de eventos, lo que le permite usar solo un controlador de eventos para administrar un tipo de evento. Por ejemplo, el evento de clic aparece en el documento. Esto significa que puede especificar un controlador de eventos onclick para toda la página, en lugar de especificar controladores de eventos separados para cada elemento en el que se puede hacer clic.

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

Contiene tres elementos de la lista que deben realizar una determinada acción al hacer clic en ellos. La forma habitual es especificar tres controladores de eventos:

let item1 = document.getElementById("girl1). ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("clic",(evento) => {
	console.log("¡Soy Bibi Dong!");})item2.addEventListener("clic",(evento) => {
	console.log("¡Soy Yunyun!");})item3.addEventListener("clic",(evento) => {
	console.log("¡Soy Medusa!");})

Hay demasiados códigos idénticos y el código es demasiado feo.
Usando la delegación de eventos, simplemente agregue un controlador de eventos al nodo ancestro común de múltiples elementos y podrá resolver la fealdad.

let list = document.getElementById("misChicas");list.addEventListener("clic",(evento) => {
	let objetivo = evento.objetivo;
	cambiar(objetivo.id){
		caso "niña1":
			console.log ("¡Soy Bibi Dong!");
			romper;
		caso "niña2":
			console.log("¡Soy Yunyun!");
			romper;
		caso "niña3":
			console.log("¡Soy Medusa!");
			romper;
	}})

4. ¿Cuáles son las ventajas de la delegación de eventos?

• El objeto de documento está disponible en cualquier momento y puede agregarle un controlador de eventos en cualquier momento (sin esperar DOMContentLoaded o cargar eventos) y usarlo para manejar todos los eventos de algún tipo en la página. Esto significa que siempre que la página muestre elementos en los que se puede hacer clic, funcionará sin demora.

• Ahorre tiempo dedicado a configurar rutinas de eventos de página.

• Reduzca la memoria necesaria para toda la página y mejore el rendimiento general.

5. Eliminar controladores de eventos

Al asignar controladores de eventos a elementos, se establece una conexión entre el código del navegador y el código JavaScript responsable de la interacción de la página. Cuanto más se reanude ese contacto, peor será el rendimiento de la página. Además de limitar dichas conexiones mediante la delegación de eventos, los controladores de eventos no utilizados deben eliminarse de inmediato. El bajo rendimiento de muchas aplicaciones web se debe a que quedan controladores de eventos inútiles en la memoria.
Hay dos razones para este problema:

1. Eliminar elementos con controladores de eventos,

como eliminar nodos mediante el método DOM removeChild() o replaceChild(). El más común es utilizar InnerHTML para reemplazar una determinada parte de la página en su totalidad. En este momento, si hay un controlador de eventos en el elemento eliminado por internalHTML, el programa de recolección de basura no lo limpiará normalmente.
Por lo tanto, si sabe que un elemento se eliminará, debe eliminar manualmente su controlador de eventos, como btn.onclick = null;//删除事件处理程序. La delegación de eventos también puede ayudar a resolver este problema. reemplazado por internalHTML, no agregue un controlador de eventos al elemento, solo agréguelo a un nodo de nivel superior.

2. La descarga de páginas también puede causar el problema de referencias residuales en la memoria.

Si los controladores de eventos no se limpian después de descargar la página, aún permanecerán en la memoria. Después de eso, cada vez que el navegador carga y descarga la página (por ejemplo, avanzando, retrocediendo o actualizándose), la cantidad de objetos residuales en la memoria aumenta porque los controladores de eventos no se reciclan.
En términos generales, es mejor eliminar todos los controladores de eventos en el controlador de eventos de descarga antes de descargar la página. La ventaja de la delegación de eventos también se puede ver en este momento. Debido a que hay pocos controladores de eventos, es fácil recordar cuáles eliminar.

6. ¿Cómo resolver el problema del bucle infinito causado por la adición dinámica de p en el bucle?

Expresión

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

Expresión

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

La primera línea de la expresión ① obtiene una HTMLCollection que contiene todos los elementos <p> del documento. Debido a que esta colección es en tiempo real, cada vez que agregue un nuevo elemento <p> a la página y luego consulte esta colección, habrá un elemento más. Debido a que el navegador no desea guardar la colección cada vez que se crea, la actualizará en cada visita. Cada bucle evaluará i < ps.length , lo que significa una consulta para obtener todos los elementos <p> . Debido a que se crea y agrega un nuevo elemento <p> al documento dentro del cuerpo del bucle, el valor de ps.length también se incrementará cada vez que pase por el bucle. Debido a que ambos valores se incrementarán, nunca seré igual a ps.length , por lo que la expresión ① provocará un bucle infinito.
En la expresión ②, se inicializa una variable len que contiene la longitud del conjunto, porque len contiene la longitud del conjunto al comienzo del ciclo, y este valor no crecerá dinámicamente a medida que el conjunto aumenta ( for循环中初始化变量处只会初始化一次), por lo que se puede evitar el problema del bucle infinito que aparece en la expresión ①.
Si no desea inicializar una variable, también puede utilizar la iteración inversa:

la expresión

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

7. Mapa mental de JavaScript

Recomendaciones relacionadas: Tutorial de JavaScript

Lo anterior es una comprensión profunda de los problemas de memoria y rendimiento de JavaScript. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.