브라우저란? 🤔
브라우저는 우리가 인터넷을 탐색하고 웹사이트를 볼 수 있게 해주는 프로그램이다.
인터넷을 통해 다양한 정보, 뉴스, 비디오, 사진 등을 찾고 볼 수 있게 도와주는 창문이라고 생각하면 된다!
브라우저 예시 💁♂️
- 구글 크롬
- 사파리
- 마이크로소프트 엣지
- 파이어폭스 등
핵심 ❕
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
브라우저는 HTMl 과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이때 웹 표준화 기구인 W3C 에서 정한 표준 명세를 기준으로 표시한다.렌더링이란 ? 🤔
렌더링(Rendering)은 컴퓨터가 데이터를 시각적으로 표현하는 과정을 말한다.
웹 브라우저에서 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 코드가 시각적으로 사용자에게 보이는 웹 페이지로 변환되는 과정을 의미!
즉, 브라우저가 웹 페이지의 코드를 읽고, 이를 화면에 표시하기 위해 그림을 그리는 과정이다.!
브라우저의 구성요소
브라우저의 기본 구성 요소는 아래와 같다.
-
사용자 인터페이스
- 주소 표시줄
- 이전/다음 버튼
- 북마크 메뉴 등
요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
-
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는것으로
사용자 인터페이스와 렌더링 엔진사이의 인터페이스라 생각하면 된다.
-
렌더링 엔진
말그대로 렌더링을 하는 엔진으로 요청한 콘텐츠를 브라우저에 표시하는 역할을 한다.
예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
-
통신
HTTP 요청과 같은 네트워크 호출에 사용되는 요소이다.
-
UI 백엔드
OS 사용자 인터페이스 체계를 사용하여 플랫폼에서 명시하지 않은 일반적인 인터페이스(콤보 박스와 창 같은) 기본적인 장치를 렌더링한다.
-
자바스크립트 해석기
인터프리터가 자바스크립트를 컴퓨터가 알아 들을수 있는 기계어로 해석하고 실행한다.
-
자료 저장소
자료를 저장하는 계층
모든 종류의 자원 (쿠키 등) 을 저장하는 계층이다.
브라우전의 렌더링 과정을 살펴 보자
주소창에 url을 입력
주소창에 url을 입력하게 되면 url 에 해당하는 서버에게 요청을하고 html을 응답받는다.
HTML 코드를 파싱
HTML 을 파싱 (구문 분석) 하여 DOM 트리를 구성한다.
DOM이란 Document Object Model 로 html 을 트리 형태로 변환한 것을 만한다.
만약 아래와 같은 html 코드가 있다면
<html>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</body>
</html>아래와 같은 DOM 트리가 만들어진다.
html
└── body
├── h1
│ └── "Hello, world!"
└── p
└── "This is a paragraph."CSS 파싱과 인라인 스타일 파싱
css 파일이 정의되어 있거나 인라인 스타일을 파싱한다.
따로 지정되어있는 스타일이 없다면 브라우저에서 제공하는 기본 스타일을 이용한다.
파싱한 결과로 CSSOM을 생성한다.
CSS Object Model 로 페이지의 CSS 스타일 정보를 담고 있는 구조이다.
Script 태그는 Dom 의 생성을 블로킹 하지만 CSS link 태그는 블로킹하지 않기 때문에 HTML 을 작성할때는 CSS의 link 태그를 위에다 작성하는것이 효율적이다!
DOM 과 CSSOM 을 이용하여 RenderTree 생성
RenderTree는 DOM 과 CSSOM 트리를 합친것으로 말그대로 렌더링을 하기 위해 존재하는 Tree이다.
이때 렌더링 하지 않아도 되는 노드들은 과감히 renderTree에 구성시키지 않는다.
예를들어 head 태그 또는 display: none 인 노드들은 렌더링 하지 않아도 되므로 RenderTree에 구성되지 않는다.
Layout 단계(계산) (또는 reflow )
Layout 단계에서는 페이지에 출력될 노드들의 크기와 위치 레이어 간의 순서 정보를 계산한다.
즉 페이지의 레이아웃을 결정짓는 모든 요소의 위치와 크기가 계산된다!
예를 들면 % 로 정의한 css 속성들의 실제 px 을 계산한다
페인팅 (Painting) 또는 렌더링 (Rendering)
RenderTree 와 레이아웃 정보를 바탕으로 실제 화면에 픽셀을 그린다!
요소의 색상, 폰트 , 배경 이미지 등을 화면에 그린다.
이를 Painting 또는 렌더링 이라 부른다.
레어어!
이때 한번에 그리는게 아니라 최상위 요소(root node)로 부터 재귀적으로 실행하여 각 요소의 z index 마다 레이어로 구분하여 따로 그리게 된다.
같은 깊이의 노드들이 같은 레이어에 그려지게 된다.
Composite (합성)
각각의 레이어들을 합성하는 단계로 최종적으로 우리가 보여지는 화면을 구성하는 단계이다.
사용자의 입장에서 여러개의 레이어는 하나의 페이지로 보인다.
참고자료
https://www.youtube.com/watch?v=v8H5ujL4Tt8
https://velog.io/@zaman17/기술면접대비-브라우저-렌더링-순서와-원리
https://oliviakim.tistory.com/80
https://d2.naver.com/helloworld/59361
https://njobber.tistory.com/entry/브라우저가-웹-페이지를-렌더링하는-과정DOM-CSSOM-렌더트리-레이아웃-페인팅-등
