브라우저의 렌더링 과정을 알아보자.

목차
1. 브라우저란 무엇일까?
2. 렌더링이란 무엇일까?
3. 렌더링 순서를 알아보자.
4. 보너스

 

브라우저란 무엇일까?

브라우저 렌더링 과정을 알아보기 전에 브라우저가 무엇인지 먼저 알아보자.

우선 브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Internet Explorer 등을 말한다.

브라우저는 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들을 렌더링 과정을 통해 유저에게 보여주게 된다.

 

Bhark 블로그의 모든 이미지는 직접 제작한 것 입니다!

 

렌더링이란 무엇일까?

렌더링이란 서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 것이다.

브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링엔진을 가지고 있다, Chrom은 블링크, Safari는 웹킷 등 렌더링 엔진을 사용한다.

 

렌더링 순서를 알아보자.

사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드 받는다. 브라우저가 페이지를 렌더링 하려면 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야한다.

 

DOM 트리 생성 과정

1. 변환 : 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩에 따라 개별 문자로 변환한다.
2. 토큰화 : 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환한다.
3. 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환된다.
4. DOM 생성 : HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결된다.

CSSOM 트리 생성 과정

HTML 마크업 내에 직접 스타일을 선언할 수도 있지만, head 태그에 외부 css 파일을 참조하거나, head 태그에 style 태그를 정의할 수 있다. HTML과 마찬가지로 외부 css 파일에 정의된 스타일과 style 태그에 작성된 스타일을 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 한다.

DOM 트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성한다.

이런 과정을 거쳐서 마직막으로 CSSOM이라는 트리 구조가 생성된다.

 

 

렌더링 트리 생성 과정

DOM 트리와 CSSOM 트리가 만들어지면, 이 둘을 결합해서 랜더링 트리를 생성한다. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다.

 

레이아웃 단계

레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡쳐하는 Box 모델이 출력된다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다.

 

그리기 단계

마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 된다. 레이아웃 단계에서 모든 계산이 완료가 되면, 화면에 요소들을 그리게 된다. 이 단계를 "페인팅" 또는 "래스터화" 라고 한다.

이미 레이아웃 단계에서 각 노드들이 위치, 크기, 색상 등 스타일이 모두 계산이 되었기 때문에 화면에 실제 픽셀로 변환하게 된다.

 

⭐보너스⭐

브라우저의 기본 구조

1. 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
3. 렌더링 엔진 : 요청한 콘텐츠를 표시 (HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시)
4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용 (플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨)
5. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
6. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
7. 자료 저장소 : 자료를 저장하는 계층, 쿠키를 저장하는 것과 같이 모든 종류의 자원을 지원하는 '웹 데이터 베이스' 가 정의되어 있음

이것도 PPTㅎㅎ

 

렌더링 엔진의 동작 과정

1. HTML 문서를 파싱
2. 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환
3. 외부 CSS 파일, 함께 포함된 스타일 요소 파싱
4. 스타일 정보와 HTML 표시 규칙으로 렌더 트리라고 부르는 또 다른 트리 생성

🔍 파싱

파싱이란 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 노드 트리이며 파싱 트리 또는 문법 트리라고 불리운다.

1. HTML 파서 : HTML 마크업을 파싱 트리로 변환
2. CSS 파싱 : HTML과는 다르게 CSS는 문맥 자유 문법이고 소개 글에서 설명했던 파서 유형을 이용하여 파싱이 가능