Conseils et méthodes pour réduire les opérations de refusion et de redessinage

Comment éviter les opérations fréquentes de redistribution et de repeinture

La redistribution et le repeint sont deux opérations importantes lorsque le navigateur affiche la page. Reflow fait référence au navigateur qui recalcule la position et la taille des éléments en fonction des modifications apportées à l'arborescence DOM, tandis que redessiner redessine la page en fonction des résultats du calcul. Ces deux opérations consomment beaucoup de ressources informatiques et entraînent une dégradation des performances des pages. Par conséquent, il est essentiel d’éviter les opérations fréquentes de redistribution et de redessinage pour optimiser les performances des pages Web.

Cet article présentera quelques méthodes efficaces pour éviter les opérations de redistribution et de redessinage fréquentes, et fournira des exemples de code spécifiques.

1. Utilisez l'attribut transform de CSS
   Lorsque vous devez effectuer des opérations telles que le déplacement, la rotation et la mise à l'échelle d'éléments, vous devriez essayer d'utiliser l'attribut transform de CSS au lieu de modifier directement la gauche, le haut, la largeur, la hauteur et d'autres attributs de l'élément. Étant donné que l’opération de transformation ne déclenchera pas de redistribution, elle déclenchera uniquement une opération de redessinage, améliorant ainsi les performances.

Exemple de code :

// 不推荐的方式
element.style.left = '100px';
element.style.top = '200px';
element.style.width = '300px';
element.style.height = '400px';

// 推荐的方式
element.style.transform = 'translate(100px, 200px) scale(1.5)';

2. Évitez l'accès fréquent aux attributs de mise en page
   Si vous devez lire fréquemment les attributs de mise en page des éléments en JavaScript, tels que offsetWidth, offsetHeight, clientWidth, clientHeight, etc., vous devez minimiser l'accès à ceux-ci. attributs pour éviter de causer des problèmes Opérations de redistribution fréquentes.

Exemple de code :

// 不推荐的方式
for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

// 推荐的方式
const length = elements.length;
for (let i = 0; i < length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

3. Utilisation du DOM virtuel
   Le DOM virtuel est une technologie qui représente le DOM réel via des objets JavaScript, qui peuvent réduire les opérations de redistribution et de redessinage via des mises à jour par lots. Lorsqu'un grand nombre d'éléments du DOM doivent être modifiés fréquemment, vous pouvez d'abord effectuer un traitement par lots via le DOM virtuel, puis mettre à jour le DOM réel en même temps, réduisant ainsi le nombre de redistributions et de redessins.

Exemple de code :

// 创建虚拟DOM
const virtualDOM = document.createElement('div');
virtualDOM.style.width = '200px';
virtualDOM.style.height = '300px';

// 批量批处理
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('span');
    element.innerText = 'Hello Virtual DOM';
    virtualDOM.appendChild(element);
}

// 一次性更新真实DOM
document.body.appendChild(virtualDOM);

4. Utilisation de la limitation et de l'anti-rebond
   La limitation et l'anti-rebond sont des techniques couramment utilisées pour optimiser les performances des pages. La limitation peut limiter la fréquence de déclenchement des événements pour empêcher les opérations de redistribution et de redessinage provoquées par des déclenchements fréquents ; l'anti-tremblement peut retarder le temps de déclenchement des événements pour obtenir l'effet de déclencher un seul événement sur une courte période, réduisant ainsi le nombre d'événements. opérations de refusion et de redessinage.

Exemple de code :

// 节流方式
function throttle(fn, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fn.apply(this, arguments);
            }, delay);
        }
    };
}

// 防抖方式
function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

// 使用节流方式绑定事件
element.addEventListener('scroll', throttle(function() {
    // 处理滚动事件
}, 200));

// 使用防抖方式绑定事件
element.addEventListener('resize', debounce(function() {
    // 处理调整窗口大小事件
}, 200));

Grâce aux méthodes ci-dessus, nous pouvons efficacement éviter les opérations de redistribution et de redessinage fréquentes, et améliorer les performances et l'expérience utilisateur de la page. Au cours du processus de développement, il convient de prêter attention à l'utilisation rationnelle de l'attribut de transformation CSS, en réduisant l'accès aux attributs de mise en page, en utilisant le DOM virtuel pour le traitement par lots, en utilisant la technologie de limitation et d'anti-secousse, etc. Optimiser soigneusement l'opération de rendu de la page peut offrir aux utilisateurs une expérience de navigation plus rapide et plus fluide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!