Maison > Article > interface Web > 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.
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');
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
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');
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)';
will-change
属性will-change
属性可以告诉浏览器元素将要发生的变化,从而提前进行优化。使用will-change
属性可以让浏览器知道哪些属性可能会触发回流或重绘,从而提前进行优化。示例代码如下:
.element { will-change: transform; }
总结
通过避免频繁更新样式、在循环中修改样式、使用CSS动画代替JavaScript动画、使用CSS3属性优化性能和使用will-change
rrreee
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!