브라우저 동작원리

브라우저 구조

브라우저 엔진(Browser Engine)

HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현

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

이러한 브라우저 엔진은 웹 브라우저 마다 전용 엔진을 사용하고 있습니다. 밑의 표에서 설명한 브라우저 엔진 외에도 다양한 엔진이 있습니다.

이름	설명
게코(Gecko)	모질라에서 만든 브라우저 엔진. - 파이어폭스가 해당 엔진 탑재함.
웹킷(Webkit)	KHTML에서 파생된 브라우저 엔진. - 사파리가 탑재함
블링크(Blink)	웹킷(Webkit)에서 파생된 브라우저 엔진. - 구글 크롬, 오페라, 네이버 웨일 등
트라이던트(Trident)	마이크로소프트의 브라우저 엔진 - 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩 등
EdgeHTML	트라이던트(Trident)에서 파생된 브라우저 엔진으로 마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재되었습니다. (현재는 블링크로 교체.)

렌더링 엔진(Rendering Engine)

화면에 출력하는 역할

• HTML, CSS 등을 파싱해 화면에 출력하고
• HTML 및 XML 문서와 이미지를 표시 가능
  (플러그인이나 브라우저 확장 기능을 이용해 PDF도 표시 가능)

브라우저 엔진과 밀접하게 결합되어 있으므로 보통은 하나의 엔진으로 본다.
렌더링 엔진 또한 웹 브라우저 마다 전용 엔진을 사용하고 있으나 엔진의 동작 원리는 공통된 부분이 많습니다.

통신(Networking)

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

자바스크립트 엔진(JavaScript Engine)

• 자바스크립트 해석기(JavaScript Interpreter)이라고도 부름

• JavaScript는 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱하는 언어(Interpreted Language)
  따라서 JavaScript 코드를 해석하고 실행하는 자바스크립트 해석기(JavaScript Interpreter)가 필요에 의해 등장

• 웹 브라우저에서 이용이 되며, 브라우저마다 전용 엔진이 탑재

Rhino	모질라 재단이 운영하는 오픈소스 엔진으로, 자바(Java)로 개발되었다는 특징이 있습니다.
SpiderMonkey	최초의 Javascript 엔진으로 넷스케이프 내비게이터를 지원하였으며, 현재는 파이어폭스를 지원하고 있습니다.
V8	구글이 개발한 오픈 소스 엔진으로 구글 크롬의 Javascript 엔진입니다.
JavascriptCore	애플에서 개발하였으며 처음에 WebKit 프레임워크를 위해 개발되었지만 현재는 사파리와 React Native App를 지원하고 있습니다.
Chakra	마이크로소프트가 개발한 엔진이며, Edge 브라우저를 지원하고 있습니다.

V8 엔진

힙 메모리(Heap Memory)

동적 메모리 할당에 사용되는 자료구조

• 객체 또는 동적 데이터를 저장
• V8 엔진 내부에서 가장 큰 공간을 차지
• 가비지 컬렉션 또한 발생하는 곳

콜 스택(Call Stack)

• JavaScript는 싱글 스레드 기반의 언어로, 콜 스택이 하나라는 의미이며, 한 번에 한 작업만 수행.

• 후입선출 구조
  함수 실행 시 해당 함수는 콜 스택의 최상단에 쌓이고(push)
  함수 실행 끝나면 해당 함수는 콜 스택의 최상단에 있으므로 제거(pop) 가능

• 스택 오버플로(Stack Overflow)
  스택 오버플로는 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 발생

UI 백엔드

렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할

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

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

• OS 사용자 인터페이스(user interface)

  • 명령어 라인 인터페이스(Command Line Interface, CLI)
  • 그래픽 사용자 인터페이스 (Graphic User Interface, GUI)
  • 일괄 처리 인터페이스(Batch Interface)
    사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스.
    대규모의 시스템에서 대량의 데이터를 처리하는 데에 자주 사용

사용자 인터페이스, 또는 유저 인터페이스(user interface, UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻합니다. 그렇기 때문에 거의 모든 운영체제는 사용자 인터페이스를 가지고 있으며, 이 인터페이스는 여러 형태를 가지고 있습니다.

자료 저장소

• 웹 저장소(Web Storage, 이하 웹 스토리지)
• 로컬스토리지(localStorage)
  영구적 저장소
• 세션스토리지(sesseionStorage)
  임시적 저장소

웹 스토리지(Web Storage) 특징

• 등장배경
  HTML5 이전에는 매번 쿠키(Cookie)에 저장했지만,
  쿠키 자체의 보안상 취약, 저장소의 절대적인 허용 용량의 적음의 문제가 있었고 대안으로 웹 스토리지(Web Storage)가 등장하게 됐다.

• 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다.

• 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장

• 네트워크 트래픽 비용 또한 줄여줌
  모든 정보가 절대 서버로 전송되지 않고 저장된 데이터가 클라이언트에만 존재하기 때문

• 오리진(origin)마다 하나씩만 존재.

  • 오리진(origin) : 도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자
    하나의 오리진에 속하는 웹 페이지는 같은 데이터를 저장하므로 같은 데이터에 접근 가능

• 대표적 기능

  • 블로그 글 작성 도중 창을 나간 경우 작성 중인 내용을 복구하거나 백업해주는 기능
  • 사용자가 입력 form을 통해 정보를 입력 도중 페이지에서 벗어난 경우 복구 및 백업해주는 기능
  • 현재 읽은 글의 히스토리 저장 (카운팅, 혹은 읽은 글 표시 등으로 활용)

• 웹 스토리지는 사용 전에 사용자의 웹 브라우저 버전이 지원하는지 확인해봐야 함

웹 스토리지(Web Storage) 종류

1. 로컬스토리지(localStorage)

만료 날짜가 없는 데이터 저장

• 브라우저 탭 닫고 재부팅해도 데이터 삭제 안됨
• window.localStorage
  Windows 전역 객체의 localStorage 컬렉션을 통해 저장과 조회가 가능하고, 도메인 마다 별도의 localStorage가 생성됨
  = 도메인만 같으면 전역으로 데이터 공유가 가능

localStorage.setItem('test', 1); // 저장
localStorage.getItem('test')    // 조회

2. 세션스토리지(sessionStorage)

세션이 있는(보관 기한 있는) 데이터를 저장

• 페이지를 새로 고침하면 데이터 남아있음
• 브라우저 탭 종료하면 데이터 삭제됨
  데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터 유지
• 민감한 정보 저장할 때 사용.

• 브라우징이란 ?
  브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위.
  
  
• 브라우저 컨텍스트란 ?
  브라우저가 문서를 표시하는 환경.
  각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록을 가지고 있다.

• window.sessionStorage
  Windows 전역 객체의 sessionStorage 컬렉션을 통해 저장, 조회함
• 도메인 별로 별도로 생성됨.
  브라우저가 다르면 서로 다른 영역이 됨
  즉, 브라우저 두 개를 실행해 같은 페이지를 열었을 때, 브라우저의 컨텍스트가 서로 다르므로 두 페이지의 sessionStorage는 각 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능함.
• 오리진이 같은 브라우저 탭, iframe에서 공유

sessionStorage.setItem('test', 1);  // 저장
sessionStorage.getItem('test')     // 조회

웹 스토리지를 지원하는 웹 브라우저 버전

• 웹 스토리지 존재 여부 확인 후, 무엇을 저장할 지 조건문 작성

//window 객체에 있는 Storage 객체를 통해 확인 가능
//해당 객체가 존재하지 않는 브라우저면 undefined 반환, 존재하면 function 반환
if (typeof(Storage) !== "undefined") {

    // web storage를 위한 코드 부분

} else {

    // web storage를 지원하지 않는 브라우저를 위한 안내 부분

}