S4) Unit 2. [HTML/CSS] 브라우저 &렌더링

📣  브라우저란?

𝟭. 브라우저의 정의

✔️ 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램

➰ 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신한다.

➰ 웹 브라우저 또는 웹 탐색기라고도 한다.

 

𝟮. 웹(Web)

✔️ 월드 와이드 웹 : 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결해 제공한다.

➰ 웹 페이지 : HTML 언어를 사용하여 작성된 문서 형태

➰ 웹 사이트 : 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합

 

𝟯. 브라우저의 특징

✔️ 현존하는 브라우저끼리는 동작 방식이 같다.

➰ 사용자가 선택한 자원을 서버에 요청하고, 서버의 응답을 브라우저에 띄우는 방식으로 동작한다.

➰ 여기서 자원은 대개 HTML 문서이지만 PDF, 멀티미디어 등의 형태일 수 있으며 자원의 주소는 URI로 되어 있다.

 

𝟰. 웹의 동작 원리

1. 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력한다.

2. DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색한다.

3. 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다.

4. 전달된 정보는 HTTP 프로토콜을 사용해서 HTTP 요청 메시지를 생성하고, TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송된다. 그리고 이 요청 메세지는 다시 HTTP 프로토콜을 통해 웹페이지 URL 정보로 변환 된다.

5. 웹 서버는 이 변환된 정보에 해당하는 데이터를 검색을 통해 찾아낸 뒤 HTTP 프로토콜을 통해 HTTP 응답 메시지를 생성하고, 이 메시지는 다시 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송된다.

6. 사용자의 컴퓨터에 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환되고, 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 볼 수 있게 된다.

 

𝟰. 브라우저의 구조

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

✔️ UI : 유저와 가장 밀접하게 맞닿아있는 부분

➰ 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭한다.

 

2️⃣ 브라우저 엔진(Browser Engine)

✔️ UI와 렌더링 엔진 사이의 동작을 제어한다.

➰ 문서 객체 모델(DOM) 자료 구조를 구현한다.

➰ 레이아웃 엔진이라고도 부르며, 렌더링 엔진과 묶어 보통 브라우저 엔진이라고 부른다.

➰ 브라우저 엔진은 웹 브라우저마다 전용 엔진을 사용한다.

    ㄴ 크롬은 블링크(Blink)

 

3️⃣ 렌더링 엔진(Rendering Engine)

✔️ 요청한 콘텐츠를 화면에 출력하는 역할을 한다.

➰ HTML, CSS를 최종적으로 파싱해서 화면에 그려준다.

➰ 보통 브라우저 엔진과 묶어 하나로 보는 시각이 많다.

➰ 웹 브라우저마다 전용 엔진을 사용한다.

 

4️⃣ 통신(Networking)

✔️ HTTP 요청과 같은 네트워크 호출에 사용된다.

➰ 플랫폼의 독립적인 인터페이스이고, 플랫폼의 하부에서 실행된다.

 

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

✔️ JS코드를 위에서 아래로 한 줄씩 읽어 내려가는 방식으로 파싱하는 언어

➰ 자바스크립트 엔진이라고도 부르며, 브라우저마다 전용 엔진이 탑재되어 있다.

    ㄴ V8(구글이 개발한 크롬의 오픈소스 JS 엔진)

    ㄴ V8 엔진의 메모리 구조는 크게 Heap Memory와 Call Stack으로 구성되어 있다.

 

✔️ 힙 메모리(Heap Memory)

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

➰ 객체 또는 동적 데이터를 저장하며, 이곳에 저장되는 메모리는 V8 엔진 내부에서 가장 큰 공간을 차지하고 가비지 컬렉션도 발생한다.

 

✔️ 콜 스택(Call Stack)

➰ 프로그램상에서 우리가 어디에 있는지 기록하는 자료구조

➰ 하나만 존재하며, 한 번에 한 작업만 사용할 수 있다.

➰ 크기에 제한이 있다.

function multiplyz(a, b) {                |  |
    return a * b;                         |  |
                                          | multiply(n,n) |
}                                         | square(n) |
                                          | printSquare(4) |
function square(n) {
    return multiply(n, n);
}

function printSquare(n) {
    let squared = square(n);
    console.log(squared);
}

printSquare(4);

➰ return 되는 순서대로 stack에서 제거한다.

➰ square(n) 함수까지 리턴되면, console.log 가 실행되야 하기 때문에 console.log(sqaured)가 콜 스택으로 push되고, 실행되고 나면 printSquare 함수 또한 실행되었으므로, 스택에서 제거된다.

➰ 스택 프레임 : 콜 스택에 쌓이는 데이터 하나하나

➰ 스택 오버플로 : 스택의 한정된 메모리 공간을 넘어버리게 되면 발생시키는 에러

-> 웹 브라우저가 멈추고, UX에도 좋지 못하다!

➰ 스택 추적 : 브라우저의 콘솔 로그를 살펴보면 에러 발생 원인을 알아낼 수 있다.

 

6️⃣ UI 백엔드

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

➰  OS 사용자 인터페이스를 사용하며, 이 인터페이스는 여러 형태를 가지고 있다.

➰ 사용자 인터페이스를 다루기 위해서는 명령어 라인 인터페이스(Command Line Interface - 터미널 or 명령 프롬프트),  일괄 처리 인터페이스(Batch interface), 그래픽 사용자 인터페이스(GUI) 중 하나를 사용해야 한다.

➰ 보통은 그래픽 사용자 인터페이스(GUI)를 사용한다.

 

7️⃣ 자료 저장소(Web Storage)

✔️ 자료를 저장하는 계층 - 웹 저장소(Web Storage)

➰ 영구적인 저장소인 Local Storage, 임시적이 저장소인 Session Storage 가 있다.

 

✔️ 웹 스토리지 특징

➰ 쿠키 자체의 보안 취약성과 용량 제한을 보완하기 위해 등장했다.

➰ 웹 브라우저가 직접 데이터를 저장할 수 있게 해주며, 서버에는 저장한 정보가 전송되지 않기 때문에 네트워크 트래픽 비용을 줄여준다.

➰ 오리진(도메인 + 프로토콜)마다 단 하나씩 존재한다.

 

✔️ 웹 스토리지 종류

➰ 로컬 스토리지

    ㄴ 보관 기한이 없는 데이터를 저장한다.

    ㄴ 브라우저를 닫거나, 컴퓨터를 재부팅해도 데이터가 사라지지 않는다.

    ㄴ 도메인마다 별도의 로컬 스토리지가 생성되기 때문에 도메인만 같으면 전역으로 데이터 공유가 가능해진다.

➰ 세션 스토리지

    ㄴ 하나의 세션만을 위한 데이터를 저장한다.

    ㄴ 브라우저를 닫으면 이 객체에 저장된 데이터는 사라진다.

    ㄴ 도메인별로 생성되며, 브라우저 컨텍스트가 다르면 서로 다른 영역이 된다(브라우저 두 개를 실행해 같은 페이지를 열었을 때, 브라우저의 컨텍스트가 서로 다르면 서로 데이터 공유가 불가능하다)

        ㄴ 브라우저 컨텍스트 : 브라우저가 문서를 표시하는 환경

 

✔️ 웹 스토리지 문법

➰ window.localStroage : 만료 날짜가 없는 데이터를 저장할 때 사용

➰ window.sessionStorage : 세션이 있는 데이터를 저장할 때 사용

//window 객체에 있는 Storage 객체를 통해 확인할 수 있습니다.
//해당 객체가 존재하지 않는 브라우저라면 `undefined`를 반환하고, 존재한다면 객체를 반환합니다.
if (typeof(Storage) !== "undefined") {

    // web storage를 위한 코드 부분

} else {

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

}

 

✔️ 웹 스토리지를 활용한 기능

➰ 복구 및 백업 관련 기능

    ㄴ 블로그 글 복구 및 백업

    ㄴ form 입력 중 벗어났을 때 복구 및 백업

---

📣  브라우저 렌더링

𝟭. 브라우저 렌더링이란?

✔️ HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

➰ 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.

 

𝟮. 브라우저 렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속한다.

2. 서버로부터 HTML, CSS 등 필요한 리소스를 다운받는다.

3. 렌더링 엔진은 전달만은 HTML 문서를 파싱해서 DOM Tree를 만든다.

4. 다운받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM Tree를 만든다.

5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.

6. 레이아웃 과정을 통해 요소의 배치 위치를 정한다.

7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작한다 -> Paint

 

1️⃣ 파싱(Parsing)

✔️ 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계

➰ 파서가 진행하며, 파서는 HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 '토큰'으로 한 번 분해하고, 이 토큰들을 '노드'라는 요소로 바꾼다.

➰ 노드들은 상하 관계에 따라 하나의 트리(파스 트리 or 문법트리) 를 형성한다.

 

✔️ 문서 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

➰ DOM Tree, CCSSOM Trss를 만드는 과정

➰ DOM 트리로 파싱하는 과정에서 HTML 토큰이 만들어지는데, 이 토큰에는 시작 태그와 마침 태그, 속성 이름과 값도 포함이 된다.

➰ 토큰으로 변한 입력값은 파서에 의해 노드가 되고, 최종적으로 DOM으로 구성이 된다.

➰ 이 과정에서 브라우저가 CSS 스타일을 만날 경우 CSSOM 트리로 파싱하고, <script> 태그를 만날 경우 렌더링을 차단하면서 HTML 파싱 또한 중단한다.

➰ 중단 후, <script> 태그 내 src 속성으로 연결된 파일을 다운받아 파싱하고 실행시킨 뒤 다시 HTML 파일을 파싱하기 시작한다.

 

✔️ DOM Tree : HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것

➰ Document Object Model

➰ HTML 태그나 속성을 브라우저가 이해할 수 있는 형태인 객체로 바꿔준 것

 

✔️ CSSOM Tree : CSS 관련 파일을 파싱해 만든 트리

➰ CSS Object Model

➰ CSS는 부모의 속성을 자식이 상속받기 때문에 p는 부모의 속성인 font-size, 자신의 속성인 font-weight 두개의 속성을 갖게 된다.

 

✔️ 렌더 트리(Render Tree) : DOM 트리와 CSSOM 트리를 합친 트리

➰ 렌더링을 목적으로 만들어지는 트리

➰ 보이지 않을 요소들은 이 트리에 포함시키지 않는다(<meta>나 display:none 이 적용된 요소는 제외된다)

 

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

➰ 렌더 트리는 페인팅 과정을 거쳐야 브라우저 위의 화면으로 그려진다.

➰ 브라우저는 렌더트리를 위에서 아래로 읽어 내려가며 px 단위로 각 요소가 전체 화면에서 어디에, 어떤 크기로, 어떻게 배치되어야 하는지 파악한다.

 

✔️ 페인팅 : 레이아웃에서 결정된 대로 그림을 그리기 시작

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

---

📣  리플로우와 리페인트

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

✔️ 리플로우 : 웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것

➰ 웹 인터렉션 : 크기 조절, 요소 삭제 또는 추가 등

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

 

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

✔️ 리플로우는 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야 해서 실제로 CPU를 많이 차지한다.

✔️ 리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 화면에 찍어 그려야 하므로 CPU를 많이 차지한다.

➰ 프레임 드랍 현상과 직접적인 연관이 있다. 

    ㄴ 프레임 드랍 : 초당 60프레임으로 유지시키던 프레임의 수가 브라우저의 과부하로 인해 줄어드는 현상

    ㄴ 브라우저는 드랍된 프레임을 화면에 그리지 못하고, 유저는 화면이 멈추거나 버벅인다고 느끼게 된다.

    ㄴ 이는 UX에 좋지 않기 때문에 '최적화'를 고려해야 한다.

 

1️⃣ 불필요한 레이아웃을 줄인다.

✔️ CSSOM 트리의 CSS 속성 중에 레이아웃을 발생시키는 속성들이 존재한다.

➰ position, width, height, left, border, display 등..

➰ 대게 위치, 혹은 너비와 관련된 속성이 많다.

➰ 때문에 이런 속성을 이용한 애니메이션 보다는 transform 속성을 사용하는 것이 좋다 -> 레이아웃을 발생시키지 않고 페인트만 다시 발생시키는 쪽으로 렌더링 과정이 일어나기 때문에 유지하고자 하는 프레임 수를 기대할 수 있다.

 

2️⃣ 영향을 주는 노드를 줄인다.

✔️ position에 absolute 또는 fixed를 사용해주면 영향을 받는 노드들을 줄여줄 수 있다.

➰ fixed와 같이 영향을 받는 노드가 전혀 없는 경우 리플로우 과정이 필요없기 때문에 리페인트 연산 비용만 들일 수 있다.