Pourquoi une petite réorganisation des opérations de lecture / écriture des DOM entraîne une énorme différence de performance

Le code suivant illustre le problème, la modification de l'ordre de lecture / écriture entraîne une grande différence de temps d'exécution (testé à l'aide de Chrome, Firefox et IE):

// read->write->read->write... function clearSlow(divs){ Array.prototype.forEach.call(divs, function(div) { contents.push(div.clientWidth); div.style.width = "10px"; }); } // read->read->...->write->write... function clearFast(divs){ Array.prototype.forEach.call(divs, function(div) { contents.push(div.clientWidth); }); Array.prototype.forEach.call(divs, function(div) { div.style.width = "10px"; }); } 

Voici un jSFiddle pour l'exemple complet http://jsfiddle.net/Dq3KZ/2/ .

Mes résultats pour n = 100:
Version lente: ~ 35 ms
Version rapide: ~ 2ms

Pour n = 1000:
Version lente: ~ 2000 ms
Version rapide: ~ 25ms

• Comment retourner une propriété de style set javascript à CSS par défaut
• Rapprocher les frères et sœurs en javascript
• Comment conserver une référence jQuery à l'aide de replaceWith
• ID de l'élément html en tant que variable javascript
• Comment déterminer par programme pour quels événements un objet HTML peut écouter?

Je pense que cela est lié au nombre de refoulement du navigateur dans chaque cas. Dans le scénario lent, une refusion se produit pour chaque opération d'écriture. Cependant, dans le scénario rapide, le reflux ne se produit qu'une seule fois à la fin. Mais je ne suis pas sûr et je ne comprends pas pourquoi cela fonctionne de cette façon (lorsque les opérations sont indépendantes).

Edit: J'ai utilisé la propriété InnerText au lieu de clientWidth et Style.Width , j'ai eu le même comportement lors de l'utilisation de Google Chrome ( http://jsfiddle.net/pindexis/CW2BF/7/ ). Cependant, lorsque InnerHTML est utilisé, il n'y a presque aucune différence ( http://jsfiddle.net/pindexis/8E5Yj/ ).

Edit2: J'ai ouvert une discussion sur le problème innerHTML / innerText pour les personnes intéressées: pourquoi le remplacement de InnerHTML avec innerText provoque> 15X de baisse de performance

• Comment vérifier le noeud DOM réel en utilisant une enzyme de réaction
• Que puis-je faire pour optimiser ma application ajax pour IE7 / IE8 afin d'éviter "Arrêter d'exécuter ce script"?
• Image binaire chargée du serveur vers l'image avec javascript
• Javascript DOM "this" Object is incorrect
• Comment obtenir la largeur débordée d'un élément dans une page Web