브라우저 동작 원리

Nine·2022년 2월 24일

network 브라우저

Network

목록 보기

2/4

브라우저 동작 원리

다음을 참고하여 학습을 진행했습니다.

출처 : How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

브라우저 동작 원리를 왜 알아야하나요..?

사실 여태까지 HTML, CSS, Javascript만 알아도 프론트엔드 개발이 가능했어요.
브라우저는 웹 서버의 내용(HTML)을 자동으로 렌더링 해주는데 브라우저 동작 원리를 알 필요가 있을까요?

브라우저 동작 원리에 대해 알아야 하는 이유

웹 상에서의 태그와 기능 다양해지면서 브라우저 호환성 이슈가 생겼어요.
웹서버의 같은 내용을 브라우저마다 다르게 fetching 하는 문제가 있을 수 있어요.
이미지 사이사이 지정하지 않은 여백.. 같은 브라우저별 스타일 문제도 나타납니다.
뭐 어떤건 크롬에서 되는 어떤건 IE에서만 되는 서비스... (심지어 서비스 지원에서도 문제)

왜 브라우저마다 다른 건가요?

HTML, CSS를 해석하는 법은 모두 W3C에 의해 관리되고 유지됩니다.
브라우저들은 이 규정들의 일부만 충족하면서 각자의 확장 기능을 개발해서 호환성 이슈가 발생하는 것입니다.
또한 각 브라우저들은 각기 다른 렌더링 엔진을 사용하는데 이는 아래에서 더 다뤄볼게요.

그럼 브라우저 동작 원리를 간단히 배워봅시다.

웹 브라우저의 역할

서버가 브라우저에게 응답한 HTML문서를 브라우저가 읽고 해석하여 사용자(클라이언트)에게 보여줍니다.
저는 학교 수업에서는 웹 클라이언트가 사실상 브라우저라고 배웠어요.

웹 브라우저의 구조와 렌더링 엔진

User interface : 주소창, 뒤로가기, 앞으로가기...
Browser Engine : UI와 렌더링 엔진의 중간 매체입니다.
Rendering Engine : 웹 서버에서 받은 HTML문서를 UI 상에 나타내주는 엔진입니다.
네트워크 : 웹 서버와의 통신
UI 백엔드 : UI 구동이 가능하게해요. (뒤로 가기 누르면 웹 서버에 이전의 HTML를 받아오기..??)
Javascript interpreter : js 코드를 파싱하고 실행해요.
Data Storage : 쿠키와 같은 로컬 데이터를 저장하는 저장소입니다.

렌더링 엔진

클라이언트의 요청 → 웹 서버의 응답인 HTML → HTML, CSS로 파싱하여 화면 구성하는 주요한 엔진입니다.

👉 서로 다른 브라우저는 기본적으로 다른 렌더링 엔진을 사용해요.

🤨 서로 다른 렌더링 엔진을 사용하니 CSS같은 스타일이 기본적으로 다를 수 밖에 없겠죠?

브라우저	렌더링 엔진
IE	Trident
FireFox	Gecko
사파리	Webkit
크롬	Blink(Webkit의 일종)
오페라	Blink(Webkit의 일종)

👉 Webkit은 오픈 소스 렌더링 엔진, 원래 리눅스 플랫폼에서 사용되었던 엔진이라고 하네요.

렌더링 엔진 작동 방식

DOM(Document Object Model) 트리 만들기

HTML을 파싱하여 DOM 트리를 만듭니다.
Markup → Object Model

렌더 트리 만들기

CSS / Style 데이터를 파싱하여 렌더 트리를 만듭니다.

렌더 트리 레이아웃 만들기

레이아웃 만들기는 각 노드들에게 스크린의 어느 공간에 위치해야할지 position, size를 부여하는
일입니다.

렌더 트리 페인팅

UI 백엔드 동작으로 position,size에 맞게 화면에 배치
더 나은 UX를 위해 콘텐츠를 빠르게 스크린에 띄워야해요.
- 따라서 네트워크를 통해 렌더링 엔진으로 읽어 들어면서 파싱도 진행하는 순차적인 구조를 사용하고 있어요.
- ❗ 단, HTML 중간에 스크립트가 있으면 HTML 파싱이 중단됩니다.

CRP (Critical Rendering Path) 프로세스

위의 렌더링 엔진에서 진행하는 과정들을 직접 담당하는 프로세스가 CRP예요.

아래는 위의 내용을 조금 더 자세하게 표현했어요.
렌더 트리 = CSSOM + DOM 이라고 생각하시면 됩니다.

HTML 파싱 후, DOM(Document Object Model) 트리 구축
CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축

Javascript 실행

❗ HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다.


  - async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨.

  - defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.

  - 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
- ❗ display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리에 구축되지 않아요.
뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계)
계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계)