Quand redistribution se produire dans un DOM l'environnement?

Question

Quels types d'activités de déclenchement de redistribution de la page web avec DOM?

Il semble qu'il y a différents points de vue. Selon http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/, il arrive

• Lorsque vous ajoutez ou supprimez un nœud DOM.
• Lorsque vous appliquez un style dynamiquement (comme élément.style.width="10px").
• Lorsque vous récupérez une mesure qui doit être calculé, tels que l'accès à offsetWidth, clientHeight, ou de toute calculée valeur CSS (via getComputedStyle() dans les DOM-compatible navigateurs ou currentStyle dans IE).

Toutefois, selon http://dev.opera.com/articles/view/efficient-javascript/?page=3en prenant la mesure des déclencheurs de redistribution seulement quand il y a déjà de redistribution d'action mis en file d'attente.

Quelqu'un a plus d'idées?

Answer 1

Les deux articles sont correctes. On peut supposer qu'à chaque fois que vous faites quelque chose qui pourrait raisonnablement exiger les dimensions des éléments dans le DOM calculé que vous déclencherez de redistribution.

En outre, pour autant que je puisse en juger, les deux articles disent la même chose.

Le premier article dit de redistribution qui se passe lorsque:

Lorsque vous récupérer une mesure qui doit être calculé, comme l'accès aux offsetWidth, clientHeight, ou de toute calculée valeur CSS (via getComputedStyle() dans les DOM-compatible navigateurs ou currentStyle dans IE), tandis que DOM changements sont mis en file d'attente jusqu'à en être faite.

Le deuxième article stipule:

Comme indiqué précédemment, le navigateur peut mettre en cache plusieurs changements pour vous, et de la redistribution qu'une seule fois lorsque ces modifications ont toutes été faites. Toutefois, notez que la prise de mesures de l'élément va l'obliger à refusion, afin que les mesures sont correctes. Les changements peuvent ou ne peuvent pas ne pas être visiblement repeint, mais le reflow elle-même doit encore se passer en coulisses.

Cet effet est créé lorsque les mesures sont effectuées à l'aide des propriétés comme offsetWidth, ou à l'aide de méthodes comme le getComputedStyle. Même si les chiffres ne sont pas utilisés, simplement à l'aide de l'un de ces tandis que le navigateur est encore la mise en cache des changements, ce sera suffisant pour déclencher l'caché de redistribution. Si ces mesures sont prises à plusieurs reprises, vous devriez envisager de prendre juste une fois, et de stocker le résultat, qui peut ensuite être utilisé ultérieurement.

Je prends cela signifie la même chose qu'il a dit précédemment. L'opéra va essayer son plus dur pour mettre en cache les valeurs et éviter de refusion pour vous, mais vous ne devriez pas compter sur sa capacité à le faire.

Pour toutes fins utiles, juste à croire ce qu'ils disent tous les deux quand ils disent que tous les trois types d'interactions peuvent entraîner une redistribution du texte.

Des acclamations.

Answer 2

Regardez le "Rendu déclenchée par la Propriété de l'Accès en Lecture" de la section de Compréhension de Rendu d'Internet Explorer Comportement, d'où le code suivant dans IE cause de rendu d'activité.

function askforHeight () {
  $("#lower").height();  
}

Answer 3

document.body.style.display = 'none';
document.body.style.display = 'block';

Cela permet souvent de résoudre les ceux incompréhensible mise en page des bugs.