[Web] 브라우저 동작 방법

CS/Web

[Web] 브라우저 동작 방법

ummchicken 2023. 1. 1. 17:59

주소창에 https://www.naver.com 혹은 https://www.youtube.com 등

다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 겁니다.

이 url이 입력되었을 때 어떤 과정을 거쳐서 출력되는걸까?

브라우저 주요 기능

사용자가 자원을 서버에 요청하고 요청한 자원(웹 페이지)을 브라우저에 표시하는 것

웹 브라우저가 웹서버에 웹 페이지를 달라고 하는것 : 요청(request)
요청한 웹 페이지를 웹 브라우저에 제공하는 것 : 응답(response)

보통 자원은 HTML 문서지만 PDF, 이미지 등 다양한 형태일 수 있다.

자원의 주소는 URI에 의해 정해진다.

웹 브라우저의 종류는 다양하다.

크롬, 네이버 웨일, 파이어폭스, 사파리 등이 대표적인 예이다.

웹 브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

브라우저의 사용자 인터페이스는 다음과 같은 요소들이 일반적이다.

URI 입력하는 주소 표시 줄
이전 버튼, 다음 버튼
북마크(즐겨찾기)
새로 고침 버튼
홈 버튼

브라우저의 기본 구조

1. 사용자 인터페이스

사용자가 접근할 수 있는 영역.
주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들
(요청한 페이지를 보여주는 창을 제외한 나머지 부분)

2. 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작 제어한다.

3. 렌더링 엔진

웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타낸다.
예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱 하여 화면에 표시한다.

4. 통신

HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다.
(플랫폼의 독립적인 인터페이스로 구성되어있음)

5. UI 백엔드

select, input 등 기본적인 위젯을 그리는 인터페이스

6. 자바스크립트 해석기

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

7. 자료 저장소

Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다.

각 탭은 독립된 프로세스로 처리된다.

렌더링 엔진

HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진

각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다.

브라우저	렌더링 엔진
IE	Trident
Edge	EdgeHTML, Blink
Chrome	Webkit, Blink(버전 28 이후)
Safari	Webkit
FireFox	Gecko

렌더링 엔진 동작 과정

렌더링 엔진은 HTML 문서를 파싱 하여 DOM 트리를 구축한다.
그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
DOM 트리와 ②의 결과물을 합쳐 렌더 트리를 구축한다.
렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
UI 백엔드에서 렌더 트리의 각 노드를 그린다.

아래 그림은 렌더링 엔진 중 하나인 웹킷 엔진에 나타낸 그림이다.

어태치먼트 : 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 스타일 정보를 연결하는 과정

파싱과 DOM 트리 구축

파싱(parsing)

문서 파싱은, 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

① HTML 문서를 파싱 하여 DOM(Document Object Model) 트리를 구축합니다.

DOM은 마크업과 1:1 관계를 성립한다.

 <html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>

위와 같은 코드는 아래와 같은 DOM 트리로 변환할 수 있다.

브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성한다.

생성된 파싱 트리를 기반으로 DOM 트리를 생성한다.

② CSSOM(Css Object Model)을 생성합니다.

CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함한다.

CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.

③ 렌더 트리(DOM + CSSOM)를 생성합니다.

DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다.

렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다.

④ 렌더 트리를 배치합니다. (레이아웃)

렌더 트리는 위치와 크기를 가지고 있지 않기 때문에,

어느 공간에 위치해야 할지 각 객체들에게 위치(position)와 크기(size)를 결정해준다.

⑤ 렌더 트리를 그립니다.

렌더 트리가 만들어져 레이아웃이 구성되었으면

UI 백엔드가 동작하여 렌더 트리의 각 객체를 화면의 픽셀(px) 값으로 나타낸다.

요약

주소창에 url을 입력하고 Enter를 누르면, 서버에 요청이 전송됨
해당 페이지에 존재하는 여러 자원들(text, image 등등)이 보내짐
이제 브라우저는 해당 자원이 담긴 html과 스타일이 담긴 css를 W3C 명세에 따라 해석할 것임
이 역할을 하는 것이 '렌더링 엔진'
렌더링 엔진은 우선 html 파싱 과정을 시작함. html 파서가 문서에 존재하는 어휘와 구문을 분석하면서 DOM 트리를 구축
다음엔 css 파싱 과정 시작. css 파서가 모든 css 정보를 스타일 구조체로 생성
이 2가지를 연결시켜 렌더 트리를 만듬. 렌더 트리를 통해 문서가 시각적 요소를 포함한 형태로 구성된 상태
화면에 배치를 시작하고, UI 백엔드가 노드를 돌며 형상을 그림
이때 빠른 브라우저 화면 표시를 위해 '배치와 그리는 과정'은 페이지 정보를 모두 받고 한꺼번에 진행되지 않음. 자원을 전송받으면, 기다리는 동시에 일부분 먼저 진행하고 화면에 표시함

출처

저작자표시 비영리 변경금지

'CS > Web' 카테고리의 다른 글

[Web] 쿠키(Cookie) & 세션(Session) (0)	2023.01.01

현재글[Web] 브라우저 동작 방법

Ummchicken