Browswer Rendering

1. HTML 파싱
1. 브라우저는 HTML 문서를 받아서 읽고 DOM(Document Object Model) 트리를 생성한다.

2. CSS 처리
1. 모든 CSS를 파싱하고 CSSOM(CSS Object Model) 트리를 생성한다.

3. 렌더 트리 생성
1. DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 실제로 화면에 렌더링될 요소들만 포함된다.

4. 레이아웃 계산
1. 요소들의 정확한 위치와 크기를 계산한다. viewport 내에서 요소들의 정확한 위치를 결정한다.
2. 이 과정을 리플로우reflow라고도 부른다.

5. 페인트
1. 렌더 트리의 각 노드를 실제 픽셀로 변환하고 색상, 테두리, 그림자 등 모든 시각적 스타일을 그린다.

6. 컴포지션
1. 페인트된 레이어들을 최종적으로 합성하여 최종 이미지를 만들어 화면에 표시한다.

Reflow

• DOM 요소 추가/삭제

• 요소의 크기 변경 (width, height)

• 위치 변경 (margin, padding)

• 브라우저 창 크기 조정

• 폰트 변경

• 텍스트 내용 변경

• CSS 속성 중 레이아웃에 영향을 주는 속성 변경 (display, position)

• 레이아웃 정보 접근
• element.offsetWidth, getComputedStyle() 같은 속성 접근
• 브라우저는 최신 값을 제공하기 위해 reflow를 강제로 수행

Repaint

• background-color 변경

• color 변경

• visibility 변경

• box-shadow 변경

• outline 변경

Reflow 최적화하기

기존 코드

import React, { useEffect, useRef } from 'react';

export default function ReflowBad() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const children = container.children;

    const start = performance.now();

    for (let i = 0; i < children.length; i++) {
      const height = children[i].offsetHeight; // 💥 이 시점마다 reflow 발생
      children[i].style.marginTop = `${height / 10}px`;
    }

    const end = performance.now();
    console.log(`⛔️ 비최적화 처리 시간: ${end - start}ms`);
  }, []);

  return (
    <div ref={containerRef}>
      {Array.from({ length: 1000 }, (_, i) => (
        <div key={i} style={{ height: 20, backgroundColor: '#ccc', margin: 2 }}>
          Item {i}
        </div>
      ))}
    </div>
  );
}

Batch 처리

import React, { useEffect, useRef } from 'react';

export default function ReflowGood() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const children = container.children;

    const start = performance.now();

    // ✅ Reflow 최소화를 위해 layout 측정 먼저 끝낸 후 스타일 변경
    const heights = Array.from(children).map((el) => el.offsetHeight);

    for (let i = 0; i < children.length; i++) {
      children[i].style.marginTop = `${heights[i] / 10}px`;
    }

    const end = performance.now();
    console.log(`✅ 최적화 처리 시간: ${end - start}ms`);
  }, []);

  return (
    <div ref={containerRef}>
      {Array.from({ length: 1000 }, (_, i) => (
        <div key={i} style={{ height: 20, backgroundColor: '#ccc', margin: 2 }}>
          Item {i}
        </div>
      ))}
    </div>
  );
}

className을 사용한 스타일 일괄 변경

// ❌ Bad (여러 style 직접 수정 → reflow 유발)
el.style.width = '100px';
el.style.height = '100px';
el.style.marginTop = '20px';

// ✅ Good (class 하나로 전체 적용 → 1번만 reflow)
el.classList.add('updated-layout');

DOM Depth 최소화

• 가능하면 중첩 DOM 구조를 단순화하고

• 한 요소의 위치나 크기가 바뀔 때 부모/형제까지 영향받는 구조 지양하자

will-change, transform, opacity 사용

// ✅ 애니메이션에 적합 (layout 영향 없음)
.element {
  transition: transform 0.3s ease;
  will-change: transform;
}

// ❌ layout을 변경하므로 reflow 유발
.element {
  transition: top 0.3s ease;
}

Throttling, Debouncing에서 조심하기

• resize, scroll, input 등 이벤트는 매우 자주 발생

• 그 안에서 DOM 측정/변경을 하지 말고, requestAnimationFrame 또는 lodash.debounce 사용

// ✅ scroll에 reflow 유발 코드 직접 쓰지 말고
window.addEventListener('scroll', () => {
  window.requestAnimationFrame(() => {
    const height = myEl.offsetHeight;
    ...
  });
});

Virtualization

참고

reflow & repaint

reflow와 repaint를 잘 이해하고 관리한다면 성능최적화에 큰 도움이 됩니다.

https://velog.io/@ajm0718/reflow-repaint