[Internet] 브라우저, 동작방식

_ne·2022년 8월 11일

🌎 브라우저(Browser)

브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고,
서버의 응답을 받아 브라우저에 보여주는 것이다.
흔히 사용하는 크롬, 인터넷 익스플로러 등 인터넷 프로그램이다.
서버의 응답은 주소를 통해 요청하는데
이 주소를 URI(Uniform Resource Identifier)라고 한다.

☄️ 브라우저 기본구조

✨ 각 구성 요소는 다음과 같은 역할을 하고 있다. 물론 구조는 브라우저마다 조금씩 다를 수 있다.

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

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하는 것이 주목할만하다. 각 탭은 독립된 프로세스로 처리된다.

🌟 렌더링엔진

렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시해주는 역할을 한다. 
브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에,
모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고
엔진마다 읽을 수 있는 코드의 버전도 다르기 때문에 크로스 브라우징 이슈가 발생하곤 한다.

파이어폭스는 게코(Gecko), 사파리는 웹킷(Webkit), 
크롬의 경우 웹킷을 사용하다가 웹킷을 Fork하여 블링크 엔진을 자체적으로 구현하여 사용한다.

💡 렌더링엔진 동작 과정

웹킷 엔진을 기준으로 좀 더 자세히 알아보자.

1. Dom,CSSOM 생성

> HTML을 파싱하여 DOM 노드를 만든다. 이 DOM 노드들을 병합하여 DOM 트리를 만든다.
> CSS를 파싱하여, CSSOM(CSS Object Model) 트리를 만들게 된다.

브라우저는 렌더링 할 문서를 HTML과 CSS로 나눠서 읽게 된다.
이때 HTML과 CSS는 단순한 텍스트이므로 각각 연산과 관리가 가능하도록
HTML Parser와 CSS Parser를 사용해 관리가 가능한 Object Model로 만든다.

2. 렌더 트리 구축 (Attachment)

> DOM트리가 웹 상에 나타날 내용을 구성한다면
  렌더트리는 시각적요소, 어떻게 나타날지 그 스타일을 지정합니다.

HTML 문서들을 파싱하여 Dom Tree를 구성한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리를 만듭니다.

3. 렌더 트리 배치 (Layout or Reflow)

> 레이아웃을 만든다는것은 각 노드들에게 스크린의 어느 공간에 위치해야 할지 
각각의 값(position,size)을 부여하는 것을 의미합니다.

렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산합니다.

4. 렌더 트리 그리기 (Paint)

> 렌더트리가 만들어져 레이아웃이 구성되면 UI 백엔드가 동작하여 각 노드들을
정해진 스타일 및 위치값으로 화면에 배치합니다.

🎨 Reflow와 Repaint

렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려진다. 하지만 특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow)과정을 다시 수행하게 된다.

이럴경우 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow,
그리고 Reflow 된 렌더 트리를 다시 화면에 그려주는 과정을 Repaint라고 한다.

Repaint

화면의 구조가 변경되었을 때에는 Reflow와 Repaint 모두 발생하지만
화면의 구조가 변경되지 않는 화면 변화의 경우 Repaint만 발생한다.
예를 들면 opacity, background-color, visibility, outline 등의 스타일 변경 시에는 Repaint만 동작한다.

Reflow

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

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

이외에도 화면의 구조가 변경되었다면 Reflow가 발생한다고 이해하면 된다.

🔧 정리

브라우저가 더 렌더링을 빠르고 효율적으로 할 수 있게 개발하기 위해서는 Reflow과정을 최소화 시키는 것이 좋다. Reflow가 발생하면 Repaint가 일어나기 때문에 렌더링 최적화에 좋지 않은 영향을 준다. 따라서 Reflow를 최소화 하는 고민을 하면서 프론트개발을 한다면 웹 브라우저의 렌더링 과정을 조금 더 최적화 할 수 있겠다.