web-dev-qa-db-fra.com

Quand la redistribution se produit-elle dans un environnement DOM?

Quels types d'activités déclencheront la redistribution de la page Web avec DOM?

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

  • Lorsque vous ajoutez ou supprimez un nœud DOM.
  • Lorsque vous appliquez dynamiquement un style (tel que element.style.width = "10px").
  • Lorsque vous récupérez une mesure qui doit être calculée, comme accéder à offsetWidth, clientHeight ou à toute valeur CSS calculée (via getComputedStyle () dans les navigateurs compatibles DOM ou currentStyle dans IE).

Cependant, selon http://dev.opera.com/articles/view/efficient-javascript/?page= , prendre des déclencheurs de mesure ne redistribue que lorsqu'il y a déjà une action de redistribution en file d'attente.

Quelqu'un at-il d'autres idées?

javascriptperformancedomreflow
50
Morgan Cheng

Les deux articles sont corrects. On peut supposer en toute sécurité que chaque fois que vous faites quelque chose qui pourrait raisonnablement exiger que les dimensions des éléments dans le DOM soient calculées, vous déclencherez la redistribution.

De plus, pour autant que je sache, les deux articles disent la même chose.

Le premier article dit que la redistribution se produit lorsque:

Lorsque vous récupérez une mesure qui doit être calculée, comme accéder à offsetWidth, clientHeight, ou à toute valeur CSS calculée (via getComputedStyle () dans les navigateurs compatibles DOM ou currentStyle dans IE), tandis que les modifications DOM sont mises en file d'attente pour être effectuées.

Le deuxième article déclare:

Comme indiqué précédemment, le navigateur peut mettre en cache plusieurs modifications pour vous et ne redistribuer qu'une seule fois lorsque ces modifications ont toutes été apportées. Cependant, notez que prendre des mesures de l'élément le forcera à refonder, de sorte que les mesures seront correctes. Les modifications peuvent ou non être visiblement repeintes, mais la refusion elle-même doit encore se produire dans les coulisses.

Cet effet est créé lorsque les mesures sont prises en utilisant des propriétés telles que offsetWidth, ou en utilisant des méthodes telles que getComputedStyle. Même si les nombres ne sont pas utilisés, la simple utilisation de l'un ou l'autre de ces derniers pendant que le navigateur met encore en cache les modifications suffira à déclencher la redistribution cachée. Si ces mesures sont prises à plusieurs reprises, vous devriez envisager de les prendre une seule fois et de stocker le résultat, qui pourra ensuite être utilisé plus tard.

Je suppose que cela signifie la même chose qu'ils ont dit plus tôt. Opera fera de son mieux pour mettre en cache les valeurs et éviter la redistribution pour vous, mais vous ne devriez pas vous fier à sa capacité à le faire.

À toutes fins utiles, croyez simplement ce qu'ils disent tous les deux lorsqu'ils disent que les trois types d'interactions peuvent provoquer une redistribution.

À votre santé.

45
coderjoe

Regardez la section "Rendu déclenché par l'accès en lecture de propriété" de Présentation du comportement de rendu d'Internet Explorer , où le code suivant dans IE provoquera une activité de rendu.

function askforHeight () {
  $("#lower").height();  
}
3
Kevin Hakanson
document.body.style.display = 'none';
document.body.style.display = 'block';

Cela résout souvent ces bogues de mise en page incompréhensibles.

1
I.devries