Compreensão profunda dos problemas de memória e desempenho do JavaScript

Como começar rapidamente com VUE3.0: Insira

recomendações relacionadas ao aprendizado: Tutorial de JavaScript

1. O que é memória e desempenho de JavaScript Como

os manipuladores de eventos podem interagir em aplicativos da web modernos, muitos desenvolvedores usarão erroneamente um grande número deles na página. Em JavaScript, o número de manipuladores de eventos em uma página está diretamente relacionado ao desempenho geral da página. Há muitos motivos, como ① cada função é um objeto e ocupa espaço de memória, pior será o desempenho ② O número de visitas DOM necessárias para um manipulador de eventos especificado causará primeiro um atraso no todo; interação da página.

2. Fale sobre os problemas de desempenho do innerHTML?

1. Use o material didático negativo de innerHTML

para (deixe o valor dos valores) {
	ul.innerHTML += '<li>${value}</li>';}

Este código é ineficiente porque innerHTML deve ser definido uma vez para cada iteração. Além disso, innerHTML deve ser lido primeiro para cada loop, e isso é. quer dizer, innerHTML precisa ser acessado duas vezes em um loop.

2. Como resolver

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

Após esta modificação, a eficiência será muito maior. Apenas innerHTML receberá um valor. :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

;

A solução para muitos manipuladores de eventos é usar a delegação de eventos. A delegação de eventos aproveita a bolha de eventos, permitindo usar apenas um manipulador de eventos para gerenciar um tipo de evento. Por exemplo, o evento click aparece no documento. Isso significa que você pode especificar um manipulador de eventos onclick para a página inteira, em vez de especificar manipuladores de eventos separados para cada elemento clicável.

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

Contém três itens de lista que devem executar uma determinada ação quando clicados. A maneira usual é especificar três manipuladores de eventos:

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

Existem muitos códigos idênticos e o código é muito feio.
Usando a delegação de eventos, basta adicionar um manipulador de eventos ao nó ancestral comum de vários elementos e você poderá resolver a feiúra!

deixe lista = document.getElementById("myGirls");list.addEventListener("clique",(evento) => {
	deixe alvo = evento.target;
	mudar(destino.id){
		caso "menina1":
			console.log("Eu sou Bibi Dong!");
			quebrar;
		caso "menina2":
			console.log("Eu sou Yunyun!");
			quebrar;
		caso "menina3":
			console.log("Eu sou Medusa!");
			quebrar;
	}})

4. Quais são as vantagens da delegação de eventos?

• O objeto de documento está disponível a qualquer momento e você pode adicionar um manipulador de eventos a ele a qualquer momento (sem esperar por DOMContentLoaded ou carregar eventos) e usá-lo para manipular todos os eventos de algum tipo na página. Isso significa que, desde que a página renderize elementos clicáveis, ela funcionará sem demora.

• Economize tempo gasto configurando rotinas de eventos de página.

• Reduza a memória necessária para toda a página e melhore o desempenho geral.

5. Excluir manipuladores de eventos

Ao atribuir manipuladores de eventos aos elementos, é estabelecida uma conexão entre o código do navegador e o código JavaScript responsável pela interação da página. Quanto mais esse contato for retomado, pior será o desempenho da página. Além de limitar tais conexões através da delegação de eventos, os manipuladores de eventos não utilizados devem ser imediatamente removidos. O baixo desempenho de muitas aplicações web é causado por manipuladores de eventos inúteis que permanecem na memória.
Existem duas razões para este problema:

1. Excluir elementos com manipuladores de eventos,

como excluir nós por meio do método DOM removeChild() ou replaceChild(). O mais comum é usar innerHTML para substituir uma determinada parte da página como um todo. Neste momento, se houver um manipulador de eventos no elemento excluído pelo innerHTML, ele não será limpo normalmente pelo programa de coleta de lixo.
Portanto, se você sabe que um elemento será excluído, você deve excluir manualmente seu manipulador de eventos, como btn.onclick = null;//删除事件处理程序. substituído por innerHTML, não adicione um manipulador de eventos ao elemento, apenas adicione-o a um nó de nível superior.

2. O descarregamento da página também pode causar o problema de referências residuais na memória.

Se os manipuladores de eventos não forem limpos após o descarregamento da página, eles ainda permanecerão na memória. Depois disso, toda vez que o navegador carrega e descarrega a página (como avançar, voltar ou atualizar), o número de objetos residuais na memória aumenta porque os manipuladores de eventos não são reciclados.
De modo geral, é melhor excluir todos os manipuladores de eventos no manipulador de eventos onunload antes que a página seja descarregada. A vantagem da delegação de eventos também pode ser vista neste momento. Como existem poucos manipuladores de eventos, é fácil lembrar quais deles excluir.

6. Como resolver o problema do loop infinito causado pela adição dinâmica de p no loop?

Expressão

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

Expressão

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

A primeira linha da expressão ① obtém um HTMLCollection contendo todos os elementos <p> do documento. Como essa coleção é em tempo real, sempre que você adicionar um novo elemento <p> à página e depois consultar essa coleção, haverá mais um item. Como o navegador não deseja salvar a coleção cada vez que ela é criada, ele atualizará a coleção a cada visita. Cada loop avaliará i < ps.length , o que significa uma consulta para obter todos os elementos <p> . Como um novo elemento <p> é criado e adicionado ao documento dentro do corpo do loop, o valor de ps.length também será incrementado a cada vez que passar pelo loop. Como ambos os valores serão incrementados, i nunca será igual ps.length , então a expressão ① causará um loop infinito.
Na expressão ②, uma variável len que contém o comprimento do conjunto é inicializada, porque len mantém o comprimento do conjunto no início do loop, e este valor não crescerá dinamicamente à medida que o conjunto aumenta ( for循环中初始化变量处只会初始化一次), então o problema do loop infinito que aparece na expressão ① pode ser evitado.
Se você não deseja inicializar uma variável, você também pode usar a iteração reversa:

a expressão

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

7. Mapa mental JavaScript

Recomendações relacionadas: Tutorial de JavaScript

O texto acima é uma compreensão aprofundada dos problemas de memória e desempenho do JavaScript. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!