[HTML/CSS] 브라우저 렌더링 과정

 브라우저 렌더링 과정 

① HTML parsing : 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드하고, 파싱해 DOM 트리를 만듦.
② CSS parsing : CSS 파일 다운로드 받고, 파싱해 CSS 노드로 구성된 트리(CSSOM_CSS Object Model)를 만듦.
③ Render Tree : DOM 트리와 CSS 트리를 합친 트리인데, 화면에 보여질 노드들만 포함합니다.(예 : display: none 은 미포함)
④ Layout(reflow) : 각 노드가 브라우저 화면의 어느 위치에 나타나야 할지 계산하는 과정
⑤ Painting : 색, 크기 등을 입히는 작업으로 CSS 스타일이 적용되는 단계
⑥ Compositing : 여러 레이어를 합쳐서 실제 페이지를 완성

• 파싱(Parsing) : 어떤 형식의 데이터를 읽어서 필요한 정보를 추출하는 과정
• 노드(Node) : 문서 트리 구조에서 하나의 단위

 

 참고 

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering