웹 브라우저의 작동 방식

3590 단어 웹rendering engine웹 브라우저의 작동 방식htmlhtml

웹 브라우저의 작동 방식에 대해서 알아보도록 하자.

웹브라우저의 기본 구조는 총 네 가지 부분으로 나뉠 수 있어.

  1. User Interface.

  2. Browser engine

  3. Rendering engine

  4. Ui Backend

1. UI (User Interface)

우리가 흔히 화면 (Display)상으로 볼 수 있는 디자인 적 요소들을 User InterFace라고 해.

우리는 시각적으로 보이는 버튼을 누르거나 주소창에 필요한 정보 값을 입력한다거나 등 눈에 보이는 디자인 요소를 통해 해당 기능을 아주 자연스럽게 사용할 수 있지.

하지만 디자인만 있어서는 당연히 동작하지 않겠지?

보이는 것 이면에서는 브라우저의 여러 가지 요소들이 바쁘게 돌아가고 있어 ⛹️‍♂️

2. Browser Engine

브라우저 엔진이 바로 UI(User Interface)와 Rendering engine 사이에서 동작을 제어 시켜주는 부분이야.

Browser Engeing은 User와 Rendering Engine을 이어주는 역할을 하지.

브라우저 엔진은 사용자의 요청사항(URI)을 Rendering Engine에게 먼저 요청을 하기 전에 자료 저장소에서 data가 있는지 확인을 해.

왜냐고?

자료 처리를 효율적으로 하기 위해서야.

많은 사람들이 NAVER를 사용하고 있지?

요청이 들어갈 때마다 server로부터 정보를 받아오는 것은 '비효율적'이야.

Browser engine의 예전 기억을 떠올려 자료 저장소에 저장했던 쿠키 값을 바로 Rendering Enginge으로 요청을 하는 거지, Rendering Engine이 Server로 “통신”을 요청하기 전에 말이야.

3. Rendering Engine

렌더링 엔진은 User가 요청한 정보를 서버에서 받아오고 서버에서 받아오는 정보들을 Parsing 해줘.

Parsing이란?

parsing 후 다시 Render tree를 구성해서 UI 백엔드를 통해 우리의 화면(display)에 띄워주는 거지.

지금부터 Rendering engine의 작동원리에 대해서 알아볼 거야.

웹은 대표적으로 HTML, CSS, JAVASCRIPT로 이루어져 있다고 했지?

Rendering Engine은 HTML의 tag(a, div 등)를 파싱 해서 DOM(Document Object Model) node를 만들어 tree 구조를 형성하지!

왜 HTML을 DOM으로 만드는 걸까?

그 이유는 HTML을 JavaScript로 제어하기 위해서야.

우리가 바라보는 웹페이지는 정적으로 멈춰져 있지 않잖아? 동적으로 움직이기 위해서는 자바스크립트의 힘이 필요하거든! 그래서 DOM으로 만들어 주는 거지!

또 Rendering engine은 CSS를 파싱 해서 CSSOM(CSS Object Model)을 만들어.

JavaScript는 JavaScript 해석기가 파싱을 해!

“여기서 이제 좀 집중하자.”

DOM node가 만들어진 때에 (attach)라는 method가 포함되어 있어.

이 메서드의 활용은 DOM node와 CSS 규칙을 결합해 Render Object를 생성하기 위함이야.

Render Object 안에는 (Paint)라는 메서드가 있고 UI 백엔드를 통해 화면단에 뿌려주는 거지.

Render Object는 Render tree의 구성요소로서, 자신과 자식 요소를 어떻게 배치하고 그려야 할지 알아.

<html>와 <body> DOM node 또한 render object로 구성돼!

이들은 tree의 root로써 Render view라고 부르기도 해 ㅎㅎ

대략적인 순서는 이렇게 진행되는 거야.

우리가 웹페이지에 접속할 때는 따닥따닥 뜨는 것을 볼 수 있어.

"이거 렉이 왜 이렇게 심해?"

라고 말할 때 있잖아?

그렇게 따닥따닥 뜨는 이유는 Rendering engine은 Dom tree를 구성하는 동시에, 이미 생성된 DOM tree와 스타일 규칙(CSSOM)을 Attachment 하기 때문이야.

Render Engine에서는 1번과 2,3,4번이 병렬적으로 작동하는 것이지.

구축한 Render tree를 배치하면! 눈앞에 네가 원하는 정보가 나타나는 거야!

웹브라우저는 이런 과정을 거쳐!!

어때?

간단한 웹 동작이라고만 해도 신기하지?

이렇게 웹브라우저의 작동원리에 대해 알아봤어!

그럼 이만! :>

TIL - 210628 - 6
TIL_express-middleWare_02)body Parser

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage