[SUGESTÃO] - Melhorias de performance e semantica

[luan0ap]

Olá! Achei bacana o projeto e o caso de estudo com extensões do chrome portanto gostaria de deixar minha contribuição e ajudar com o que sei.

Como este projeto é um caso de estudo, vou apenas comentar os pontos que encontei para que você possa avaliar, porém fiz as melhorias em um fork, se quiser dar uma olhada em como ficou o projeto o link é este aqui.

---

appendChild em cada iteração

Qual o problema? A cada iteração feita você está alterando o DOM e a cada alteração é preciso refazer todo o cálculo de estilização e layout

Como resolver?

• Solução com innerHTML usando string: Ao invés de usarmos createElement podemos usar strings e criar toda a estrutura html que precisamos, e a cada iteração ao invés de se executar append podemos salvar essas strings em memória e só no final do processamento usamos innerHTML para adicionar todos os dados já processados.
• Solução com innerHTML usando createDocumentFragment: outra solução seria criarmos um fragment usando createDocumentFragment e adicionarmos as divs de cada emoji neste elemento, e só ao final do processamento se é adicionado este elemento template com todos os dados carregados.

Adicionar evento para cada emoji

Qual o problema? Usando a solução com innerHTML string, não poderemos adicionar eventos aos emojis de uma forma semantica e performatica,

Como resolver? Podemos resolver este problema usando Event Delegation, ou seja, adicionando o event listener para o elemento pai #emojis e ler o conteúdo da tag filho usando event.target.