브라우저 작동 원리 정리하기

Jungmin Lee·2021년 9월 10일
0

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 그것을 해석하여 브라우저에 표시하는 것.
HTML, CSS의 명세에 따라 HTML파일을 해석해서 표시하는데, 이명세는 웹표준화 기준인 W3C에서 정한다.

브라우저의 기본 구조

1. 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 홈버튼, 새로고침/정지 버튼 등 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분

2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어한다.

3. 렌더링 엔진 : 요청한 URI를 브라우저 엔진에게 받아서 server에게 요청한다.
server로 부터 URI에 해당하는 데이터(HTML, CSS, JavaScript)를 받아서 파싱한 후 렌더링한다

4. 통신 : 렌더링 엔진으로부터 HTTP요청 등을 받아서 네트워크 처리 후 응답을 전달한다.

5. 자바스크립트 해석기 : JavaScript를 파싱한다.

6. 자료 저장소 : 쿠키 등의 자료를 컴퓨터 하드디스크에 저장한다. (웹 데이터 베이스)

7. UI 벡엔드 : render tree를 browser에 그려주는 역할.

렌더링(Rendering)이란?

이미지 합성이라고도 한다. 쉽게말해 사용자에게 요청 받은 내용을 화면에 표시하는 것을 말한다.

렌더링 엔진의 종류

게코(Gecko) : firefox

블링크(Blink) : chrome, Opera, Whale
(크롬은 웹킷을 사용하다가 블링크 엔진을 자체적으로 개발해서 사용하고 있음)

웹킷(Webkit) : safari

렌더링 엔진의 동작 과정

1. 문서 파싱 단계

1-1. 서버에서 html, css문서를 받아와 html을 DOM(Document Object Model)로 변환 생성한다.
1-2. DOM을 생성하는 동안 css문서도 CSSSOM(CSS Object Model)로 변환한다.

2. 렌더 트리 구축 단계

변환된 DOM, CSSOM 트리를 결합하면 렌더 트리가 된다.

3.렌더 트리 배치 단계

변환된 렌더 트리는 Reflow(배치)단계를 거쳐 화면의 크기에 맞춰 정확한 위치와 크기를 계산한다.(Layout 단계라고도 한다.)

4. 렌더 트리 그리기 단계

Repaint (그리기)단계를 통해 Reflow에서 계산한 위치, 크기를 제외한 나머지 CSS 속성들( 텍스트, 색상, 투명도, 이미지, 그림자 )을 적용 UI 백엔드를 이용하여 실제 화면에 그린다.

참고한 링크

브라우저는 어떻게 동작하는가?
브라우저 작동원리

profile
Front-end developer who never gives up.

0개의 댓글