[TIL] 브라우저 렌더링

브라우저의 주요 구성 요소 출처 : Naver D2

• 사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스
• 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
• 렌더링 엔진 : HTML 과 CSS를 파싱해 요청한 웹 페이지를 표시하는 렌더링 엔진
• 통신 : 각종 네트워크 요청을 수행하는 네트워킹
• 자바스크립트 해석기 : 자바스크립트 코드를 실행하는 인터프리터 ex) 크롬-v8
• UI 백엔드 : 기본적인 위젯을 그려주는 UI백엔드 파트 ex) 버튼, 체크박스
• 자료 저장소 : 보조 기억장치에 데이터를 저장하는 파트 ex) localStorage, cookie

 

Critical Rendering Path : 렌더링 경로

DOM Tree생성 & CSSOM Tree 생성 → Render Tree 생성 → Render Tree 배치 : Layout(Reflow) → Render Tree 그리기: Paint(Repaint)

• DOM Tree생성 : HTML을 DOM tree로 생성
• CSSOM Tree 생성 : CSS를 CSSOM Tree로 생성
• RenderTree : 화면에 표시되야 할 모든 노트의 컨텐츠, 스타일 정보를 포함하는 트리(meta 태그나 display : none은 렌더링과 관련이 없어 렌더트리에 포함되지 않는다)
• Layout(Reflow) : 박스의 크기나 위치, 배치, 여백, 스타일 속성 계산. %나  em같이 상대속성인 경우에는 뷰포트에 맞춰 픽셀단위로 변환된다.
• Paint(Repaint) : 실제 픽셀로 그려지도록 변환

 

참고
유투브(https://www.youtube.com/watch?v=sJ14cWjrNis)