1. 브라우저(Browser)란?
- 특정 웹 사이트에 접속하기 위해 접속할 수 있는 도구를 '브라우저' 혹은 '웹 브라우저'라고 한다.
브라우저 주요 기능
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
- 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 해석한다.
- 해석된 문서는 브라우저 랜더링 엔진에 따라 브라우저에 사용자가 볼 수 있도록 하며 브라우저별로 그리는 방식이 다르다.
- Chrome, Safari -> 웹킷(webkit)
- Firefox -> 게코(Gecko)
- Webkit 동작 과정
- Gecko 동작 과정
2. 브라우저 주요 구성요소
-
사용자 인터페이스 (User Interface)
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.
요청한 페이지를 보여주는 창을 제외한 나머지 모근 부분이다.- URL를 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
-
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. -
랜더링 엔진
요청한 콘텐츠를 표시한다.
예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다. -
통신 (Networking)
HTTP 요청과 같은 네트워크 호출에 사용된다.
이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다. -
자바스크립트 해석기 (Javascript)
자바스크립트 코드를 해석하고 실행한다. -
UI 백엔드 (UI Backend)
콤보 박스와 창 같은 기본적인 장치를 그린다.
플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다. -
자료 저장소 (Data Store)
이 부분은 자료를 저장하는 계층이다.
쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
3. 렌더링 엔진
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
- 렌더링 엔진의 동작 과정
1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
브라우저는 서버로부터 HTML, CSS 문서를 다운받는다.
HTML, CSS는 단순한 텍스트 파일이므로 연산과 관리가 유리하도록 Object Model로 만든다.
HTML, CSS 파일은 각각 DOM Tree와 CSSDOM으로 만들어진다.
-
DOM
-
CSSOM
2. Render Tree 생성
DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다.
순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표시되는 노드들로만 구성된다.
3. Layout
브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다.
- 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라 브라우저 화면의 어느 위치에 어느 크기로 출력될 지 계산하는 단계한다.
- Layout 단계를 통해 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 pixel 단위로 변환한다.
4. Paint
이전 단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 픽셀 값을 채워넣는다.
- 처리해야 하는 스타일이 복잡할수록, Paint 단계에 소요되는 시간이 늘어나게 된다.
5. Reflow (Layout 다시 수행)
어떠한 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 요소나 부모 요소를 포함하여 Layout 과정을 다시 수행한다.
6. Repaint (Paint 다시 수행)
Reflow만 수행되면 실제 화면에 반영되지는 않는데, Paint를 다시 수행해주는 이 과정을 Repaint라고 한다.
하지만 무조건 Reflow가 일어나야 Repaint가 일어나는건 아니다.
- background-color, visibility와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow(계산)를 수행할 필요가 없기 때문에 Repaintaks 수행한다.
Reference
https://d2.naver.com/helloworld/59361
https://fz7948.tistory.com/59
