TIL/Web
[240117] 브라우저 렌더링, 리플로우, 리페인팅 - (1)
브라우저 렌더링 과정 사용자가 브라우저를 통해 웹사이트 접속 브라우저가 리소스 다운받음 (HTML, CSS, JS 등) 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦 DOM 트리 + CSSOM 트리 = Render 트리 구축 Layout: 각 요소의 배치 결정 Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 Layerize: Paint 결과물을 특정한 레이어들로 쪼갬 Commit: Layerize 결과물을 Composite Thread로 옮김 Composite: Render 트리에 존재하는 레이어들을 합치는 과정 Display: 렌더링 ~~ Layer 여기서 말하는 레이어란, 포토샵의 레이어처럼 페인팅 ..
