📌웹개발자라면 한번쯤 고민해봤을 브라우저 렌더링 과정을 더 자세하게 알아보기 위해 여러 자료들을 기반으로 포스팅을 남깁니다.
브라우저의 주요 기능
- 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이며, 이 때 자원은 일반적으로 다른 유형의 콘텐츠(PDF, 이미지 등)일 수 있습니다. 자원의 위치는 URI를 사용하여 사용자가 지정합니다.
- 브라우저는 HTML과 css 명세에 따라 html 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.
브라우저의 기본 구조
사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등을 포함하고 있는 브라우저 상단에 위치한 부분
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
렌더링 엔진
요청받은 자원을 브라우저 화면에 표시하는 작업을 한다.
ex) HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.
통신
HTTP 요청과 같은 네트워크 호출에 사용 (플랫폼의 독립적인 인터페이스로 구성되어있음)
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행
UI 백엔드
콤보 상자와 같은 기본적인 장치를 그리는데 사용하며, 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
자료 저장소
웹 브라우저에서 사용되는 자료 저장 계층으로 우리가 흔히 알고 있는 쿠키와 같은 모든 종류의 데이터를 저장할 수 있다. 브라우저는 localStorage, IndexedDB, WebSQL 및 FileSystem과 같은 저장 저장 메커니즘도 지원한다.
크롬과 같은 브라우저는 각 탭에 하나씩 렌더링 엔진의 여러 인스턴스를 실행한다는 점에서 주목할 만 하며 각 탭은 별도의 프로세스에서 실행된다.
렌더링 엔진
브라우저 화면에 요청된 내용을 표시하는 것으로 기본적으로 HTML 및 XML 문서와 이미지를 표시할 수 있다.
렌더링 엔진 종류
사파리 : 웹킷(Webkit)
크롬 : 블링크(Blinck) 크롬은 웹킷을 사용하다가 블링크 엔진을 자체적으로 개발해서 사용
파이어폭스 : 모질라에서 만든 게코(Gecko)
웹킷은 리눅스에서 동작하기위해 만들어진 오픈소스 엔진인데 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가했다.
동작 과정
-
HTML 문서 파싱 : 렌더링 엔진은 HTML 문서를 파싱하고 DOM 트리와 CSSOM 트리를 만들어내는데 이 두 개를 결합하여 렌더 트리를 만들어냄
-
렌더 트리 구축 : 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는 정해진 순서대로 화면에 표시
-
렌더 트리 배치 : 렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미
-
렌더 트리 그리기 : UI 백엔드에서 실행되며 렌더 트리의 각 노드를 거치며 형상을 만들어내는 과정
동작 과정 예시
-
Webkit Engine 기반
-
Gecko Engine 기반
이미 너무 예전 그림이며 현대에는 더 복잡한 과정을 거친다. 웹킷과 게코가 용어를 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 알 수 있다.
Critical Rendering Path(CRP)
위처럼 브라우저에서 화면이 그려지기까지의 주요 과정을 Critical Rendering Path라고 한다.
- HTML 마크업을 처리하고 DOM 트리를 빌드한다.
- CSS 마크업을 처리하고 CSSOM 트리를 빌드한다.
- DOM 및 CSSOM 을 결합하여 Rendering 트리를 형성한다.
- Rendering 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태(화면의 위치)를 계산한다.(reflow)
- 개별 노드를 화면에 paint한다.
webkit과 gecko, 다른 모든 렌더링 엔진은 이 Critical Rendering Path를 따른다.
HTML 파싱/DOM 트리 빌드
컴파일러는 소스코드를 기계어로 변환한다.
위 그림은 그 변환 과정 중 하나인 파싱 과정이다.
문서는 어휘분석과 구문분석을 통해 트리를 만든다.
- 어휘분석 : 자료를 유효한 토큰으로 분해
- 구문분석 : 언어 구문 규칙에 따라 문서 구조를 분석
브라우저도 마찬가지로 이러한 과정을 거치는데 브라우저는 HTML 문서를 파싱해 DOM Tree를 만든다. 모든 HTML 태그에는 노드가 있고 각각의 노드는 Tree 형태로 구현된다.
HTML 파싱 중 CSS 링크를 만나면 리소스를 받아오며 같은 프로세스로 Tree 형태로 만들어지는데 이를 CSSOM이라고 부른다.
이후 이 두개를 결합해 Render Tree를 만든다.
Render Tree는 Dom Tree에 있는 것 중 실제 보이는 것들로만 구성한다.
예를 들면 CSSOM 트리에 있는 span 태그를 보면 현재 display:none 이라는 스타일이 적용되어 있는데 이 부분이 제외된다는 것이다.
Layout(Reflow)
Render Tree가 만들어진 뒤 기기의 viewport를 기준으로 노드들의 정확한 위치와 크기를 계산하는 과정이다. 위치와 관련된 속성들을 계산한다.
Paint
실제 웹페이지를 화면에 그리는 작업이다. Render Tree의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계로 이 단계를 흔히 painting 또는 rasterizing이라고 부른다
javascript & css HTML parsing
HTML 파싱 과정에서 script나 css를 만난 경우 어떻게 처리될까?
-
script
스크립트의 경우 기본적으로 html 파싱을 중단(block)시킨다. 그 이유는 js 엔진으로 제어 권한을 넘기기 때문이다. 이러한 이유로 인해 script 파일은 body 태그 끝에 두는 것을 권장하였으나 HTML4에서 defer HTML5에서 async라는 옵션이 추가되었기에 위치는 큰 영향을 받지 않는것으로 보인다 -
css
이론적으로 css는 DOM Tree를 수정하지 않기 때문에 중단시키지 않지만 script가 css정보를 이용해야 하는 경우가 있다. 이 경우 브라우저 엔진이 최적화 작업을 진행하여 문제가 될 경우에만 block 한다.
참고자료
How Browsers Work: Behind the scenes of modern web browsers
Naver D2 - 브라우저는 어떻게 작동하는가?
Render-tree Construction, Layout, and Paint
웹 브라우저의 작동 원리
웹 브라우저의 렌더링 프로세스
