브라우저

💻 브라우저

웹 브라우저라고도 하고, 웹 탐색기라고도 하는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램입니다.

브라우저는 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신을 합니다.

 

 

🖥️ 브라우저의 특징과 웹의 동작 원리

브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작합니다.

여기서 자원은 대개 HTML 문서이나 가끔 PDF, 멀티미디어 등 다른 형태일 수 있으며, 자원의 주소는 URI(Uniform Resource Identifier)로 되어 있습니다.

흐름 순서는 사용자로 부터 반시계방향으로 진행

 

브라우저의 구조를

→ 간단히 도식화

 

브라우저 엔진(Browser Engine)

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

브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현합니다.

레이아웃 엔진(Layout Engine)라고도 부르며, 렌더링 엔진(Rendering Engine)과 밀접한 연관이 있어 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부르나 여기서는 구분해서 표현합니다.

 

 

렌더링 엔진(Rendering Engine)

요청한 콘텐츠를 화면에 출력하는 역할을 합니다. HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있습니다.

 

 

통신(Networking)

HTTP 요청과 같은 네트워크 호출에 사용됩니다. 보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행됩니다.

네트워크 호출과 같은 부분은 이전 섹션에서 다루고 있으므로, 해당 개념에 대해 미진하다면 다시 이전 섹션의 네트워크 유닛에서 복습하시길 바랍니다.

 

 

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

JavaScript는 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱(parsing)하는 언어(Interpreted Language)

따라서 JavaScript 코드를 해석하고 실행하는 자바스크립트 해석기(JavaScript Interpreter)가 필요에 의해 등장하게 되었습니다.

 

브라우저마다 전용 엔진을 사용

• Rhino(모질라, 자바로 개발)
• SpiderMonkey(파이어폭스)
• V8(크롬) ✔
• JavascriptCore(사파리, react native app)
• Chakra(edge)

크롬의 V8 엔진

 

힙 메모리(Heap Memory)

힙 메모리 내부에는 다양한 공간이 있습니다만, 복잡하기 때문에 여기서는 커다랗게 하나의 공간으로 되어있다고 보겠습니다.

힙(heap)은 동적 메모리 할당에 사용되는 자료구조입니다.

힙을 이용하여 V8은 객체 또는 동적 데이터를 저장합니다.

여기에 저장되는 메모리는 V8 엔진 내부에서 가장 큰 공간을 차지하고 있으며, 가비지 컬렉션 또한 발생하는 곳입니다.

 

 

콜 스택(Call Stack)

JavaScript는 기본적으로 싱글 스레드 기반의 언어입니다.

콜 스택이 하나라는 의미이며, 한 번에 한 작업만 사용할 수 있습니다.

콜 스택은 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조입니다.

만약 함수를 실행한다면, 해당 함수는 콜 스택의 가장 상단에 위치합니다.

이는 스택이 후입선출(LIFO)이라는 구조를 가지고 있기 때문에 일어나는 일입니다.

만약 함수의 실행이 끝난다면, 해당하는 함수는 콜 스택의 가장 상단에 위치하고 있기 때문에 바로 제거할 수 있습니다.

 

 

UI 백엔드

렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당합니다.

Select, Input 창과 같은 기본적인 위젯을 그려줍니다.

플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용합니다.

이러한 종류의 인터페이스를 다룰 때는 특정한 명령 체계를 사용해야 하는데, 그 중 하나가 **명령어 라인 인터페이스(Command Line Interface, CLI)**이며 또 하나는 **일괄 처리 인터페이스(Batch Interface)**입니다.

가장 일반적으로 사용되는 것은 그래픽 사용자 인터페이스 (Graphic User Interface, GUI) 입니다.

 

웹 스토리지 종류

 

로컬스토리지(localStorage)

로컬스토리지 객체는 보관 기한이 없는 데이터를 저장합니다.

따라서 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않고,

Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능하며, 도메인 마다 별도의 localStorage가 생성된다.

 

따라서 도메인만 같으면 전역으로 데이터의 공유가 가능해진다는 장점이 있다.

 

세션스토리지(sessionStorage)

세션스토리지 객체는 하나의 세션만을 위한 데이터를 저장합니다.

데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지되기 때문에, 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라집니다.

 

브라우징이란 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위를 말하며, 브라우저 컨텍스트란 브라우저가 문서를 표시하는 환경을 말합니다.

각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록을 가지고 있습니다.

저장과 조회는 Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 이루어지며, 도메인 별로 별도로 생성됩니다.

여기서 알아둬야 할 점은 브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징이 있습니다.

 

즉, 브라우저 두 개를 실행해 같은 페이지를 열었을 때, 브라우저의 컨텍스트가 서로 다르므로 이 두 페이지의 sessionStorage는 각 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능해집니다.

 

 

 

---

 

 

브라우저 렌더링 과정

아래는 브라우저가 렌더링이 되는 과정을 간단히 도식화

1. 사용자가 브라우저를 통해 웹 사이트에 접속합니다.
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받습니다.
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만듭니다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듭니다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축합니다.
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정합니다.
7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작합니다. 이 과정을 paint라고 합니다.

 

 

파싱(Parsing)

파싱이란 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계,,,

 

 

레이아웃

브라우저 렌더링에서 “레이아웃” 과정은 우리가 웹 개발에서 평소 말하는 웹 페이지 레이아웃 짜기, 디자이너들의 레이아웃과는 다른 개념입니다.

여기서 말하는 레이아웃은 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정

 

 

페인팅

브라우저 화면은 픽셀이라고 하는 작은 점들로 구성되어 있습니다.

각 정보를 가진 픽셀들이 모여 하나의 화면을 구성하는 것입니다.

페인팅은 이런 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정이며, 이 과정까지 해내야 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄워지는 것

 

 

---

 

리플로우(Reflow)와 리페인트(Repaint)

만약에 사용자가 브라우저 화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 요소가 추가 되거나 삭제, 혹은 아예 다른 요소들을 불러와야 하는 상황이 생기면 당연히 화면에 있던 요소들의 크기가 바뀌게 됩니다.

사용자의 입장에서는 당연한 과정이지만, 이렇게 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려 보여주어야 합니다.

 

렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우

페인트 과정을 반복해 수행하는 것을 리페인트

 

DOM 조작은 리플로우, 리페인트가 일어나는 대표적인 예시

 

리플로우와 리페인트의 최적화

사용자의 눈에 일련의 과정이 부드럽게 처리 되려면 초당 60 프레임은 반드시 유지시켜야 합니다.

DOM은 변경이 되면 렌더 트리를 다시 구축하기 때문에, 변경이 될 때마다 리플로우와 리페인트를 다시 해야 한다 는 것

[프레임 드랍: 브라우저의 과부하로 인해 프레임의 수가 줄어드는 현상. 화면이 멈추거나 버벅임]

 

• 불필요한 레이아웃을 줄인다
• 리플로우가 발생하는 속성보다 리페인트만 발생하는 속성을 사용해준다.
• 리플로우? 주로 위치나 너비와 관련된 속성 > position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-allign, vertical-align
• 리페인트? > background, background-image, background-position, background-repea,background-size, border-radius, border-style, box-shadow,color, line-style,outline, clear,display, float, font-family, font-size, font-weight, outline-color, visibility
  • 위치나 너비와 관련된 속성 대신 transform: translate() 를 사용하자.
  • visibillity/display보다 opacity 속성을 사용하자.
• 영향을 주는 노드를 줄인다.position: absolute 또는 fixed 사용