브라우저
브라우저는 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램이다. 웹 브라우저 또는 웹 탐색기라고도 하며 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 프로토콜인 HTTP를 통해 송수신한다.
웹 (World Wide Web)
웹은 인터넷상에서 멀티미디어 정보(그림, 텍스트, 소리, 영상 등)를 하이퍼텍스트 방식으로 연결해 제공한다
웹 페이지 (Web Page)
HTML 언어를 사용하여 작성된 문서 형태로 제공되는 문서들
웹 사이트 (Web Site)
웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합
웹 브라우저(Web Browser) 종류
1993년 / 모자이크(Mosaic) - 최조의 웹 브라우저, 마크 안드레센과 에릭 비나가 개발
1994년 / 넷스케이프(Netscape) - 상업용 브라우저의 등장
➡ 웹 브라우저의 편리한 사용성을 인식하면서 웹의 대중화가 시작
➡ 현재는 다양한 웹 브라우저가 존재, 가장 많은 지분을 차지하는 것은 구글에서 개발한 크롬 브라우저
브라우저의 특징과 웹의 동작 원리
각각의 브라우저가 조금씩 특징은 다르지만 동작 방식에는 공통점이 있다.
브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하면 서버의 응답(Response)을 브라우저에 띄우는 (Rendering)방식으로 동작한다.
자원
대부분 HTML 문서이며 PDF, 멀티미디어 등 다른 형태일 수도 있다
자원의 주소
URI(Uniform Resource Identifier)로 되어있다.
▷ 사용자가 웹 브라우저를 통해 웹 페이지의 URL 주소를 입력한다
▷ DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색한다
▷ 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 전달한다
▷ 웹 페이지 URL 정보와 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성하고 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송된다
▷ 요청 메세지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환된다
▷ 웹 서버는 변환된 정보에 해당하는 데이터를 찾아서 HTTP 프로토콜을 통해 HTTP 응 답 메세지를 생성하고, TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송된다
▷ 사용자의 컴퓨터에 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환되고 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 볼 수 있다
브라우저의 구조
사용자 인터페이스(User Interface)
UI라고도 하며, 유저와 가장 밀접한 부분이다. 주소 표시줄, 이전/다음 버튼 등 GUI 부분을 말한다.
브라우저 엔진(Browser Engine)
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하며 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조로 구현한다. 레이아웃 엔진이라고 부르기도 하며, 보통은 브라우저 엔진과 렌더링 엔진을 묶어서 브라우저 엔진이라고 부르기도 한다
웹 브라우저 전용 엔진
- 게코(Gecko) - 모질라 재단에서 만든 브라우저 엔진으로 파이어폭스가 해당 엔진을 탑재
- 웹킷(Webkit) - KHTML에서 파생된 브라우저 엔진이며 사파리가 해당 엔진을 탑재
- 블링크(Blink) - 웹킷에서 파생된 브라우저 엔진이며 크롬, 오페라가 해당 엔진을 탑재
- 트라이던트(Trident) - 마이크로소프트의 브라우저 엔진이며 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩 등이 탑재
- 엣지HTML(EdgeHTML) - 트라이던트에서 파생된 브라우저 엔진으로 마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재했으며 현재는 블링크로 교체
렌더링 엔진(Rendering Engine)
요청한 콘텐츠를 화면에 출력하는 역할이다. HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며 렌더링 엔진은 HTML, XML 문서와 이미지를 표시할 수 있다.
통신(Networking)
HTTP 요청과 같은 네트워크 호출에 사용되며 보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행된다.
자바스크립트 해석기(JavaScript Interpreter)
자바스크립트는 코드를 위에서 아래로 한 줄씩 읽어 내려가는 방식으로 파싱(parsing)하는 언어(Interpreted Language)이다. 자바스크립트 코드를 해석하고 실행하는 자바스크립트 해석기가 등장하게 되었다. 자바스크립트 해석기는 여러 목적으로 사용이 되지만 대체로 웹 브라우저에서 이용되며, 브라우저마다 전용 엔진이 탑재되어 있다.
- Rhino - 모질라 재단이 운영하는 오픈소스 엔진으로, 자바(Java)로 개발
- SpiderMonkey - 최초의 Javascript 엔진으로 넷스케이프 내비게이터를 지원하였으며, 현재는 파이어폭스를 지원
- V8 - 구글이 개발한 오픈 소스 엔진이며 구글 크롬의 Javascript 엔진
- JavascriptCore - 애플에서 개발하였으며 현재는 사파리와 React Native App를 지원
- Chakra - 마이크로소프트가 개발한 엔진이며, Edge 브라우저를 지원
힙 메모리(Heap Memory)
힙은 동적 메모리 할당에 사용되는 자료구조이며 v8은 객체 또는 동적 데이터를 힙을 이용하여 저장한다. 여기에 저장되는 메모리는 V8 엔진 내부에서 가장 큰 공간을 차지하고 있으며, 가비지 컬렉션 또한 발생하는 곳이다.
콜 스택(Call Stack)
자바스크립트는 기본적으로 싱글 스레드 기반의 언어이므로 콜 스택이 하나이며, 한번에 한 작업만 사용할 수 있다. 콜 스택에 쌓이는 데이터 하나하나를 스택 프레임이라고 부르며 스택 프레임들은 쌓이는 순서가 있으므로 콜 스택이 동작하는 방식을 알고 있다면 스택의 추적도 가능하다. 콜 스택은 자료구조 자체가 크기에 제한이 있으므로 한정된 메모리 공간을 넘어갈 경우에 어떠한 에러가 발생되며 스택 오버플로우라고 부른다.
UI 백엔드
렌더링 엔진이 분석한 렌더 트리를 브라우저에 그리는 역할이다. Select, Input 창과 같은 기본적인 위젯을 그려준다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용한다. 이러한 종류의 인터페이스를 다룰 때는 특정한 명령 체계를 사용하는데, 명령어 라인 인터페이스(CLI)와 일괄 처리 인터페이스이다. 가장 일반적으로 사용되는 것은 그래픽 사용자 인터페이스(GUI)이다.
자료 저장소
자료 저장소는 자료를 저장하는 계층이다. HTML5 명세에는 브라우저가 지원하는 웹 저장소(Web Storage) 스펙이 정의되어 있으며 영구적인 저장소인 로컬 스토리지와 임시적인 저장소인 세션 스토리지가 있어서 데이터의 지속성을 구분할 수 있다.
웹 스토리지(Web Storage) 특징
웹 스토리지는 HTML5 이전에 응용 프로그램이 데이터에 서버를 요청할 때마다 쿠키라는 곳에 정보를 저장했는데 쿠키 자체의 보안상 취약과 저장소의 절대적인 허용 용량의 적음으로 나오게 되었다. 웹 스토리지는 웹 브라우저가 직접 데이터를 저장할 수 있으며 사용자 측에서 조금 더 많은 양의 정보를 안전하게 저장할 수 있다. 또한 모든 정보는 서버로 전송되지 않고 저장된 데이터가 클라이언트에만 존재하므로 네트워크 트래픽 비용을 줄여줄 수 있다.
웹 스토리지는 오리진마다 단 하나씩만 존재하며 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하므로 같은 데이터에 접근할 수 있다
로컬 스토리지(localStorage)
로컬 스토리지 객체는 보관 기한이 없는 데이터를 저장하므로 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 저장된 데이터는 사라지지 않는다. Windows 전역 객체의 localStorage을 통해 저장과 조회가 가능하며, 도메인마다 별도의 로컬스토리지가 생성된다. 도메인만 같으면 전역으로 데이터의 공유가 가능하다.
window.localStorage세션 스토리지(sessionStorage)
세션 스토리지 객체는 하나의 세션만을 위한 데이터를 저장하며 브라우징 되고 있는 브라우저 컨텍스트내에서만 데이터가 유지되므로, 사용자가 브라우저 탭이나 창을 닫으면 저장된 데이터는 사라진다. 저장과 조회는 Windows 전역 객체의 세션스토리지 컬렉션을 통해서 이루어지며, 도메인별로 별도로 생성된다. 브라우저 컨텍스트가 다르면 서로 다른 영역이 되므로 데이터의 공유가 불가능해진다.
window.sessionStroage웹 스토리지를 지원하는 웹 브라우저 버전
버전이 다르면 웹 스토리지를 사용할 수 없으므로 확인해야 한다.
웹 스토리지를 활용한 대표적인 기능
브라우저 컨텍스트 내에서 자장한 데이터를 가지고 복구 및 백업과 관련된 기능에 사용할 수 있다.
- 글을 작성 후, 사용자가 창을 벗어난 경우에 작성 내용을 복구 및 백업해 주는 기능
- 사용자가 입력 폼을 통해서 정보를 입력 중 페이지를 벗어났을 때 복구 및 백업해 주는 기능
- 현재 읽은 글의 히스토리 저장
브라우저 렌더링
브라우저 렌더링에서 렌더링은 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 브라우저마다 다르지만, 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다.
브라우저 렌더링 과정
- 사용자가 브라우저를 통해 웹 사이트에 접속한다.
- 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운로드한다.
- 렌더링 엔진은 전달받은 HTML 문서를 파싱해서 DOM트리를 만든다.
- 다운로드한 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해서 CSSOM트리를 만든다.
- 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.
- 레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정한다.
- 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작하며, 이 과정을 paint라고 한다.
파싱(Parsing)
파싱은 프로그래밍 언어로 작성된 파일을 실행시키기 위한 구문 분석 단계이다. 파싱은 파서가 진행하며, 일종의 인터프리터나 컴파일러 구성 요소 가운데 하나이다.
-
파서
HTML 파일의 코드를 최소 단위인 토큰으로 한 번 분해 ▷ 토큰들을 문법적 의미와 구조에 따라 노드 요소로 바꿈 ▷ 노드들은 상하 관게에 따라 하나의 트리를 형성(파스 트리 or 문법 트리) -
문서 파싱
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것이다. 렌더링 과정에서는 HTML 파일을 DOM 트리를 꾸축하고 CSS파일로 CSSOM 트리를 만드는 것을 말한다.
브라우저는 HTML 문서를 DOM 트리로 파싱 ▷ HTML 토큰이 만들어지며 시작 태그와 마침 태그가 포함되고, 속성 이름과 값도 포함 ▷ 토큰으로 변한 입력값은 파서의 의해 노드가 되고 트리 구조의 DOM으로 구성 ▷ HTML 문서를 파싱하면서 CSS 스타일을 만나면 텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱 ▷ <script> 태그를 만날 경우 렌더링을 차단하면서 HTML 파싱 중단 ▷ <script> 태그 내 src 속성으로 연결된 파일을 다운로드하여 파싱하고 실행시킨 뒤 다시 HTML 파일을 파싱
DOM Tree
DOM은 Document Object Model로 HTML문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것이다. 브라우저는 자바스크립트 언어만 알아들으므로 이애할 수 있는 형태인 객체로 바꿔준 것이 DOM 트리이다.
CSSOM Tree
CSSOM은 CSS Object Modelhtml이며 파일을 DOM 트리로 파싱하던 브라우저는 <link>, <style> 태그를 만나게 되면 파싱을 잠시 멈추고 해당 리소스 파일을 서버로 요청한다. 이렇게 요청한 파일을 파싱해 만든 트리를 CSSOM이라고 한다. CSSOM 트리를 구축한 후에 브라우저는 다시 html 파일의 파싱을 멈췄던 부분으로 돌아가서 나머지 DOM 트리를 구축한다. CSS는 부모의 속성을 자식이 상속받는 부분을 알아야 된다.
렌더 트리(Render Tree)
렌더 트리는 렌더링을 목적으로 만들어진 트리이며 사용자에게 브라우저가 보여주려는 화면을 그리는 과정으로, 보이지 않을 요소들은 트리에 포함시키지 않는다. DOM 트리와 CSSOM 트리는 서로 다른 속성을 가진 독립적인 트리로 브라우저 위에 웹사이트를 표시하려면 두개를 합치는 작업이 필요한다.
레이아웃
레이아웃은 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 렌더링 엔진이 계산하여 브라우저 화면에서 어디에 배치할지 정하는 과정이다. 렌더 트리는 텍스트로 구성된 객체로만 보이며 페인팅이라는 작업을 거쳐서 브라우저 위의 화면으로 그려지게 된다. 렌더트리는 위에서 아래로 읽어 내려가며 모든 값을 절대적인 단위인 px값으로 변환된다.
페인팅
페인팅은 픽셀에 대한 정보들을 픽셀을 채워나가는 과정이며, 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄워지게 된다.
리플로우(Reflow), 리페인트(Repaint)
웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 한다. DOM 조작은 리플로우, 리페인트가 일어나는 대표적인 예시이다.
리플로우와 리페인트의 최적화
DOM은 변경되면 렌더 트리를 다시 구축하므로, 변경될 때마다 리플로우와 리페인트를 다시 해야 한다. 리플로우는 렌더링을 다시 하는 것으로 배치를 위한 연산을 해야 하며, CPU를 많이 차지한다. 리페인트는 페인트를 다시 하는 것이며 픽셀을 다시 화면에 찍어 그려야 하므로 GPU를 많이 차지한다. 그렇기 때문에 프레임 드롭(Frame Drop) 현상과 직접적인 연관이 있다. 프레임 드롭 현상이 생기면 유저 경험에 좋지 않으므로, 최적화를 고려해야만 한다.
-
불필요한 레이아웃을 줄인다.
불필요한 레이아웃 하나만 줄여도 렌더링 퍼포먼스를 최적화할 수 있으며 CSSOM 트리의 CSS 속성 중에 레이아웃을 발생시키는 속성들이 존재하고 있다. -
영향을 주는 노드를 줄인다.
JavaScript + CSS를 조합한 애니메이션이 많거나, 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용해 주면 영향을 받는 주변 노드들을 줄여줄 수 있다. fixed와 같이 영향을 받는 노드가 전혀 없는 경우 리플로우 과정이 필요업성서 리페인트 연산 비용만 들일 수 있다. -
CSS에서 레이아웃, 페인트를 발생시키는 속성들
리플로우 시 리페인트는 필수적으로 일어나므로 가능하면 리플로우가 발생하는 속성보다 리페인트만 발생하는 속성을 사용해 주는 게 좋다
리플로우가 일어나는 대표적인 속성
position, width, height, left, top, right, bottom, margin, padding, border, display, font-size, float, overflow, text-align 등 위치 혹은 너비와 관련된 속성이 많다. position left 속성을 가지고 애니메이션을 만들면 프레임 유지를 보장하기 어려우므로 transform 속성을 사용하는게 좋다.
리페인트가 일어나는 대표적인 속성
background, background-image, border-radius, border-style, box-shadow, line-style, visibility, display, font-size 등이 있으며 visibility/display 보다 opacity를 사용하면 성능 개선에 도움이 된다.
