Por que você deveria se preocupar com as pesquisas na árvore DOM?
Já parou pra pensar que cada busca na árvore DOM tem um custo para o seu código? E esse custo vem através do tempo de execução.
Mas vamos do início. O que é DOM?
Modelo de Objeto de Documento, ou para os mais íntimos DOM é a representação dos dados de um documento por meio de nós e objetos (boatos de que é a árvore que mais fez pessoas programadoras chorarem até hoje). Documentos estes que podem ser no formato:
- HTML;
- XML;
- SVG.
Em outras palavras, o DOM cria uma estrutura de árvore com todos os elementos do documento em questão e através de linguagens de programação como o Javascript você é capaz de acessar e manipular esses dados através das referências disponiblizadas pelo DOM.
Quando iniciamos no mundo da programação com Javascript aprendemos a buscar cada elemento apenas dentro do método/função em que aquele elemento será utilizado. Como mostra o exemplo de código abaixo.
Mas a medida que o sistema cresce fazer a mesma busca de dados milhares de vezes dentro de um método têm um custo alto: custo de execução. Pois cada vez que o método for executado o navegador vai realizar uma busca em toda a árvore DOM para obter aquele conjunto de dados.
É uma busca custosa pois o navegador percorre toda a árvore DOM para poder retornar os dados solicitados. E fazer isso milhares de vezes para buscar o mesmo conjunto de dados vai impactar no tempo de resposta do seu sistema.
Então para evitar essa perda de performance podemos colocar a chamada de alguns atributos dentro do construtor.
Deste modo esses atributos se tornam atributos de instância.
Atributos de instâncias são uma boa saída para esse problema de performance permitem que uma única cópia do conjunto de dados seja utilizada por todos os objetos criados por aquela classe. Deste modo a busca pelos elementos é realizada uma única vez.
E dessa forma os dados poderão ser manipulados milhares de vezes sem a necessidade de realizar uma nova busca a cada vez que aquele método ou função for chamado.
Segue um exemplo de código de como você pode implementar essa abordagem.
E desta forma apredemos como otimizar nossas pesquisas de elementos através da árvore DOM. E agora você pode aumentar a performance do seu código utilizando esta abordagem.
