브라우저의 렌더링 과정, 레이아웃과 리페인트

 

브라우저의 렌더링 과정

 

브라우저는 크게 네가지 단계를 거쳐 렌더링을 수행한다.

 

1. 요청

✅ 브라우저가 서버에게 필요한 리소스를 요청하는 단계

 

 

2. 렌더트리 생성

✅ HTML을 파싱하여  DOM Tree를, CSS를 파싱하여 CSSOM(CSS Object Model) Tree를 만든 후 두 트리를 조합하여 렌더트리를 구성한다.

✅ 렌더 트리는 화면에 나타나는 요소들을 결정하는 트리이다. 
→  어떤 요소들이 보여야하는지, 어떤 스타일이 적용되어야 하는지, 어떤 순서로 나타낼 것인지를 명세하는 트리이다.

 

 

3. 레이아웃(리플로우)

✅ 렌더 트리 구성이 끝나면 레이아웃 단계가 이어지는데, 이 단계에서는 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 좌표에 나타낸다.

✅ 이 과정은 HTML의 루트 오브젝트로부터 재귀적으로 실행된다.

 

 

🤔 레이아웃은 언제 발생하는가?

✅ 어떠한 액션이나 이벤트에 의해 DOM 요소의 크기나 위치 등을 변경하면 해당 노드의 하위 노드와 상위 노드들을 포함하여 레이아웃 단계를 다시 수행하게 된다.

→  변경하려는 특정 요소의 위치와 크기 뿐만 아니라 연관된 요소들의 위치와 크기도 재계산하여 영향을 주기 때문에 브라우저의 퍼포먼스를 저하시키는 요인이 될 수 있다!

 

좀 더 구체적으로 적어보자면...

✅ DOM 엘리먼트 추가, 제거 또는 변경
✅ CSS 스타일 추가, 제거 또는 변경
✅ CSS 스타일을 직접 변경하거나 클래스를 추가
       (엘리먼트의 길이를 변경하면 DOM 트리에 있는 다른 노드에 영향을 줄 수 있다.)
✅ 브라우저 사이즈가 변할 때

 

 

4. 페인트(리페인트)

✅  레이아웃 단계를 통해 화면에 배치된 엘리먼트들에게 색을 입히고 레이어의 위치를 결정하는 단계이다. (레이아웃 단계가 수행된 후 렌더트리를 다시 화면에 그려주는 과정)

✅ 이 단계 역시 루트 오브젝트로부터 재귀적으로 실행된다. 

✅ 페인팅에는 순서가 있는데 이는 z-index 축을 이용한 쌓임 맥락(Stacking context)과도 같다.

→  z-index가 낮은 순서대로 먼저 페인팅된다.

 

 

🤔 리페인트는 언제 발생하는가?

✅ 가시성이 변경되는 순간(opacity, background-color, visibility, outline)
✅ 레이아웃이 호출된 순간 뒤에 호출된다.

 

🤔 visibility 속성은 레이아웃을 발생시킬까?

🤓 visibility 속성이 변하면 레이아웃은 발생하지 않고 리페인트만 발생한다!

→  visibility: hidden 이 적용된 요소는 보이지만 않을 뿐 크기나 위치가 변하는 게 아니기 때문에 레이아웃은 발생하지 않고 리페인트만 발생한다. (위치, 크키, 테두리, 두께, 폰트 사이즈 같이 기하학적인 변화가 아님)

비슷한 이유로 background-color로 요소의 배경색만 바꿔준 경우도 리페인트만 발생하게 된다.

 

 

 

 

👩‍💻 테스트 

✅ 레이아웃과 페인트는 개발자 도구에서 직접 확인 할 수 있다.

 

🔨 방법

✅ 개발자도구 > Performance > Record 클릭하여 녹화 > 테스트하고 싶은 부분 시도하고 확인 

 

 

🔨 테스트 결과 확인

✅ 요소의 width를 변경했을 때

 → div의  width 크기를 변경했다. 레이아웃 발생 후 리페인트가 발생되는 것을 확인할 수 있다. 

 

 

 

✅ backgroundColor를 변경했을 때

 → 콘솔창에 입력하여 backgroundColor를 'green'으로 변경했다.

       색상만 변경되었을 경우 리페인트만 발생한다는 것을 확인할 수 있다.

 

 

 

 

🔨 리페인트 실시간으로 확인하는 방법

 

 

✅ 크롬 개발자도구 > 렌더링 > Paint flashing 체크하면 리페인트가 발생하는 모습을 실시간으로 확인할 수 있다. (초록색으로 표시된 부분이 리페인트가 발생하는 부분)

 

---

Reference

 

https://yozm.wishket.com/magazine/detail/1338/

프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 | 요즘IT

https://kwangsunny.tistory.com/42

브라우저 렌더링 - 리플로우(reflow) 와 리페인트(repaint)