브라우저 렌더링 과정

티스토리 뷰

🙋‍♀️ 기술면접 대비

브라우저 렌더링 과정

2022. 9. 26. 18:02

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

자원은 보통 HTML문서이고, (PDF나 이미지 등 다른 형태일 수도 있음)

자원의 주소는 URI (Uniform Resource Identifier)에 의해 결정된다.

브라우저의 기본 구조

[이미지 출처] Naver D2, https://d2.naver.com/helloworld/59361

사용자 인터페이스	요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. (주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)

브라우저 엔진	사용자 인터페이스와 렌더링 엔진 사이의 동작 제어.

렌더링 엔진	요청한 콘텐츠를 브라우저 화면에 표시. (ex. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시)

통신	HTTP요청과 같은 네트워크 호출에 사용. 독립적인 인터페이스로 각 플랫폼 하부에서 실행.

자바스크립트 해석기	자바스크립트 코드를 해석하고 실행

UI 백엔드	콤보박스, 창 같은 기본적은 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서 OS 사용자 인터페이스 체계를 사용.

자료 저장소	자료를 저장하는 계층. 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음.

렌더링 엔진 동작 과정

간단하게 살펴보면, 아래와 같은 과정으로 요약할 수 있다.

DOM Tree 구축, CSSOM Tree 구축 → 렌더 트리 구축 → 렌더 트리 배치 → 렌더 트리 그리기

HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 각각 DOM 트리, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저가 웹페이지를 표시한다.

이미지 출처 : https://m.post.naver.com/viewer/postView.nhn?volumeNo=8431285&memberNo=34176766

이미지 출처 : PoiemaWeb, https://poiemaweb.com/js-browser

각 단계에서의 자세한 과정을 한번 살펴보자.

1) 주소창에 주소를 입력하면 해당 서버에 요청을 보내고 서버는 응답으로 HTML 데이터를 내려준다.

2) 응답받은 HTML 문서를 렌더링 엔진의 HTML parser가 파싱하여 DOM Tree를 빌드한다.

→ HTML 바이트 데이터를 해당 파일에 지정된 인코딩에 따라 문자열로 변환

→ 변환된 문자열을 다시 읽어서 HTML 표준에 따라 문자열을 토큰으로 변환

→ 토큰들을 다시 노드로 변환. 이 과정이 끝나면 Tree 모양의 DOM이 완성

3) HTML을 파싱하는 중에 CSS파일 링크를 만나면 CSS파일을 요청해서 받아온다. 렌더링 엔진의 CSS parser가 CSS를 파싱하여 CSSOM Tree를 빌드한다.

- 받아온 CSS 파일을 Tree 형태의 CSSOM으로 만든다.

- CSS 파싱은 자식 노드들이 부모 노드의 특성을 이어받는(cascading) 규칙이 있다는 걸 제외하고는 HTML 파싱과 유사하게 진행된다.

4) DOM과 CSSOM을 결합하여 렌더 트리를 형성한다. 랜더 트리는 색상 또는 면적 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.

- DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다. 이 구성요소를 형상(파이어폭스) 또는 랜더 객체(웹킷)라고 부른다. 렌더 객체는 자신과 자식요소를 어떻게 배치하고 그려내야할지 알고 있다.

- html 태그와 body 태그를 처리함으로써 렌더 트리 루트를 구성한다.

- 루트 랜더 객체는 CSS 명세에서 포함 블록(다른 모든 블록을 포함하는 최상위 블록)과 일치한다. 이것을 ViewPortFrame(파이어폭스) 또는 RenderView(웹킷)라 부르는데 이것이 문서가 가리키는 렌더 객체이다. - 랜더 트리의 나머지 부분은 DOM 노드를 추가함으로써 구축된다. (웹킷에서는 DOM 트리에 노드를 추가하면 동기적으로 새 노드의 attach 메서드를 호출하여 스타일을 결정하고 랜더 객체를 만든다)

- 렌더 객체는 DOM 요소에 부합하지만 1:1 대응관계는 아니다. (ex. head 요소와 같은 비시각적 DOM요소는 렌더 트리에 추가되지 않음. display: none인 요소도 렌더 트리에 나타나지 않음)

5) 렌더 트리 생성이 끝나면 렌더 트리에 있는 각 노드들이 화면의 정확한 위치에 표시되도록 배치가 시작된다. (Layout)

- 랜더 객체가 생성되어 트리에 추가될 때 크기와 위치 정보가 없는데 이런 값을 계산하는 것이 layout 또는 reflow라고 한다.

- 배치는 반복되면 HTML문서의 <html> 요소에 해당하는 최상위 렌더 객체에서 시작한다. (최상위 렌더 객체의 위치는 0,0이고 브라우저 창이 보이는 영역에 해당하는 뷰포트 만큼의 면적을 갖음)

- 프레임 계층의 일부 또는 전부를 통해 반복되고 각 렌더 객체에 필요한 크기와 위치 정보를 계산한다.

- 모든 랜더 객체는 layout 또는 reflow 메서드를 갖는데 각 렌더 객체는 배치해야할 자식의 배치 메서드를 불러온다.

6) UI 백엔드에서 랜더 트리와 각 노드를 가로지르며 형상을 만들어낸다. (Paint)

- 그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더 객체의 paint 메서드가 호출된다.

- 그리기는 UI기반의 구성요소를 사용한다.

위 일련의 과정들은 점진적으로 진행된다. 렌더링 엔진은 더 나은 사용자 경험을 위해 가능한 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

(네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시)

❓ DOM (Document Object Model)

- HTML문서의 객체 표현.

- HTML, XML문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스.

DOM과 마크업은 1:1 관계를 맺는다.

<html>
    <body>
    <p>Hello World</p>
    <div><img src="example.png" /></div>
    </body>
</html>

위 마크업은 아래와 같은 DOM 트리로 변환할 수 있다.

💡 연관 질문

홈페이지가 사용자에게 보이는 순서에 대해?

사용자가 주소창에 URL을 입력하면 해당 서버에 요청을 보내고 서버는 응답으로 HTML 데이터를 전달한다.

렌더링 엔진이 이 HTML을 파싱하여 DOM 트리를 구축하고, 중간에 CSS 파일 링크를 만나면 CSS 파일을 요청하여 받아와 CSS를 파싱하여 CSSOM 트리를 구축한다. DOM과 CSSOM을 결합하여 랜더 트리를 만든다. 랜더 트리에 있는 각 노드들이 화면의 어디에 어떻게 위치할 것인지 계산하는 layout(또는 reflow) 과정을 거쳐 실제 화면에 그리는(paint) 단계로 진행된다.

💡 연관 질문

HTML이 렌더링 중에 자바스크립트가 실행되면 랜더링이 멈추는 이유?

브라우저는 동기적으로 HTML, CSS, Javascript를 처리하기 때문에 script 태그의 위치에 따라 블로킹이 발생하여 DOM 생성이 지연될 수 있다. (웹은 파싱과 실행이 동시에 수행되는 동기화 모델)

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리하는데 HTML 파서는 script태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에게 제어 권한을 넘긴다.

제어 권한을 넘겨 받은 자바스크립트 엔진은 script태그 내의 자바스크립트 또는 script태그의 src 속성에 정의된 js파일을 로드하고 파싱하여 실행한다. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다. (자바스크립트로 DOM을 변형할 수 있기때문에 자바스크립트를 우선 파싱해서 실행 완료 후 DOM 생성을 재개)

💡 연관 질문