브라우저의 랜더링에 대해 자세히 알아보자

목차

 

브라우저의 정의

웹상에 존재하는 페이지들의 HTML 언어를 해석해서 사용자의 컴퓨터 화면에 출력해 주는 프로그램

그렇다면 웹브라우저의 구조는 어떻게 되어있을까?

 

다음그림을 통해 쉽게 구조를 볼 수 있다.

 

 

 

 

 

 

• 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
• 렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
• 통 신: HTTP요청과 같은 네트워크 호출에 사용됨
• JS 엔진: 자바스크립트 코드를 해석하고 실행
• UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림
• 자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스

그 중 우리가 자세히 살펴볼 내용은 렌더링 엔진이다.

 

랜더링 엔진의 동작 과정

 

랜더링 엔진의 기본적인 동작 과정이다.

이제 순차적으로 살펴보자

 

DOM(Document Object Model)-> CSSOM(CSS Object Model) 생성 (Parsing)

트리는 위와 같이 Cssom와 Dom이 합쳐져 생성된다.

 

CSS파싱과 CSSOM 생성 과정

렌더링 엔진은 HTML문서를 한줄 한줄 순차적으로 파싱하며 DOM을 생성한다. 그러다 CSS를 로드하는 link태그 혹은 style태그를 만나면 DOM생성을 중지한 후 CSS파싱의 결과물인 CSSOM을 생성하는 과정을 진행한다.

 

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

 

자바스크립트 파싱 과정

렌더링 엔진은 HTML 문서를 한 줄씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 css와 같이 DOM 생성을 일시 중단한다.

script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다.

 

 

랜더 트리 구축

 

DOM과 CSSOM을 결합하여 렌더트리 생성

렌더 트리를 생성하려면 브라우저는 대략 3가지 작업을 수행한다.

• DOM 트리의 루트부터 노드 각각을 모두 탐색한다.
  • 이 때 화면에 표시되지 않는 일부 노드들(script, meta 태그 등..)은 렌더 트리에서 제외된다.
  • 또한 CSS 속성 중 display:none 같이 화면에서 숨겨지는 속성도 렌더 트리에 반영되지 않는다.
• 화면에 표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.
• 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 렌더트리로 생성된다.

 

렌더 트리 배치 (Layout or Reflow)

렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산한다. 이때 모든 상대적인 값이 픽셀값으로 변환된다. CSS에 상대적인 값인 %,rem,vh으로 할당된 값들은 절대적인 값인 px단위로 변환 된다. 이 과정을 배치(Layout) 또는 Reflow 라고 한다.

 

 

렌더 트리 그리기 (Paint)

렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 Painting메서드가 호출된다. Painting 과정 후 브라우저 화면에 UI가 나타나게 된다.

 

1. 배경 색
2. 배경 이미지
3. 테두리
4. 자식
5. 아웃라인

 

랜더링 이후의 동적인 변경 (Reflow, Repaint)

개발자의 의도에 따라 어떤 노드에 무엇을 추가하고, 어떤 요소에는 스타일이 달라지기도 한다.

이때 동적인 변경이 일어나게 된다.

 

Reflow

JS, CSS 파싱 → 렌더 트리 구축 → 레이아웃 → 리페인트 → 레이어 업데이트 → 합성

 

Repaint

JS, CSS 파싱 → 렌더 트리 구축 → 리페인트 → 레이어 업데이트 → 합성

 

Reflow가 일어나는 대표적인 경우는 다음과 같다.

• DOM 노드의 추가, 제거
• DOM 노드의 위치 변경
• DOM 노드의 크기 변경(margin, padding, border, width, height 등..)
• CSS3 애니메이션과 트랜지션
• 폰트 변경, 텍스트 내용 변경
• 이미지 크기 변경
• offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청
• 페이지 초기 렌더링
• 윈도우 리사이징

 

다음에는 랜더링 개선을 위한 virtual dom으로 오겠습니다..