Quelqu'un pourrait me prouver que le conseil donné here (copié ci-dessous) concernant le retrait des éléments dom avant de les modifier et de les réinsérer est toujours plus rapide.Javascript Performance - Dom Reflow - Google Article
En preuve, j'aimerais voir quelques chiffres. C'est génial qu'ils recherchent cela mais je pense que l'article est très faible sans inclure de détails sur ce qu'est le 'problème' et comment la solution se résout en termes de vitesse (comme le titre de l'article Accélérer JavaScript)
article ....
Out-of-the-flux DOM Manipulation
Ce modèle nous permet de créer de multiples éléments et de les insérer dans le DOM le déclenchement d'une seule refusion. Il utilise quelque chose appelé DocumentFragment. Nous créons un DocumentFragment en dehors du DOM (donc il est hors du courant). Nous créons ensuite et ajoutons plusieurs éléments à cela. Enfin, nous déplaçons tous les éléments de DocumentFragment vers le DOM mais déclenchons une seule rediffusion. Le problème
Créons une fonction qui modifie l'attribut className pour toutes les ancres d'un élément. Nous pourrions le faire en itérant simplement à travers chaque ancre et en mettant à jour leurs attributs href. Les problèmes sont, cela peut provoquer une refusion pour chaque ancre.
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
La solution
Pour résoudre ce problème, nous pouvons supprimer l'élément du DOM, mettez à jour tous les points d'ancrage, puis insérez l'élément arrière où il était. Pour y parvenir, nous pouvons écrire une fonction réutilisable qui non seulement supprime un élément du DOM, mais renvoie également une fonction qui réinsèrera l'élément dans sa position d'origine.
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
Maintenant, nous pouvons utiliser cette fonction pour mettre à jour les points d'ancrage dans un élément qui est hors de la circulation, et seulement déclencher une refusion lorsque l'on enlève l'élément et lorsque l'on insère l'élément.
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
Belle extension mais les deux exemples semblent faire la même quantité de redessins pour moi. Toute chance que vous pouvez donner une démo à pastebin.me :) – redsquare
Je vais admettre que l'extension ralentit beaucoup les choses, donc il peut parfois être difficile de voir la différence sur les opérations lourdes de calcul, par exemple. Google Maps zooming. – Alex