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
.