Você já deve ter se deparado com situações que "precisou" criar uma <div> apenas para envolver outras tags e então adicionar essa div ao elemento body. Só porque não queria adicionar essas tags diretamente ao body.
Então, essa div extra que você criou, não está ali por conta de uma real necessidade. 🤨
Envolvemos essas tags em um elemento, porque se adicionamos cada novo elemento diretamente ao body, o código ficaria mais lento, isso porque obrigaria o navegador a passar pelos processos de refluxo para definir o novo layout da tela e depois redesenhar a tela.
Então, para resolver o problema do uso desnecessário da div, podemos usar o método .createDocumentFragment()
Segundo a documentação, as mudanças feitas em um DocumentFragment acontecem fora da tela, portanto não há custo de refluxo e redesenho para construir esse recurso. Consequentemente, as mudanças feitas no document fragment não afetam o documento e nem geram efeito no desempenho que pode ocorrer quando temos mudanças.
Não há nada de muito novo para usar esse recurso, ele se assemelha muito ao nosso velho conhecido document.createElement()
Vejamos o exemplo:
Bem simples! 🤙
Top comments (0)