TIL - Today I Learned (Day 20) - 브라우저 동작 방식

 

 

• React 임민영 튜터님의 라이브 세션이 있었다.
• 브라우저 동작 방식이라는 주제로 강의가 진행되었다.
• 내가 이해한 내용을 다시 정리하는 마음으로 TIL(Today I Learned)을 작성했다.

 

---

 

브라우저 동작 방식

 

자바스크립트란?

• 객체 기반의 스크립트 프로그래밍 언어이다.
• 정적인 HTML을 동적으로 표현하기 위해 만들어졌다.

 

호스트란?

• 자바스크립트가 돌아가는 플랫폼
• 호스트는 브라우저, 웹서버, 냉장고 등이 될 수 있다.
• 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 '호스트 환경'이라고 부른다.

 

< 호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능 >

 

https://ko.javascript.info/browser-environment

 

 

브라우저

• 웹 페이지, 이미지, 비디오 및 기타 파일을 포함하여 콘텐츠를 찾고 검색하고, 표시하는 데 사용되는 고도화된 애플리케이션이다.

 

브라우저의 주요 기능

• 서버로부터 데이터를 전송받고, 전송받은 데이터를 변환하여 사용자가 알아볼 수 있게끔 표시한다.

 

브라우저 객체 모델 (BOM)

• 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.

 

https://d2.naver.com/helloworld/59361

 

1. 사용자 인터페이스 (User Interface)

• 사용자가 브라우저와 상호 작용하는 공간이다. 
• 주소 표시줄, 뒤로 가기 버튼, 앞으로 가기 버튼, 북마크, 새로 고침 및 등이 사용자 인터페이스이다. 

 

2. 브라우저 엔진(Browser Engine)

• User Interface와 Rendering Engine 사이에서 다리 역할을 한다.
• 다양한 사용자 인터페이스의 입력에 따라 렌더링 엔진을 쿼리하고 조작한다.

 

3. 렌더링 엔진(Rendering Engine)

• 브라우저 화면에서 요청된 웹 페이지를 렌더링 하는 역할을 한다.
• CSS를 사용하여 형식이 지정된 HTML, XML 문서 및 이미지를 해석하고 사용자 인터페이스에 표시되는 레이아웃을 생성한다.
• 플러그인이나 확장을 사용하면 다른 유형의 데이터도 표시할 수 있다.

 

4. 통신(Networking)

•  HTTP 또는 FTP의 일반적인 인터넷 프로토콜을 사용하여 URL을 검색하는 브라우저의 구성 요소이다. 네트워킹 구성 요소는 인터넷 통신 및 보안의 모든 측면을 처리한다. 네트워크 구성 요소는 네트워크 트래픽을 줄이기 위해 검색된 문서의 캐시를 구현할 수 있다.

 

5. 자바스크립트 해석기 (JavaScript Interpreter)

• 웹사이트에 포함된 자바스크립트 코드를 해석하고 실행해주는 역할이다.
• 대표적인 엔진 : V8 엔진

V8 엔진(웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다.)

• 해석된 결과는 표시를 위해 렌더링 엔진으로 전송된다.

 

6. UI 백엔드(UI Backend)

• 기본 운영 체제의 사용자 인터페이스 방법을 사용한다.
• 기본 위젯(창 및 콤보 상자)을 그리는 데 주로 사용된다.

 

7. 자료 저장소(Data Persistence)

• 브라우저 상에서 저장해야 하는 정보들을 모두 관리한다.
• 브라우저가 설치된 컴퓨터의 로컬 드라이브에 생성된 작은 데이터베이스이다.
• 캐시, 쿠키, 책갈피 및 기본 설정과 같은 사용자 데이터를 관리한다.

 

---

 

파싱(Parsing)

• 토큰화 된 코드를 구조화하는 과정을 말한다.
• 이러한 파싱 과정을 전문적으로 해주는 부분을 파서(Parser)라고 부른다.
• 입력받은 문자열이 정해진 문법들을 모두 다른지를 확인하는 과정이다.

 

더티 비트 시스템(Dirty Bit System)

• 가상 기억 장치 시스템에서 교체될 페이지의 내용이 변경되었는지를 표시하는 비트.
• 특정 엘리먼트의 레이아웃이 변경이 되었을 때, 렌더 트리를 처음부터 탐색하면서 레이아웃을 계산하지 않고 특정한 부분만 다시 계산하여 리소소의 낭비를 줄이는 최적화 방법이다.

 

가상 돔(Virtual DOM)이란?

• 화면의 변경사항을 바로 DOM에 반영하지 않고 메모리상에 복사본을 모아뒀다가 한 번에 반영하는 개념이다.
• 가상 DOM은 사실 2개(구 가상 DOM, 신 가상 DOM)가 존재하는데, 바꾸고 싶은 것들을 모아 두고 리렌더링(re-rendering)을 일으켜야 할 때 구 가상 DOM과 신 가상 DOM을 비교하여 실제 DOM에 필요한 변경만 수행합니다.

 

 

 

 

 

Reference

 

https://ko.javascript.info/browser-environment

브라우저 환경과 다양한 명세서

https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509#:~:text=A%20browser%20is%20a%20software%20application%20used%20to%20locate%2C%20retrieve,Web%20server%20and%20requests%20information.

How does web browsers work?

https://www.browserstack.com/guide/browser-rendering-engine

Role of Rendering Engines in Browsers | BrowserStack