1. 브라우저
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다. ( 명세는 웹 표준화 기구인 W3C에서 정해짐)
브라우저의 기본 구조
사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 페이지 뷰 이외의 다른 모든 부분
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 - HTML, CSS를 파싱해 요청한 콘텐츠를 표시
통신 - HTTP 요청과 같은 네트워크 호출에 사용됨
UI 백엔드 - 기본적인 위젯(콤보 박스 등)을 그림
자바스크립트 엔진 - 자바스크립트 코드를 해석하고 실행.
자료 저장소 - 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스
2. 렌더링 엔진
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시하는 역할을 한다.
브라우저마다 사용하는 렌더링 엔진이 다름 → 크로스 브라우징 이슈가 발생하곤 한다.
파이어폭스 - 게코(Gecko)
사파리 - 웹킷(Webkit)
크롬 - 블링크(Blink)
2.1 동작 과정
1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성 (Parsing)
브라우저가 렌더링할 문서인 HTML과 CSS를 나눠서 읽는다. 이때 HTML과 CSS는 단순한 텍스트이므로 HTML Parser와 CSS Parser로 각각 연산과 관리가 가능한 Object Model을 만든다.
(여기서 렌더링 엔진은 더 나은 사용자 경험을 위해 가능한 빠르게 내용을 표시하게 만들어졌는데, 따라서 모든 HTML, CSS파싱이 끝나기도 전에 이후의 과정을 수행하여 미리 사용자에게 보여줄 수 있는 내용들을 출력한다.)
2. 렌더 트리 구축 (Attachment)
전 단계에서 DOM 트리와 CSSOM 트리가 생성되면, 이 둘을 연결하여 표시해야 할 순서로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 생성한다.
이는 순수한 요소들의 구조와 텍스트만 존재하는 DOM 트리와 달리 렌더 트리는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다.
display:none; 과 같은 속성이 설정된 노드는 제외된다.
3. 렌더 트리 배치 (Layout or Reflow)
렌더 트리가 생성되면 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 이때 %, vh, vw와 같이 상대적인 위치, 크기 속성은 모두 실제 화면에 그려지는 px단위로 변환된다.
4. 렌더 트리 그리기 (Paint)
Layout 과정이 완료되면 요소들의 위치와 크기, 스타일 계산이 완료된 렌더 트리를 사용해 브라우저는 요소들을 실제 화면에 그리게 된다.
이때 처리해야 하는 스타일이 복잡할 수록 시간이 오래 걸린다.
3. 브라우저의 렌더링 과정 정리
1) 사용자가 브라우저 주소창에 URL 입력한다.
2) DNS 서버가 입력된 도메인 네임을 실제 서버 주소인 IP주소로 바꿔준다.
3) http인지 https인지에 따라 해당 통신 방식으로 서버에 요청한다.
4) 서버의 기본 설정이 대부분 index.html로 되어있어 서버에서 이 파일을 클라이언트로 보내준다.
5) 브라우저는 텍스트로 이루어진 index.html 파일을 html parser로 파싱하여 DOM tree 만든다.
6) 중간에 css파일에 대한 link 태그를 만나면 다시 서버에 요청/응답 과정을 거쳐서 css파일을 가져온다.
7) css parser로 css파일을 파싱하여 CSSOM tree를 만든다.
8) 완성된 DOM tree와 CSSOM tree를 합쳐서 Render 트리를 만든다.
9) 이후 노드를 어느 위치에 얼마나 크게 표기할 건지 계산하는 과정(Layout)을 거쳐 화면에 그린다(Paint).
10) javascript의 경우, html parser가 중간에 script 태그를 만나면 html 파싱을 중단한다.
11) 제어 권한을 자바스크립트 엔진에게 넘기고 javascript 파일을 로드해서 파싱하고 실행한다.
(이는 script 태그에 어떠한 옵션도 쓰이지 않았을 경우에 해당한다. 만약 script 태그에 defer 옵션이 쓰였다면 html 파싱을 중단하지 않고 병렬적으로 js 파일을 받아온다. 그리고 html 파싱이 끝나면 fetch 해둔 js 파일을 실행한다.)
