js solution pour empêcher la disposition DIV de clignoter lors des compétences scrolling_javascript

L'exemple de cet article décrit la méthode js pour empêcher la disposition DIV de scintiller lors du défilement, et est partagé avec tout le monde pour votre référence. La méthode spécifique est la suivante :

Les éléments auxquels j'ai été exposé récemment concernant les performances des pages incluent de nombreux contenus subtils et originaux, tels que le rendu du navigateur. Il y a beaucoup d’informations, j’en ai donc sélectionné quelques-unes pour des extraits et des mémos.
Lorsque JavaScript écrit et lit le DOM plusieurs fois, un « effondrement de la mise en page » se produit, provoquant une redistribution du document (redistribution – le processus de construction d'un arbre de rendu

Copier le code Le code est le suivant :

à partir d'un arbre DOM1).
// Lire
var h1 = element1.clientHeight;
// Écrire (mise en page invalide)
element1.style.height = (h1 * 2) 'px';
// Lire (disposition du déclencheur)
var h2 = element2.clientHeight;
// Écrire (mise en page invalide)
element2.style.height = (h2 * 2) 'px';
// Lire (disposition du déclencheur)
var h3 = element3.clientHeight;
// Écrire (mise en page invalide)
element3.style.height = (h3 * 2) 'px';

Lorsque le DOM est écrit, la mise en page n'est pas valide et doit être réorganisée à un certain moment. Mais le navigateur est très paresseux, il veut attendre la fin de l'opération (ou du frame) en cours avant de redistribuer.
Cependant, si nous lisons la valeur géométrique du DOM avant la fin de l'opération (ou du cadre) en cours, nous forcerons alors le navigateur à réorganiser la mise en page à l'avance. C'est ce qu'on appelle la « mise en page synchrone forcée », qui le fera. Cela tue les performances.
Sur un navigateur de bureau moderne, les effets secondaires de la mise en page ne sont peut-être pas évidents, mais sur les appareils mobiles bas de gamme, le problème est sérieux.

Solution rapide

Dans un monde idéal, nous pouvons lire le DOM et écrire le DOM par lots en réorganisant simplement l'ordre d'exécution du code. Cela signifie que le document ne doit être redistribué qu'une seule fois.

Copier le code Le code est le suivant :

// Lire
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// Écrire (mise en page invalide)
element1.style.height = (h1 * 2) 'px';
element2.style.height = (h2 * 2) 'px';
element3.style.height = (h3 * 2) 'px';
// Redistribution du document en fin de frame

Et le monde réel ?

Ce n’est pas si simple en réalité. Dans les grands programmes, le code est répandu partout, et ce dangereux DOM existe partout. Nous ne pouvons pas facilement (et ne devrions évidemment pas) mélanger notre beau code découplé juste pour contrôler l’ordre d’exécution. Alors, afin d’optimiser les performances, comment pouvons-nous regrouper les lectures et les écritures ?

Répondre à la demandeAnimationFrame

window.requestAnimationFrame planifie une fonction à exécuter dans l'image suivante, similaire à setTimout(fn, 0). Ceci est très utile car nous pouvons l'utiliser pour planifier toutes les opérations d'écriture DOM à exécuter ensemble dans la trame suivante et les opérations de lecture DOM à exécuter de manière synchrone dans l'ordre actuel.

Copier le code Le code est le suivant :

// Lire
var h1 = element1.clientHeight;
// écris
requestAnimationFrame(function() {
element1.style.height = (h1 * 2) 'px';
});
// Lire
var h2 = element2.clientHeight;
// écris
requestAnimationFrame(function() {
element2.style.height = (h2 * 2) 'px';
});
……

J'espère que cet article sera utile à la programmation Web de chacun basée sur JavaScript.