Javascript의 리플로우 및 리페인트-JS 튜토리얼-php.cn

Javascript의 리플로우 및 리페인트

Susan Sarandon

풀어 주다： 2024-10-18 22:42:02

원래의

304명이 탐색했습니다.

특히 대규모 애플리케이션에서 불필요한 리플로우와 다시 그리기를 줄이기 위해 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()와 같은 메소드를 사용하면 브라우저가 레이아웃을 다시 계산하게 됩니다.

리플로우 작동 방식:

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

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

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

Reflows and Repaints in Javascript

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-색인을 업데이트합니다.

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

렌더링 파이프라인

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

성능에 미치는 영향

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

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

DOM 조작 최소화 : DOM 업데이트 일괄 처리(앞서 언급한 대로) 또는 DocumentFragment와 같은 기술을 사용하여 한 번에 여러 항목을 변경하는 대신 하나씩.
레이아웃 스래싱 방지: 동일한 주기에서 레이아웃 속성(예: 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>
```
로그인 후 복사
로그인 후 복사
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>
```
로그인 후 복사
로그인 후 복사
CSS 복잡성 감소: 리플로우를 유발할 수 있는 깊게 중첩된 요소와 지나치게 복잡한 CSS 규칙을 피하세요.
레이아웃에 영향을 주지 않고 요소를 숨기려는 경우 display: none 대신 visible: hide를 사용하세요. display: none은 리플로우를 트리거하는 반면 visible: hide는 다시 그리기만 트리거합니다.