RWEB 0042 Rendre les éléments du DOM invisibles lors de leur modification

Description

Lorsqu’un élément du DOM (Document Object Model) doit être modifié par plusieurs propriétés, chaque changement de style ou de contenu va générer un repaint ou un reflow. Aussi est-il généralement plus économe de :

• rendre l’élément invisible (passer la propriété display à none) (1 reflow) ;
• modifier toutes les propriétés de l’élément et rendre l’élément à nouveau visible (1 reflow).

Soit 2 reflow au maximum.

Exemple

Procéder comme suit :

var elem = document.getElementById('foo'); elem.style.display ='none'; // Génère 1 reflow
elem.style.width = '10em';
elem.style.height = 'auto';
// ... autres changements ...
elem.style.display ='block'; // Génère 1 reflow

Au final, 2 reflow sont nécessaires au lieu de 6 ou 7 potentiellement.

Principe de validation