브라우저 렌더링 과정

웹 브라우저?

브라우저 렌더링 과정

 

하나의 웹 페이지를 보여주기 위해 브라우저는 꽤 많은 일을 처리한다. 

 

 

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

 

 

---

렌더링 엔진의 목표?

 

• HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
• 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다.

 

HTML파일 브라우저에서 읽게 된다. 브라우저는 body 태그, section 태그, 각각의 태그들을 분석해서 이것을 Node로 변환하게 된다. 

 

---

[렌더링 엔진의 동작 과정]

 

브라우저가 서버에 HTML 파일 요청하면?

DOM Tree, CSSOM Tree 생성 -> Render Tree 생성 -> Render Tree 배치(Layout(Reflow))-> Render Tree 그리기(Paint(Repaint))

 

[DOM Tree와 CSSOM Tree의 생성]

 

브라우저에서 사용자가 요청한 웹 페이지 문서를 불러오고 파싱을 한다. 

코드가 토큰화된다.