리플로우 및 리페인트

쉬운 목차

웹 페이지(브라우저) 렌더링 프로세스

렌더링 엔진은 HTML 파일과 스타일 시트를 해석하여 렌더링 트리를 생성합니다.

HTML 파싱 -> DOM 트리 SytyleSheet 파싱 -> CSSOM 트리 DOM 트리 + CSSOM 트리 -> 렌더링 트리

Render Tree는 화면에 표시되는 모든 노드의 내용과 스타일 정보를 담고 있으며, Render Tree가 형성되면 레이아웃 단계로 들어갑니다.

브라우저에서 뷰포트와 노드의 정확한 위치와 크기를 계산하는 과정을 레이아웃 또는 기술 용어로 리플로우라고 합니다.

리플로우 및 다시 그리기는 변경 사항을 계산하고 요소가 시각적으로 변경될 때 화면에 그리는 작업입니다.
DOM이 시각적으로 변경되면 렌더 트리를 다시 생성하기 위해 리플로우가 발생합니다.
생성된 렌더 트리를 기준으로 다시 칠하여 요소를 화면에 그립니다.

리플로우란 무엇입니까?

생성된 DOM 노드의 레이아웃 값(너비, 높이, 위치 등)이 변경되면 영향을 받는 모든 노드의 값을 다시 계산하여 렌더 트리를 재생성하는 과정

리플로우의 주요 키는 레이아웃입니다.

레이아웃이 완료되면 채색을 다시 그려야 합니다.

역류는 언제 발생합니까?

페이지의 초기 렌더링(초기 레이아웃 프로세스)
노드(요소) 추가 또는 제거
요소의 위치 변경
요소의 크기 변경(여백, 패딩, 테두리, 너비, 높이 등)
글꼴 및 이미지 크기 변경
창 크기 조정
- 뷰포트 크기가 변경되면 전체 레이아웃을 다시 그리는 리플로우가 발생합니다.

리페인팅이란?

리플로우 프로세스가 완료된 후 재생성된 렌더 트리를 다시 그리는 프로세스입니다.

* 단, 재도색은 레이아웃 그래프를 변경할 때만 발생하는 것은 아닙니다.

리플로를 제외하고 노드의 배경색, 가시성, 아웃라인 및 기타 스타일이 변경되면 리페인트만 발생합니다.

성능 최적화(리플로우 다시 그리기 감소)

스타일 변경 시 최하위 노드의 클래스 변경
- 스타일을 변경할 때 상위 노드 전체를 변경하는 것이 아니라 내부 하위 노드의 클래스만 변경하면 리플로우가 발생하는 노드의 범위가 더 적기 때문에 최적화할 수 있지만 이 방법은 이미 작성된 구조이기 때문이다.
  
  실제로 통과하기는 어렵습니다.
  
  구조 자체를 변경하면 원하는 스타일이 변경되므로 실제로 적용 범위는 크지 않습니다.
인라인 스타일을 피하십시오.
- 인라인 스타일은 html을 구문 분석할 때 레이아웃에 영향을 미치기 때문에 추가 리플로우를 유발합니다.
애니메이션이 있는 노드(요소)는 위치 속성이 고정 또는 절대값으로 설정되어 있습니다.
- 애니메이션 효과는 계속해서 변하기 때문에 고정된 위치나 절대 위치가 많은 수의 리플로우를 일으키면 애니메이션 노드가 모든 노드에서 분리되기 때문에 애니메이션의 해당 노드만 분리되어 리플로우가 발생할 수 있습니다.
  
  할 수 있다.

피하다
공들여 나열한 것

테이블 태그가 모두 로드되면 테이블 너비가 계산되어 화면에 그려집니다.

따라서 테이블 내용이 조금만 변경되더라도 너비가 다시 계산되고 테이블의 모든 노드가 재정렬됩니다.

따라서 사용을 피해야 합니다.

레이아웃을 만드십시오.

<表>두번째 사용 그 다음에 테이블 레이아웃: 고정 값 지정하다 이것은 엄청난. 테이블 레이아웃: 고정예 테이블 내용물 마침내 ~에 따르면 테이블 너비 전산 이것은 아니요 왜냐하면테이블 레이아웃~의 기초적인 값 자동차도착하다 비교하다 성능 더 엄청난. <表>두번째 공들여 나열한 것 사용 아니요 데이터 표시 사용 사용 경우에도 테이블 레이아웃: 고정던지다 지정하다 이것은 성능 ~에 따르면 더 엄청난.

CSS 표현을 피하십시오.

CSS 표현식을 사용하면 리플로우할 때마다 JavaScript 표현식이 다시 계산되어 높은 코드 오버헤드가 발생합니다.

CSS 하위 선택자 축소

CSS 하위 선택자를 최소화하는 것은 리플로우 수를 줄이는 것이 아니라 렌더링 트리 계산을 최소화하는 방법입니다.
더 많은 CSS 하위 선택자는 CSSOM 트리를 더 깊게 만들고 렌더링 트리 빌드를 더 길게 만듭니다.

<div class="reflow_box">
  <ul class="reflow_list">
    <li>
      <button type="button" class="btn">버튼</button>
    <li>
    <li>
      <button type="button" class="btn">버튼</button>
    <li>
  </ul>
</div>

/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
    display:block;
}
/* 올바른 예 */
.reflow_list .btn {
  display:block;
}

display: none 속성을 사용하여 스타일을 변경합니다.

display:none이 있는 노드는 렌더 트리 그리기에서 제외되므로 노드가 화면에 즉시 표시되지 않는 경우 display:none을 사용하여 리플로우 비용을 줄일 수 있습니다.

캐시 사용

브라우저는 레이아웃 변경을 큐에 넣고 동시에 실행하여 리플로우를 최소화합니다.

그러나 스타일 정보(예: 오프셋 또는 스크롤 상단) 계산을 요청할 때마다 대기열을 비우고 변경 사항을 적용하여 올바른 정보를 제공합니다.

어디에서 확인할 수 있습니까

먼저 (개발자 도구) > (성능) 탭을 엽니다.
녹음 버튼을 클릭합니다.
작성하는 동안 요소의 텍스트 색상을 변경합니다.
로깅을 중지하고 결과를 보면 요소의 텍스트 색상을 변경할 때 페인트만 발생한다는 것을 알 수 있습니다.

https://mong-blog. 리플로우, 리페인트, 브라우저 렌더링에 대해 알아보기