페이지 리플로우 및 다시 그리기를 줄이기 위한 CSS 최적화 팁

불필요한 CSS 리플로우 및 다시 그리기를 방지하는 방법

프론트엔드 개발에서 CSS는 없어서는 안 될 부분입니다. 그러나 CSS를 부적절하게 사용하면 페이지 성능이 저하될 수 있으며, 가장 일반적인 문제는 불필요한 CSS 리플로우 및 다시 그리기입니다. 이 문서에서는 이러한 문제를 방지하고 페이지 성능을 향상시키는 데 도움이 되는 몇 가지 팁과 구체적인 코드 예제를 소개합니다.

1. 잦은 스타일 업데이트 방지

리플로우 및 다시 그리기는 DOM 요소의 스타일 속성 변경에 따라 트리거되므로 스타일을 자주 업데이트하면 리플로우 및 다시 그리기 횟수가 늘어납니다. 이 문제를 방지하려면 스타일 업데이트를 단일 작업으로 집중하여 리플로우 및 다시 그리기 횟수를 줄일 수 있습니다. 예를 들어 요소의 여러 스타일 속성을 수정해야 하는 경우 속성을 하나씩 수정하는 대신 클래스를 추가할 수 있습니다. 샘플 코드는 다음과 같습니다.

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

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

2. 루프에서 스타일 수정을 피하세요

루프에서 스타일 속성을 수정하는 것은 일반적인 문제입니다. 수정할 때마다 리플로우와 다시 그리기가 발생하기 때문입니다. 이 문제를 방지하려면 스타일 속성의 계산 및 수정을 루프 외부로 이동할 수 있습니다. 샘플 코드는 다음과 같습니다.

// 不推荐的写法
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. JavaScript 애니메이션 대신 CSS 애니메이션을 사용하세요

JavaScript를 사용하여 애니메이션을 구현하면 리플로우와 다시 그리기가 자주 발생할 수 있습니다. 대조적으로, CSS 애니메이션을 사용하는 것은 하드웨어 가속을 활용하기 때문에 더 효율적입니다. 샘플 코드는 다음과 같습니다.

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

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

4. CSS3 속성을 사용하여 성능 최적화

CSS3에는 리플로우 및 다시 그리기 성능을 최적화할 수 있는 몇 가지 속성이 도입되었습니다. 예를 들어 left 및 top 대신 transform을 사용하여 요소의 위치를 ​​변경하거나 translate3d를 사용하여 하드웨어 가속을 활성화합니다. 샘플 코드는 다음과 같습니다. 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

will-change 속성을 ​​사용하세요. 🎜🎜🎜 will-change 속성은 브라우저에 알릴 수 있습니다. 요소에 발생할 변경 사항을 사전에 최적화합니다. will-change 속성을 ​​사용하면 어떤 속성이 리플로우나 다시 그리기를 트리거할 수 있는지 브라우저에 알릴 수 있으므로 최적화가 미리 수행될 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜요약🎜🎜스타일의 빈번한 업데이트 방지, 루프에서 스타일 수정, JavaScript 애니메이션 대신 CSS 애니메이션 사용, CSS3 속성을 사용하여 성능 최적화 및 will-changewill-change 사용 code> 속성을 ​​사용하면 불필요한 CSS 리플로우와 다시 그리기를 효과적으로 방지하고 페이지 성능을 향상시킬 수 있습니다. 물론 구체적인 최적화 방법도 프로젝트의 필요와 구체적인 상황에 따라 조정되고 최적화되어야 합니다. 🎜

위 내용은 페이지 리플로우 및 다시 그리기를 줄이기 위한 CSS 최적화 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!