FrontEnd
웹 브라우저 렌더링 과정 CRP(Critical Rendering Path)
웹 브라우저가 그려지는 과정 사용자가 브라우저를 이용할 때 일련의 과정이 있지만 다 건너 뛰고 HTML파일이 웹 브라우저에 그려지는 과정을 알아보았다. HTML문서를 파싱하고, JS와 CSS를 읽어 DOM Tree를 생성하고 레이아웃을 작성하여 Paint해주는 일련의 과정을 거쳐 우리 눈에 보이는 화면이 그려지는데 브라우저마다 약간씩 다르기는 하지면 기본적으로 큰 흐름은 거의 동일하다고 한다. 1. HTML DOM Tree 아래와 같이 우리가 만든 HTML 문서가 있다고 가정해보자 HTML 삽입 미리보기할 수 없는 소스 DOM Tree는 루트 엘리먼트인 을 시작으로 각 엘리먼트에 대한 노드를 생성하여 트리 구조를 작성한다. 중첩 된 엘리먼트의 경우 자식 노드를 생성하고, 각 엘리먼트의 속성을 포함하여 기..
2023. 3. 1.
