Qual é o mais rápido? appendChild vs innerTEXT vs innerHTML

Caso queiram ver os resultados segue o link: https://jsben.ch/5WD46

Lembrando que pode variar dependendo do browser e do hardware do computador.

Resumo

Feito teste em alguns navegadores para determinar qual seria o jeito mais eficiênte de trocar o nodeValue de um DOMNode no JavaScript.

O teste foi escrito em inglês para aumentar o alcance das pessoas!

Objetivos

O objetivo principal era achar a solução mais eficiênte para a questão que no caso seria a troca de valores de uma grid editável, que estamos desenvolvendo em JavaScript para um framework próprio, no nosso caso como não tem tags html envolvidas foi importante adicionar o innerTEXT, porém se no seu caso é necessário adicionar tags HTML o innerTEXT não ajudaria e seria melhor ficar com a segunda opção nos resultados.

Resultados

Resultados interessantes ocorreram:

No caso do Google Chrome 83.0.4103.97 64 bits.

1. JavaScript innerTEXT - fora do loop (1598872 op/segundo) - VENCEDOR
2. JavaScript innerTEXT - dentro do loop (535437 op/segundo) - SEGUNDO COLOCADO
3. JavaScript innerHTML - fora do loop (240431 op/segundo)
4. JavaScript appendChild (113000 op/segundo)
5. JavaScript innerHTML - dentro do loop (13688 op/segundo

Microsoft Edge

1. JavaScript innerTEXT - dentro do loop (609320 op/segundo) - SEGUNDO COLOCADO
2. JavaScript innerTEXT - fora do loop (558582 op/segundo) - VENCEDOR
3. JavaScript innerHTML - fora do loop (221512 op/segundo)
4. JavaScript innerHTML - dentro do loop (20348 op/segundo)
5. JavaScript appendChild (13024 op/segundo)

Conclusões

Caso queiram ver os resultados segue o link: https://jsben.ch/5WD46

Lembrando que pode variar dependendo do browser e do hardware do computador.

Testei nesses pois era o que estava instalado no meu computador no momento.

Vá em frente teste no seu também!

Até o próximo artigo!