💬 리플로우와 리페인트 리플로우(Reflow)와 리페인트(Repaint)는 웹 브라우저의 렌더링 과정에서 중요한 개념이다. 이 두 용어는 웹 페이지의 레이아웃 및 시각적 표현을 관리하고 최적화하는 데 사용된다. 리플로우 (Reflow) 리플로우는 웹 페이지의 레이아웃이 변경될 때 발생하는 과정을 나타낸다. 이것은 요소의 크기, 위치, 구조 또는 스타일이 변경될 때 발생한다. 브라우저는 레이아웃 변경 사항을 계산하고, 이 변경 사항에 영향을 받는 요소 및 그 하위 요소들을 다시 배치한다. 이로 인해 레이아웃 트리(Layout Tree)와 렌더 트리(Render Tree)가 다시 생성된다. 리플로우는 비용이 많이 드는 연산이므로 자주 발생하면 성능에 영향을 미칠 수 있으므로 최소화해야 한다. 리페인트 (Re..

브라우저 랜더링 브라우저 랜더링 과정은 웹 페이지를 표시하기 위해 브라우저가 수행하는 단계와 프로세스를 의미한다. HTML 파싱: 브라우저는 웹 페이지의 HTML 문서를 가져와서 파싱한다. 이 과정에서 HTML 문서의 구조를 이해하고 DOM(Document Object Model) 트리를 생성한다. DOM 트리는 웹 페이지의 요소(태그, 속성 등)와 그들의 관계를 표현한다. CSS 파싱 및 스타일 계산: 브라우저는 HTML 파싱 후에 CSS 스타일 시트를 가져와서 파싱한다. 각 요소에 대한 스타일 정보를 추출하고, 스타일 계산을 통해 각 요소의 최종 스타일을 결정한다. 이렇게 계산된 스타일은 렌더 트리(Render Tree)라는 새로운 트리 구조에 저장된다. 레이아웃(Layout): 브라우저는 렌더 트리..