O acesso a elementos DOM tem um custo, e modificar elementos DOM é ainda mais caro porque faz com que o navegador recalcule as alterações geométricas da página.
Obviamente, o pior caso é acessar o elemento modificado no loop, especialmente operações de loop nas coleções de elementos HTML.
Por exemplo:
A cópia do código é a seguinte:
<!-antes da otimização->
<script type = "text/javascript">
função iNnerHtMlLOOP () {
for (var count = 0; contagem <15000; count ++) {
document.getElementById ('aqui'). Innerhtml+= 'A';
}
}
</script>
Esta função está nos loops para modificar o conteúdo do elemento da página. O problema com este código é que cada iteração do loop, o elemento é acessado duas vezes: uma vez leia a propriedade InnerHTML e uma vez a reescreva.
Uma abordagem mais eficiente é usar variáveis locais para armazenar o conteúdo atualizado e, em seguida, escrevê -lo ao mesmo tempo após o término do loop:
A cópia do código é a seguinte:
<!-Após a otimização->
<script type = "text/javascript">
função iNnerHtMlLOOP () {
var content = '';
for (var count = 0; contagem <15000; count ++) {
content+= 'a';
}
document.getElementById ('aqui'). innerhtml+= content;
}
</script>
Quanto mais vezes você acessa o DOM, mais lento o código é executado. Portanto, quando houver outras soluções para substituí -las, devemos tentar minimizar o número de visitas ao DOM.