Conseils pour optimiser CSS afin de réduire les redistributions et les repeintures de pages

Comment éviter les redistributions et redessinements CSS inutiles

Dans le développement front-end, CSS est un élément indispensable. Cependant, une mauvaise utilisation du CSS peut entraîner une réduction des performances de la page, le problème le plus courant étant les redistributions et redessins inutiles du CSS. Cet article présentera quelques astuces et exemples de code spécifiques pour vous aider à éviter ces problèmes et à améliorer les performances de vos pages.

1. Évitez les mises à jour fréquentes de style

La redistribution et le redessin sont déclenchés en fonction des modifications apportées aux attributs de style des éléments DOM, donc la mise à jour fréquente des styles augmentera le nombre de redistributions et de redessins. Pour éviter ce problème, vous pouvez réduire le nombre de redistributions et de redessins en concentrant les mises à jour de style en une seule opération. Par exemple, si vous devez modifier plusieurs attributs de style d'un élément, vous pouvez ajouter une classe au lieu de modifier les attributs un par un. L'exemple de code est le suivant :

// 不推荐的写法
element.style.width = '100px';
element.style.height = '200px';
element.style.background = 'red';

// 推荐的写法
element.classList.add('my-class');

2. Évitez de modifier les styles dans une boucle

Modifier les propriétés de style dans une boucle est un problème courant car chaque modification provoquera une redistribution et un redessin. Pour éviter ce problème, vous pouvez déplacer le calcul et la modification des propriétés de style en dehors de la boucle. L'exemple de code est le suivant :

// 不推荐的写法
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = i * 10 + 'px';
}

// 推荐的写法
let styles = '';
for (let i = 0; i < elements.length; i++) {
  styles += `#${elements[i].id} { width: ${i * 10}px; }`;
}
element.styleSheet
  ? element.styleSheet.cssText = styles // IE
  : element.innerHTML = styles; // Others

3. Utilisez des animations CSS au lieu des animations JavaScript

L'utilisation de JavaScript pour implémenter des animations peut entraîner des redistributions et des redessins fréquents. En revanche, l’utilisation d’animations CSS est plus efficace car elle permet de tirer parti de l’accélération matérielle. L'exemple de code est le suivant :

/* CSS */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* JavaScript */
element.classList.add('spin');

4. Utilisez les propriétés CSS3 pour optimiser les performances

CSS3 introduit certaines propriétés qui peuvent optimiser les performances de redistribution et de redessinage. Par exemple, utilisez transform au lieu de left et top pour modifier la position d'un élément, ou utilisez translate3d pour activer l'accélération matérielle. L'exemple de code est le suivant : transform代替left和top来改变元素的位置，或者使用translate3d开启硬件加速。示例代码如下：

/* 不推荐的写法 */
element.style.left = '100px';
element.style.top = '200px';

/* 推荐的写法 */
element.style.transform = 'translate(100px, 200px)';

5. 使用will-change属性

will-change属性可以告诉浏览器元素将要发生的变化，从而提前进行优化。使用will-change属性可以让浏览器知道哪些属性可能会触发回流或重绘，从而提前进行优化。示例代码如下：

.element {
  will-change: transform;
}

总结

通过避免频繁更新样式、在循环中修改样式、使用CSS动画代替JavaScript动画、使用CSS3属性优化性能和使用will-changerrreee

Utilisez l'attribut will-change 🎜🎜🎜L'attribut will-change peut indiquer au navigateur les changements qui se produiront sur l'élément , optimisant ainsi à l'avance. L'utilisation de l'attribut will-change peut permettre au navigateur de savoir quelles propriétés peuvent déclencher une redistribution ou un redessinage, afin que l'optimisation puisse être effectuée à l'avance. L'exemple de code est le suivant : 🎜rrreee🎜Résumé🎜🎜En évitant les mises à jour fréquentes des styles, en modifiant les styles en boucles, en utilisant des animations CSS au lieu des animations JavaScript, en utilisant les propriétés CSS3 pour optimiser les performances et en utilisant le will-change code>, nous pouvons efficacement éviter la redistribution et le redessinage CSS inutiles et améliorer les performances de la page. Bien entendu, la méthode d’optimisation spécifique doit également être ajustée et optimisée en fonction des besoins et des circonstances spécifiques du projet. 🎜

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!