웹 브라우저 렌더링 과정

브라우저란?

• 웹 서버에서 이동하며(navigate) 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 (출처 : 위키백과-웹_브라우저)
• 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램 (출처 : mdn web docs-Browser)
• 페이지에 접속하기 위해 사용하는 도구
• 크롬(Chrome), 사파리(Safari), 엣지(Edge) 등

브라우저 작동 원리

출처)NAVER D2- 브라우저는 어떻게 동작하는가?
출처2) 스무디 한 잔 마시며 끝내는 리액트 + TDD

브라우저의 기본 구조

• 사용자 인터페이스 : 페이지 창을 제외한 모든 부분(주소 표시줄 등)
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
• 렌더링 엔진 : 요청한 컨텐츠를 표시한다. HTML, CSS등을 파싱하여 화면에 표시한다.
• 통신 : HTTP 등의 네트워크 호출에 사용된다.
• UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그린다. OS 사용자 인터페이스 체계를 사용한다.
• 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행한다.
• 자료 저장소 : 자료를 저장한다.

렌더링 엔진

• 요청받은 내용을 브라우저 화면에 표시한다.

기본적인 렌더링 엔진의 동작 과정
1. HTML 파싱
2. '컨텐츠 트리' 내부에서 태그를 DOM 노드로 변환
3. 외부 CSS파일, 인라인 스타일 요소 파싱
4. 스타일 정보와 HTML 표시 규칙을 '렌더 트리'라는 트리로 생성
5. 렌더 트리 배치 : 각 노드가 화면의 정확한 위치에 표시된다.
6. UI백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 그려낸다.

위 과정들은 순서대로 이루어지는 것이 아닌, 점진적으로 진행된다. 남은 HTML 내용을 기다리는 동안 먼저 도착한 내용을 화면에 표시한다.

→ 크롬은 렌더링 엔진으로 웹킷을 사용한다. 위 사진은 웹킷의 동작 과정이다.

1. 브라우저는 네트워크를 통해 HTML을 전달받는다.
2. 브라우저의 렌더 엔진이 HTML을 파싱하여 DOM Node로 이루어진 트리를 만든다.
   +브라우저의 렌더 엔진이 CSS 파일과 인라인 스타일을 파싱하여 스타일 렌더 트리를 만든다.
3. 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산한다.

• 렌더 트리의 모든 노드는 attach라는 메소드를 가지고 있다. Attachment과정에서 이 메소드를 호출하고, attach메소드는 스타일 정보를 계산하고 결과값을 객체로 반환한다.
• 3번의 과정은 동기적으로 작동한다. 렌더트리에 새 노드가 추가되면 해당 노드의 attach 메소드가 실행된다.

4. 배치 : 브라우저가 렌더 트리의 각 노드에 좌표를 부여하여 어디에 표시되는지 결정한다.
5. 그리기 : 브라우저는 각 노드의 paint() 메소드를 호출한다.
6. 최종 화면 표시!

자바스크립트 DOM 조작

• 렌더링이 완료된 후 자바스크립트로 DOM조작을 하게 되면?
  → 배치 과정이 다시 실행된다. (Reflow과정)
  → Reflow 과정이 끝나면 다시 그리기 과정을 수행한다.(Repaint 과정)
  ⇒ Reflow와 Repaint는 각 노드에 대해서 많은 연산을 하게 된다. 이 과정을 많이 수행하게 되면 웹 서비스의 성능에 문제가 생기게 된다.