TIL/Web
브라우저 렌더링, 리플로우, 리페인팅
2025. 03. 06 블로그 A/S 프로젝트🚧 로 업데이트한 글입니다.1. 브라우저 렌더링 과정사용자가 브라우저를 통해 웹사이트에 접속하고, 브라우저가 리소스를 다운받으면서 시작된다. (HTML, CSS, JS 등)Parsing: 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦Style: 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦. 다양한 상대적인 값들이 px로 치환되어 계산.DOM 트리 + CSSOM 트리 = Render 트리 구축.Layout: 각 요소의 배치 결정Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 (이때 그리는건 아니다)Layerize: Paint 결과물을 사용해서 특정한 레이어들로 쪼갬Commit: Layerize 결과물을 ..
