Javascript의 리플로우 및 리페인트

특히 대규모 애플리케이션에서 불필요한 리플로우와 다시 그리기를 줄이기 위해 CSS를 최적화하는 모범 사례는 무엇입니까?

1. 리플로우(레이아웃 재계산):

리플로우(레이아웃 또는 재레이아웃이라고도 함)은 브라우저가 페이지에 있는 요소의 위치, 크기 및 레이아웃을 다시 계산할 때 발생합니다. 이 프로세스는 요소가 추가, 제거, 크기 조정되거나 가시성이 변경되는 등 페이지 레이아웃이 변경될 때마다 발생합니다. 더 복잡하고 시간이 많이 걸리는 작업입니다

예 :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

리플로우는 언제 발생합니까?

• DOM 요소 추가, 제거 또는 수정(예:appendChild,removeChild).
• 너비, 높이, 여백, 패딩 등과 같은 CSS 스타일을 조정하여 레이아웃 변경
• 창 크기를 조정하거나 요소 크기를 변경합니다.
• 글꼴 크기 또는 글꼴 속성을 변경합니다.
• offsetWidth, offsetHeight, scrollTop, getBoundingClientRect()와 같은 메소드를 사용하면 브라우저가 레이아웃을 다시 계산하게 됩니다.

리플로우 작동 방식:

페이지 레이아웃에 영향을 미치는 사항을 변경하는 경우 브라우저는 다음을 수행해야 합니다.

1. 변경의 영향을 받는 모든 요소의 위치와 치수를 다시 계산합니다.
2. 요소가 배치되는 방식을 내부적으로 표현하는 레이아웃 트리를 다시 빌드하세요.

한 번의 변경으로 많은 요소가 영향을 받는 경우 리플로우에 많은 비용이 들고 사이트 성능이 저하될 수 있습니다.

2. 다시 그리기(비주얼 업데이트)

다시 그리기(또는 다시 그리기)는 요소의 시각적 속성이 변경되지만 레이아웃은 변경되지 않을 때 발생합니다. 위치나 레이아웃을 다시 계산하지 않고 요소의 모양만 업데이트하면 되기 때문에 리플로우보다 비용이 저렴합니다. 다시 그리기는 레이아웃이 다시 계산된 후(둘 다 필요한 경우) 또는 색상이나 가시성과 같이 레이아웃에 영향을 주지 않는 속성이 변경될 때 발생합니다.

예 :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

다시 칠하기는 언제 발생합니까?

• 배경색, 테두리 색상 또는 가시성 속성 변경
• 요소의 상자 그림자, 윤곽선 또는 색상 변경
• 불투명도(opacity), 변환(transform) 또는 Z-색인을 업데이트합니다.

다시 그리기에는 레이아웃 다시 계산이 포함되지 않으므로 리플로우보다 빠르지만 여전히 페이지의 일부를 다시 그려야 하므로 시간이 좀 걸립니다.

렌더링 파이프라인

1. DOM 구성: 브라우저는 HTML을 구문 분석하여 DOM(문서 개체 모델) 트리를 구성합니다.
2. CSSOM 구성: CSS를 구문 분석하여 CSSOM(CSS 개체 모델) 트리를 구축합니다.
3. 렌더 트리 구성: DOM과 CSSOM이 결합되어 표시되는 각 요소에 대한 시각적 정보가 포함된 렌더 트리를 만듭니다.
4. 레이아웃(리플로우): 브라우저는 렌더링 트리에 표시되는 각 요소의 위치와 크기를 계산합니다.
5. 페인트: 브라우저는 색상, 테두리, 그림자 등과 같은 시각적 속성을 기반으로 픽셀을 채웁니다.
6. 복합: 브라우저는 다양한 페인팅 레이어(애니메이션, 3D 변환 등과 같은 복잡한 요소의 경우)를 구성하고 이를 화면에 표시합니다.

성능에 미치는 영향

• 리플로우: 특히 페이지의 많은 부분에 영향을 미치거나 반복적으로 트리거되는 경우(예: 루프 또는 크기 조정 시) 성능 측면에서 비용이 많이 듭니다. 이는 페이지 레이아웃에 영향을 미치며 요소의 위치와 크기를 다시 계산해야 합니다.
• 다시 칠하기: 리플로우보다 비용은 저렴하지만 여전히 성능에 영향을 미칩니다. 특히 많은 요소를 자주 다시 칠해야 하는 경우에는 더욱 그렇습니다.

리플로우 및 리페인트를 최적화하는 방법

1. DOM 조작 최소화 : DOM 업데이트 일괄 처리(앞서 언급한 대로) 또는 DocumentFragment와 같은 기술을 사용하여 한 번에 여러 항목을 변경하는 대신 하나씩.

2. 레이아웃 스래싱 방지: 동일한 주기에서 레이아웃 속성(예: offsetHeight)을 읽고 즉시 쓰기(레이아웃 변경)를 수행하면 레이아웃 스래싱이라고 알려진 리플로우가 강제 실행됩니다. 이를 방지하려면 DOM 속성 읽기 및 쓰기를 서로 다른 단계로 분리하세요.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   const box = document.getElementById('box');
   // Triggering a reflow by changing width and height
   box.style.width = '200px';
   box.style.height = '200px';
   
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

3. CSS 클래스 사용 : 개별 스타일을 수정하는 대신 CSS 클래스를 사용하여 변경하세요. 브라우저는 클래스 전환을 보다 효율적으로 처리합니다.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

4. CSS 복잡성 감소: 리플로우를 유발할 수 있는 깊게 중첩된 요소와 지나치게 복잡한 CSS 규칙을 피하세요.

5. 레이아웃에 영향을 주지 않고 요소를 숨기려는 경우 display: none 대신 visible: hide를 사용하세요. display: none은 리플로우를 트리거하는 반면 visible: hide는 다시 그리기만 트리거합니다.

결론

• 리플로우에는 페이지 레이아웃을 다시 계산해야 하며 성능 측면에서 비용이 더 많이 듭니다.
• 다시 그리기 레이아웃에 영향을 주지 않고 시각적 모양을 업데이트하며 비용도 저렴합니다.
• 두 가지를 모두 최소화하면 사이트의 반응성과 속도를 유지하여 사용자 경험을 향상하는 데 도움이 됩니다.

위 내용은 Javascript의 리플로우 및 리페인트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!