TIL-2024.03.27 - JS - Web Rendering - 레이아웃 계산 & 리플로우

 

 

---

질문:

1. 랜더 트리가 구성된 이후 대체 어떤 일이 발생하는가?
2. 레이아웃, 리플로우는 각각 무엇이고 차이점은 무엇인가

 

랜더트리 구성 이후 발생되는 일:

• 랜더링 과정 복습: 
  - HTML 문서와 CSS 스타일 시트를 파싱하여 각 요소에 적용되는 스타일을 결정하여 요소의 특성을 설정
     (각 요소들의 우선순위, 상속, 선택자에 따라 최종적으로 적용되는 스타일이 결정)
  
  
• 이렇게 만들어진 랜더트리(필요한 요소들의 집합) 웹 페이지의 요소들의 크기와 위치를 결정하기 위해 필요한 계산이 필요. 
• 이러한 작업을 하는 것을  레이아웃 계산 (초기) | 리플로우(변경시) 라 한다. 

 

---

 

 

레이아웃 계산 :

• 요소의 스타일 정보를 계산하여 각 요소가 어디에 위치하고 어떤 크기를 가져야 하는지를 결정.
• 레이아웃 계산은 초기 페이지 로드 시에 한 번 발생하고, 스타일이 변경될 때마다 다시 발생.
• 이 단계에서는 요소들의 크기와 위치를 결정하는 계산이 수행.

 

 

 

리플로우(Reflow):

• 리플로우는 요소의 레이아웃이 변경될 때 발생하는 과정으로, 요소의 크기나 위치에 대한 "다시" 계산이 필요한 상황에서 발생.
• 리플로우는 주로 페이지의 요소의 크기나 위치가 변경될 때 발생.
• 리플로우는 레이아웃 계산이 수행된 후에 발생하며, 변경된 레이아웃에 따라 요소의 크기와 위치를 다시 계산.
• 리플로우는 레이아웃 계산보다 비용이 더 많이 드는 작업. (리플로우 > 레이아웃 계산)

 

 

 

레이아웃 계산 | 리플로우 차이: 

• 레이아웃 계산은 요소들의 초기 크기와 위치를 결정하는 단계 > 초기 페이지 로드 시에 한 번 발생
• 리플로우는 (요소의 레이아웃이 변경될 때 발생)하여 요소의 크기와 위치를 다시 계산하는 작업. > 변경이 발생한 경우

 

 

 

---

 

답변:

 

1. 랜더 트리가 구성된 이후 대체 어떤 일이 발생하는가?
   - 레이아웃 계산 | 리플로우 > 페인트 | 리페인트 > 합성
   
   
2. 레이아웃, 리플로우는 각각 무엇이고 차이점은 무엇인가?
   - 각 요소가 어디에 위치하고 어떤 크기를 가져야하는지를 결정하는 작업으로, 초기에 계산되는지 아니면 변경되는 것인지 차이

 

요약:

• JS 코드에서 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우, DOM 이나 CSSOM이 변경.
• 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃 다시 계산 > 리플로우