Press "Enter" to skip to content

Otimizando a manipulação do DOM – Repaint e Reflow

No último artigo mostrei um ganho considerável de performance utilizando DocumentFragment.

Talvez um pequeno detalhe que por sinal é o mais importante não chamou a atenção de vocês!! Vou novamente colocar um trecho da definição do DocumentFragment.

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element’s position and geometry). Consequently, using document fragments often results in better performance.

Vou listar ótimos artigos para entender o que é Repaint, Reflow, como eles funcionam e a melhor forma de evitar ao máximo o excesso desses dois eventos.

Estamos falando só de HTML, JS e CSS e se não tomarmos cuidado não importa se você tem um Core I7 se não tomar o devido cuidado os sites (agora estamos falando de apps) continuarão lentas, e o cenário nos smartphones só piora!! 🙂

Google – Minimizing browser reflow
Opera – Efficient JavaScript
Mozilla – Notes on HTML Reflow

Abraços e bons estudos!