JavaScript/DOM - Quão caro está a criação de nós de reorganização do DOM?
https://stackoverflow.com/questions/554128
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou tentando otimizar uma tabela classificável que escrevi. O gargalo está na manipulação de DOM. Atualmente, estou criando novas linhas de tabela e inserindo -as toda vez que classifico a tabela. Estou me perguntando se eu seria capaz de acelerar as coisas reorganizando as linhas, não recriando os nós. Para que isso faça uma diferença significativa, a reorganização do nó DOM teria que ser muito mais rápida que a criação do nó. É este o caso? Obrigado, -Morgan
Nenhuma solução correta
Outras dicas
Não sei se criar ou manipular é mais rápido, mas sei que será mais rápido se você manipular a tabela inteira quando não estiver na página e depois colocá -la de uma só vez. Nesse sentido, provavelmente será mais lento reorganizar as linhas existentes no lugar, a menos que a tabela inteira seja removida do DOM primeiro.
Esta página sugere que seria mais rápido clonar a tabela atual, manipulá -la como desejar e substitua a tabela no DOM.
Estou desenhando esta tabela duas vezes mais agora, usando o InnerHTML, construindo todo o conteúdo como uma corda, em vez de inserir nós um a por causa.
Você pode encontrar esta página à mão para alguns benchmarks:
Se puder, é melhor fazer a manipulação de DOM não como manipulação real de DOM, mas como algum tipo de método dentro do seu script e depois manipular o DOM. Então, em vez de fazer o que é chamado de repintar em cada nó, você agrupa o que teria sido sua repintura em cada nó em seu próprio método e, em seguida, conecta esses nós a um pai que seria então anexado ao DOM real, resultante em apenas dois repixos em vez de centenas. Eu digo dois b/c, você precisa limpar o que já está no DOM antes de atualizar com seus novos dados.
Eu estava procurando uma resposta para isso e decidi configurar uma rápida referência http://jsfiddle.net/wheresrhys/2g6dn/6/
Ele usa jQuery, por isso não é uma referência pura e provavelmente também é distorcida de outras maneiras. Mas o resultado que ele dá é que os nós de DOM em movimento são cerca de duas vezes mais rápido que a criação e depreciação dos nós DOM toda vez
