Optimisation des performances des pages Web : l'impact de la redistribution et du redessinage et comment y faire face

L'impact de la redistribution et du redessinage sur les performances des pages Web et les méthodes d'optimisation

Lorsque nous ouvrons une page Web dans un navigateur, le processus de rendu de la page Web peut être divisé en quatre étapes : analyse HTML, construction de l'arborescence DOM, construire l'arbre CSSOM, fusionner les arbres DOM et CSSOM et générer un arbre de rendu, et enfin disposer et dessiner la page en fonction de l'arbre de rendu. Dans ce processus de rendu, la refusion et la repeinture sont deux concepts très importants.

Reflow fait référence au processus dans lequel le navigateur recalcule les propriétés géométriques des éléments de la page et redessine la page lorsque la taille, la position ou le contenu de l'élément DOM change. Redessiner signifie que lorsque le style d'un élément change, mais n'affecte pas ses propriétés géométriques sur la page, le navigateur n'a qu'à redessiner l'élément sans le relayer.

Les redistributions et redessinages fréquents auront un grand impact sur les performances de la page, car le navigateur doit recalculer les propriétés géométriques des éléments et remodeler la page pendant le processus de redistribution. De même, le redessinage affectera également les performances de la page. Même s’il est moins coûteux que le reflow, il consommera quand même certaines ressources.

Afin d'optimiser les performances des pages Web, nous devons réduire autant que possible le nombre de reflows et de redessins. Voici quelques méthodes d'optimisation :

1. Utiliser la centralisation de style : centralisez toutes les opérations pour modifier le style d'un certain élément DOM et exécutez-les ensemble pour éviter les multiples redistributions et redessins causés par plusieurs modifications de style. Par exemple, vous pouvez utiliser des classes CSS pour modifier les styles de plusieurs éléments à la fois au lieu de les modifier un par un.
2. Utilisez des fragments de document : lorsque vous devez insérer un grand nombre de nœuds dans le DOM, vous pouvez utiliser des fragments de document pour insérer d'abord ces nœuds dans le fragment de document, puis insérer le fragment de document dans le DOM en même temps, ce qui peut réduire Le nombre de refusions et de redessins.
3. Définissez le style en opération par lots : modifier le style en modifiant l'attribut de style de l'élément entraînera une redistribution et un redessinage, il est donc préférable de concentrer les opérations de modification du style ensemble et de modifier l'attribut classList, className ou style de l'élément. élément à la fois pour utiliser les styles par lots au lieu de les modifier un par un.
4. Évitez d'utiliser des attributs de mise en page à synchronisation forcée : la lecture de certains attributs forcera le navigateur à effectuer une mise en page synchrone et provoquera une redistribution, tels que offsetLeft, offsetTop, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollTop, scrollLeft et d'autres attributs. Évitez de les utiliser. autant que possible. Lisez ces propriétés à plusieurs reprises lorsque vous modifiez fréquemment le style d'un élément.
5. Utilisez les propriétés de transformation et d'opacité : les propriétés de transformation et d'opacité ne provoqueront pas de refusion, seulement un redessinage. Par conséquent, lorsque vous modifiez la position, la taille et d'autres attributs des éléments, essayez d'utiliser ces deux attributs.
6. Utilisez les fonctions de limitation et d'anti-secousse : lors de la surveillance des changements de taille de la fenêtre du navigateur, du défilement et d'autres événements, utilisez les fonctions de limitation et d'anti-secousse pour limiter le nombre de redistributions et de redessins et éviter les déclenchements fréquents.

Voici quelques exemples de code spécifiques :

// 使用样式集中化
document.getElementById('elementId').classList.add('new-class');

// 使用文档片段
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
  var div = document.createElement('div');
  div.textContent = 'This is a div';
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

// 批量操作样式
var elements = document.getElementsByClassName('elements');
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('new-class');
}

// 避免强制同步布局属性
var width = element.offsetWidth; // 读取元素的宽度

// 使用transform和opacity属性
element.style.transform = 'translateX(100px)';
element.style.opacity = 0.5;

// 使用节流函数
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('resize', throttle(function() {
  // 窗口大小变化时的处理逻辑
}, 200));

En adoptant les méthodes d'optimisation ci-dessus, nous pouvons réduire le nombre de refusions et de redessins, améliorant ainsi les performances et l'expérience utilisateur de la page Web. Dans le même temps, pendant le processus de développement, nous devons également faire attention à éviter de modifier fréquemment le style et la disposition des éléments, et à minimiser le déclenchement de redistribution et de redessinage inutiles.

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!