O que é um DOM? O que ele come?

O DOM (Document Object Model) é a base das páginas web e seu desenvolvimento. É uma interface de programação para documentos HTML e XML, representando a estrutura de um documento em um objeto semelhante a uma árvore. Com galhos e folhas. Cada elemento, atributo e trecho de texto no documento torna-se um nó nesta árvore. Permite que o JavaScript interaja com elementos HTML, modifique-os ou adicione novos elementos. Este é um resumo aproximado do que cada pessoa experimenta na web, interação, mutabilidade, dicas e elementos visuais dinâmicos. Quando você clica em um botão ou em um menu brilhante, seu cérebro espera que algo aconteça. Para uma frase a ser alterada, para uma nova página a ser carregada ou para um pop-up com uma marca de seleção verde informando que nosso pedido on-line foi pago com sucesso.

Manipular o DOM muito rápido, a cada segundo, é uma grande impossibilidade para a retenção do usuário ou até mesmo para a interação básica do usuário. Mesmo com todo o comportamento dinâmico que podemos criar e expandir a experiência do usuário, o uso excessivo de manipulações de DOM pode ser muito frustrante. E a palavra final é sempre do usuário. Se você tem operações cruciais acontecendo em segundo plano em sua página, como busca de dados, mas o desempenho simplesmente diminui e piora a cada minuto após o usuário interagir com ele, pode ser muito difícil e assustador identificar os pontos de estrangulamento.

Um exemplo de maneira simples de usar a maneira básica de fazer as coisas e com mais rapidez é usar textContent do vanilla js. Sim eu sei. Na maioria das vezes, precisamos de um ciclo de vida complexo para componentes que são tão dinâmicos e mutáveis ​​que precisamos usar gerenciamento de estado e coisas assim. Mas nem sempre é esse o caso. Se você estiver alterando algum texto ou atualizando um cookie apenas uma vez por sessão, você realmente precisa usar uma lógica tão complexa e uma opção que consome muitos recursos?

A função textContent é a mais rápida em js para manipular texto quando comparada com opções de funcionalidade semelhantes, por exemplo, o método innerHtml mais popular. Veja estes testes cronometrados para referência.

Por que?

Você pode economizar a memória da máquina do usuário para outras operações mais impactantes. Às vezes, ser acessível e razoavelmente rápido em dispositivos Android ou Apple muito antigos, por exemplo, é obrigatório. Ou talvez sua chamada de API retorne um JSON tão grande que você precise de alguns segundos para análise e manipulação adequada. Portanto, cada segundo que o usuário não recebe feedback ou fica preso assistindo a uma animação CSS na tela conta.

Aprendi muito recentemente foi codificando em JavaScript sem dependências, como um desafio e uma experiência de aprendizado. Como buscar dados e criar um aplicativo de tarefas apenas com HTML, CSS e JavaScript. Sem npm, sem bibliotecas. E descobri vários métodos e objetos de API da Web dos quais nunca tinha ouvido falar antes, como o objeto DocumentFragment. Ele cria um 'fragmento' vazio de uma estrutura DOM e permite manipulá-lo e preenchê-lo antes de realmente alterar o DOM da página. Então, você carrega um objeto com sua lista de menus ou os títulos de sua ferramenta super sofisticada com tecnologia de IA e, depois de concluir as operações de acréscimo e tags de aninhamento, você o corrige no DOM uma vez. De forma que a análise só aconteça uma vez, de uma só vez, ao invés de fazer um loop for com muitas chamadas idênticas, e exigir uma nova análise da árvore ao final de cada chamada.

Digamos que eu clique em um botão muito rápido, porque meu caso de uso requer renderização muito rápida, mais de uma vez por segundo. Usar sua biblioteca de gerenciamento de estado favorita pode criar algum tipo de barreira nesse caso, pois a cada clique um novo evento é disparado, então ele deve ser disparado antes de iniciar a segunda instância do evento na pilha, por padrão. Dependendo da complexidade ou da necessidade de uma operação assíncrona, isso pode levar mais de um segundo. Neste caso de uso, é um obstáculo. Assim, escolher a ferramenta certa pode ser mais simples, mais curto e ainda mais rápido. Hoje em dia existem opções que bibliotecas populares oferecem para resolver esse problema, como interromper a execução de uma re-renderização quando um novo evento idêntico foi disparado recentemente. Mas meu objetivo aqui é não apenas buscar um aplicativo da web bonito e de aparência moderna. Mas para tornar sua vida mais fácil, tornando a manutenção o mais fácil possível, e não dar um tiro no pé, confiando cegamente em pedaços de código que alguém escreveu e diz que é a melhor opção.

Se você já está instalando esses pacotes e bibliotecas para iniciar seu projeto, por que não investigar por que erros e exceções geram chamadas de funções desconhecidas ou mensagens enigmáticas no console?

Conclusão e algumas divagações extras

Colocar um serviço em funcionamento na nuvem ou em um serviço muito comum gratuitamente, pode ser muito rápido e fácil hoje em dia. Usar uma placa padrão como ponto de partida pode ser muito útil e economizará seu tempo, sem se preocupar com tarefas muito básicas e recorrentes. Basta digitar um único comando em seu terminal e pronto, roteamento básico e uma página hello world rodando em um servidor local.

Ninguém, em nenhum lugar da Internet, sempre saberá o que uma determinada biblioteca ou uma estrutura inteira faz nos bastidores, mas quanto mais você souber como as coisas funcionam, mais frequentemente você será capaz de tomar decisões mais informadas e trabalhar com eficiência.

As estruturas mais populares para desenvolvimento web fazem um ótimo trabalho para otimizar a re-renderização e manipular o DOM usando recursos como DOMs virtuais ou implementar algum tipo de persistência para operações muito exigentes que recuperam dados.

As ferramentas de desenvolvedor web do seu navegador preferido são suas melhores amigas aqui. Versões mais recentes dessas ferramentas podem fornecer telemetria e até mesmo mostrar qual parte do seu código ou quais chamadas são o possível ponto de estrangulamento do seu desempenho.

Ao saber como a linguagem JavaScript funciona ou como ela implementa sua maneira de fazer as coisas, você pode facilmente identificar situações em que uma função pronta para uso de sua biblioteca favorita pode forçá-lo a criar uma base de código mais inchada e não se concentrar em resolver o problema. problema. Pode apenas roubar sua atenção ao replicar algum trecho de código que você escreveu centenas de vezes. E mesmo com a IA para aumentar sua produtividade, você pode cair na armadilha de usar uma solução sugerida por seu companheiro artificial e, na verdade, apenas tornar as coisas mais difíceis de manter no futuro.

Não se preocupe, às vezes simplesmente não sabemos o que é melhor. Como eu disse, ninguém pode saber tudo o tempo todo.

Experimentar e cometer erros em momentos de maior perdão vai te ajudar muito e te dar as ferramentas que você precisa para fazer melhor. Na próxima vez que você fizer algo tão simples como implantar um servidor de arquivos estáticos ou codificar alguma lógica realmente complexa para um caso de uso de nicho, conhecer o básico o levará muito longe e lhe dará mais clareza ao enfrentar novos problemas em sua carreira.

Recomendo fortemente verificar a documentação da API da Web. Além de dar uma olhada em blogs online, mídias sociais ou recursos voltados para desenvolvimento web.

Se eu cometi algum erro, o que é provável, por favor me avise nos comentários. Sou todo ouvidos para críticas e novas ideias, então, por favor, compartilhe-as se quiser!