브라우저는 어떻게 동작하는가?
1. 브라우저의 주요 기능
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
자원은 보통 HTML 문서이지만, PDF나 이미지 또는 다른 형태일 수 있다.
자원의 주소는 URL(Uniform Resource Identifier) 에 의해 정해진다.
브라우저는 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C 에서 정한다.
브라우저의 사용자 인터페이스의 요소
- URL을 입력할 수 있는 주소표시 줄
- 이전버튼과 다음버튼
- 북마크
- 새로고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
2. 브라우저의 기본 구조
1) 사용자 인터페이스
주소표시줄, 이전/다음버튼, 북마크 메뉴 등을 말함. 요청한 페이지를 보여주는 창을 제외한 나머지 모든부분이다.
2) 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동잘을 제어
3) 렌더링 엔진
요청한 콘텐츠를 표시. 예) HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4) 통신
HTTP 요청과 같은 네트워크 호출에 사용된다. 이것은 독립적인 인터페이스이고, 각 플랫폼 하부에서 실행된다.
5) UI 백엔드
콤보박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS. 사용자 인터페이스체계를 사용함.
6) 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행
7) 자료 저장소
자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다.
HTML5명세에는 브라우저가 지원하는 '웹 데이터 베이스' 가 정의되어 있다.
3. 랜더링 엔진
랜더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일이다.
랜더링 엔진은 HTML 및 XML문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
- 랜더링 엔진들
모질라에서 직접 만든 게코(Gecko)엔진과 웹킷(Webkit)엔진이 있다.
- 랜더링 동작 과정
렌더링 엔진은 HTML문서를 파싱(parsing)하고 "콘텐츠 트리" 내부에서 태그를 DOM노드로 변환한다.
그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다.
스타일 정보와 HTML 표시 규칙은 "렌더 트리" 라고 부르는 또 다른 트리를 생성한다.
렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.
렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다.
일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요하다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.
(동작과정 예시)
- 파싱 일반
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
파싱 결과는 보통 문서 구조를 나타내는 노드트리인데, 파싱 트리(parse tree)또는 문법 트리(syntax tree)라고 부른다.
4. DOM(Document Object Model), CSSOM(CSS Object Model) 생성 (Parsing)
HTML 을 파싱하여 DOM 노드를 만든다. 이 DOM 노드들을 병합하여 DOM 트리를 만든다.
CSS를 파싱하여, CSSOM(CSS Object Model)트리를 만들게 된다.
브라우저는 렌더링 할 문서를 HTML과 CSS로 나눠서 읽게 된다. 이때 HTML과 CSS는 단순한 텍스트이므로 각각 연산과 관리가 가능하도록 HTML Parser와 CSS Parser를 사용해 관리가 가능한 Object Model로 만든다.
5. 자바스크립트 파싱 과정
렌더링 엔진은 HTML 문서를 한 줄 씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM.생성을 일시 중단한다.
script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면
자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다.
자바스크립트 파싱이 끝나면 렌더링 엔진으로 다시 제어권을 넘기고 DOM 생성을 이어나간다.
만약 생성되지 않은 DOM을 조작한다면 에러가 발생할 수 있다. 따라서 body 요소 아래에 자바스크립트를 위치 시키거나 DOM 생성이 완료된 시점에 자바스크립트가 실행되도록 한다.
6. 렌더 트리 구축(Attachment)
CSSOM 트리와 DOM 트리를 결합하여, 표시해야 할 순서로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 형성한다.
이 과정을 Attachment라고 한다.
랜더 트리는 화면에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용되고 픽셀을 화면에 그리는 페인트 과정에도 사용된다.
< 랜더 트리를 생성하기 위해 브라우저는 3가지의 작업을 수행한다. >
1) DOM트리의 루트부터 노드 각각을 모두 탐색한다.
이때, 화면에 표시되지 않는 일부 노드들(script, meta태그 등)은 렌더 트리에서 제외된다.
또한 CSS 속성 중 display:none 같이 화면에서 숨겨지는 속성도 렌더 트리에 반영되지 않는다.
2) 화면에 표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.
3) 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 렌더트리로 생성된다.
7. 렌더 트리 배치
렌더 트리가 생성되고, 기기의 뷰 포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산한다.
이때, 모든 상대적인 값이 픽셀값으로 변환된다. CSS에 상대적인 값인 %,rem,vh 으로 할당된 값들은 절대적인 값인 px단위로 변환된다.
이 과정을 배치(Layout) 또는 Reflow 라고 한다.
8. 렌더 트리 그리기
렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 Painting메서드가 호출된다. Painting 과정 후 브라우저 화면에 UI가 나타나게 된다.
- 그리기 순서
실제로 요소가 stacking contexts에 쌓이는 순서는 아래와 같다. 스택은 뒤에서 앞으로 그려지기때문에 이 순서는 painting에 영향을 미친다. 블록 렌더러가 쌓이는 순서는 다음과 같다.
1) 배경 색
2) 배경 이미지
3) 테두리
4) 자식
5) 아웃라인
페인트 단계에서 메인 스레드는 페인트기록을 생성하기 위해 레이아웃 트리를 순회한다. 페인트 기록은
' 배경 먼저, 다음은 텍스트, 그리고 직사각형 ' 과 같이 페인팅 과정을 기록한 것이다.
javascript로 canvas 요소에 그림을 그리는 과정과 비슷하다.
-동적 변경
브라우저는 변경에 대해 가능한 한 최소한의 동작으로 반응하려고 노력한다.
요소의 위치가 바뀌면 요소와 자식 그리고 형제의 리페인팅과 재배치가 발생한다.
DOM 노드를 추가하면 노드의 리페인팅과 재 배치가 발생한다.
9. Reflow와 Repaint
렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려진다.
하지만 특정 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등의 레이아웃 수치가 변하면
해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow) 과정을 다시 수행하게 된다.
이럴 경우 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow,
그리고 Reflow 된 렌더 트리를 다시 화면에 그려주는 과정을 Repaint 라고 한다.
[ 요약 ]
사용자가 브라우저로 웹사이트 접속
-> DNS를 통해 서버의 아이피 주소를 파악
-> 브라우저와 서버가 3Way Handshake
-> 브라우저가 서버에게 HTTP Request
-> 브라우저가 서버로부터 HTTP Response
-> HTML Parsing하여 DOM Tree 생성
-> 스타일 태그가 나오면 CSSOM Tree 생성
-> 스크립트 태그가 나오면 AST 생성 후 실행
-> DOM+CSSOM = Render Tree 생성
-> Render Tree에 있는 Node를 배치
-> Render Tree에 있는 Node의 UI를 그림
-> Render Tree에 있는 Node 를 순서대로 구성
-> 웹 사용자에게 결과 화면을 출력
[ 참고 ]
웹 브라우저의 동작원리를 알아보자
인터넷 익스플로러, 멈춰!
velog.io