[TIL] 브라우저의 동작 방식 및 렌더링 원리

브라우저

: 웹페이지, 이미지. 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어
: 주로 사용하는 브라우저에는 크롬, 사파리, 엣지, 파이어폭스 등이 있다.
: 브라우저는 웹 표준화 기구인 W3C에서 정한 Html, Css 명세에 따라 Html 파일을 해석해서 표시한다.

 

1. 웹 브라우저와 웹 서버의 통신 과정

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 서버로부터 받은 응답(Html, Css, Javascript, 이미지 등)을 브라우저에 표현하는 것이다.

웹 브라우저에서 URL을 입력하면 웹 서버가 웹 브라우저에 웹 페이지를 제공해 준다.

이때 웹 브라우저와 웹 서버는 서로 다른 곳에 위치해 있기 때문에 웹 서버가 실행 중인 컴퓨터의 주소인 IP주소를 통해 웹 브라우저가 웹 서버에 연결할 수 있다. 하지만 이러한 IP주소는 사람이 기억하기 쉽지 않기 때문에 도메인 이름을 사용하고 있다.

따라서 우리가 웹 브라우저에서 URL을 입력하면 해당 도메인 이름에 해당하는 IP주소로 변환하기 위해 DNS에 요청하여 IP주소를 응답받고 해당 IP주소로 웹 서버에 연결하게 되어 요청받은 웹페이지를 제공해 준다.

- 웹 브라우저에서 URL을 입력하여 웹 서버에 웹페이지 요청
- DNS에 도메인 이름에 해당하는 IP주소로 변환 요청
- DNS를 통해 응답받은 해당 IP주소로 웹 서버에 연결
- 웹 서버는 URL에 해당하는 웹 페이지를 웹 브라우저에 제공

 

2. 브라우저의 기본 구조

• 사용자 인터페이스

: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

 

• 브라우저 엔진

: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

• 렌더링 엔진

: 요청한 콘텐츠를 표시
: HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시

• 통신

: HTTP 요청과 같은 네트워크 호출에 사용됨
: 플랫폼 독립적인 인터페이스로 각 플랫폼 하부에서 실행됨

• UI 백엔드

: 콤보 박스와 창 같은 기본적인 장치를 그림.
: 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

• 자바스크립트 해석기

: 자바스크립트 코드를 해석하고 실행

• 자료 저장소

: 쿠키를 저장하는 것과 같이 모든 종류의 자료를 저장하는 계층

 

 

3. 렌더링 엔진

: HTML 및 XML 문서와 이미지 등 요청받은 내용을 브라우저 화면에 표시
: 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
: 각 브라우저마다 사용하는 렌더링 엔진은 각기 다르며 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다.

  3-1. 렌더링 동작 과정
  : 서버로부터 받은 HTML, CSS를 다운로드하는 것으로 시작된다.

  1) DOM, CSSOM 생성 (Parsing)
  : 브라우저는 렌더링 할 문서를 HTML과 CSS로 나눠서 읽게 되는데 이때 HTML과 CSS는 단순한 텍스트이므로 각각 연산과 관리가 가능하도록 HTML Parser와 CSS Parser를 사용해 관리가 가능한 Object Model로 만든다.

• HTML -> DOM : HTML파서에 의해 파싱 되어 DOM트리로 변환

• CSS -> CSSOM : CSS파서에 의해 파싱 되어 CSSOM트리로 변환

(DOM : HTML태그를 JS에서 이용할 수 있는 객체로 만드는 것 즉 HTML문서의 객체 기반 표현 방식)
(파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

*HTML 파싱, DOM 생성 과정*
1. 서버는 브라우저로부터 요청받은 HTML 파일을 읽어드린 후 메모리에 저장하고 그 메모리에 저장된 바이트(101101000100…)를 응답한다.
2. 브라우저는 응답받은 바이트 형태의 문서를 meta태그의 charset 어트리뷰트에 지정된 인코딩방식(UTF-8)에 따라 문자열로 반환한다.
3. 문자열로 변환된 HTML문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰(token)으로 분해한다.
4. 토큰들의 내용에 따라 객체로 변환하여 각 노드들을 생성한다. (문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드)
5. HTML은 요소 간의 부자 관계인 중첩 관계를 갖는데, 이를 반영하여 모든 노드들을 트리 구조로 구성하여 DOM을 만든다.

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

* 자바스크립트 파싱 과정 *
: 렌더링 엔진은 HTML 문서를 한 줄씩 순차적으로 파싱 하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중단하고, script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱 하기 위해 자바스크립트 엔진에게 제어권을 넘긴다.
자바스크립트 파싱이 끝나면 렌더링 엔진으로 다시 제어권을 넘기고 DOM 생성을 이어나간다.

: 만약 생성되지 않은 DOM을 조작한다면 에러가 발생할 수 있으므로 body 요소 아래에 자바스크립트를 위치시키거나 DOM 생성이 완료된 시점에 자바스크립트가 실행되도록 해야 한다.

  2) 렌더 트리 구축 (Attachment)
  : CSSOM 트리와 DOM 트리를 결합하여, 표시해야 할 순서로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 형성하는 과정
  : 렌더트리에는 실제 화면에 표현되는 노드들로 구성되며 스타일 정보가 설정되어 있다.

*렌더 트리 생성을 위한 브라우저의 3가지 단계*
- DOM 트리의 루트부터 노드 각각을 탐색하며 실제 화면에 표시되지 않는 노드들은 제거한다. (ex. script, meta태그, display: none)
- 실제 화면에 표시되는 노드에 대해 일치하는 CSSOM 규칙을 찾아 적용한다.
- 노드를 스타일과 한께 적용해 렌더트리로 생성한다.

 

  3) 렌더트리 배치 (Layout / Reflow)
  : 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산하는 단계
  : %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변환된다.

  4) 렌더트리 그리기 (Paint)
  : Layout 계산이 완료되면 요소들을 실제 화면에 그리는 단계



참고자료
: https://velog.io/@thyoondev/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
: https://d2.naver.com/helloworld/59361