📌 브라우저의 핵심 기능
필요한 리소스(HTML, CSS, JS, 정적파일, 서버가 동적으로 생성한 데이터...)를 서버에 요청하고 응답받아 시각적으로 렌더링하는 것.
💡 [브라우저 주소창]이 서버 요청 통로.
주소창에 URL을 입력 -> URL 호스트 이름이 DNS를 통해 IP주소로 변환 -> 해당 IP주소를 갖는 서버에 요청
📌 브라우저의 구조
.png)
| 브라우저 구조 | 설명 |
|---|---|
| 사용자 인터페이스 | 주소표시줄, 북마크 메뉴 등 요청한 페이지를 보여주는 창 제외한 나머지 부분 |
| 브라우저 엔진 | 사용자 인터페이스와 렌더링 엔진 사이 동작 제어 |
| 렌더링엔진 | 요청한 콘텐츠 표시 |
| 통신 | 네트워크 호출 |
| UI 백엔드 | 창, 콤보박스와 같은 기본적인 장치를 그림. |
| 자바스크립트 인터프리터 | 자바스크립트 해석 및 실행 |
| 자료 저장소 | 자료 저장 |
📌 브라우저의 렌더링 과정
1. 브라우저는 HTML, CSS, JS, 이미지나 폰트 등의 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음
2. 브라우저의 렌더링 엔진은 서버로부터 받아온 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이를 결합해 '렌더 트리'를 생성.
💡 렌더링 엔진은 HTML을 순차적으로 파싱하여 DOM을 생성하다가 CSS를 로드하는 link, style 태그를 만나면 DOM 생성을 일시 중단하고 CSSOM 생성하고, 이를 마친 뒤 중단지점부터 다시 DOM 생성 재개.
cf. 파싱과정: 바이트-> 문자-> 토큰-> 노드-> DOM/CSSOM
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 JS를 파싱해 AST를 생성하고 바이트코드로 변환해 실행. JS는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음.
💡 렌더트리(render tree): 브라우저 화면에 렌더링되는 노드로만 구성된 트리 구조의 자료구조 (meta, script tag, CSS에 의해 표시되지 않는 (display:none...) 노드는 제외)
💡 자바스크립트의 파싱과 실행은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
4. 렌더트리를 기반으로 HTML요소의 레이아웃을 계산하고, 브라우저 화면에 HTML 페인팅.
💡 브라우저 렌더링 과정은 이러한 경우에 반복 실행해요!
- JS에 의한 노드 추가 및 삭제
- 브라우저 창 리사이징에 의한 뷰포트 크기 변경
- HTML 요소의 레이아웃 스타일 변경
-> 리렌더링은 성능 저하를 일으키므로 주의
📌 참고 자료
📚 도서: 모던 자바스크립트 DEEP DIVE
💡 네이버 D2 브라우저는 어떻게 동작하는가?
https://d2.naver.com/helloworld/59361
💡 "How Browsers Work: Behind the scenes of modern web browsers" https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
