브라우저의 개념

사용자가 요청한 정보를 서버에 요청하고 이 결과를 표시하는데 사용되는 소프트웨어 프로그램
W3C(World Wide Web Consortium, 웹 표준화 기구)의 표준 명세에 따라 HTML을 해석하고 표시

브라우저의 구성요소

사용자 인터페이스

홈 버튼, 이전/다음 버튼, 주소창, 북마크 등

브라우저 엔진

사용자가 주소창에 입력한 URL을 렌더링 엔진에 전달
사용자 인터페이스와 렌더링 엔진 간의 통친 처리
- 새로고침, 뒤로가기 등으의 사용자 요청에 응답하기 위해 렌더링 엔진을 제어

렌더링 엔진

브라우저 엔진의 일부분
사용자 요청한 웹페이지를 화면에 구현하는 역할
HTML, CSS, JavaScript 등의 리소스를 분석하고 HTML, CSS를 파싱
웹페이지의 변경사항을 효율적으로 처리하기 위해 자료구조를 생성
브라우저별 렌더링 엔진
- IE : Trident
- Edge : EdgeHTML, Blink
- Chrome : Webkit, Blink(version28 이후)
- Safari : Webkit
- FireFox: Gecko

네트워킹

브라우저가 서버와 통신하는 것을 가능하게 함
DNS 조회, TCP/UDP 연결, HTTP 요청 및 응답

UI 백엔드

사용자 OS에 맞춰 <select>, <option>, <checkbox>와 같은 요소의 인터페이스를 그리는 역할

자바스크립트 엔진

브라우저에 내장되어 코드를 해석하고 실행하고 분석
브라우저별 자바스크립트 엔진
- V8 : Chrome, Node.js, Electron, ...
- JavaScript Core : Safari, ...
- SpiderMonkey : FireFox, ...
- Chakra : Edge, ...

브라우저 저장소(Web Storage)

브라우저에서 로컬 컴퓨터의 공간을 활용해 데이터를 저장
객체 정보 저장, 용량 제한 X
로컬 스토리지 : 브라우저를 종료하고 다시 열어도 데이터가 유지
세션 스토리지 : 브라우저가 열려있는 동안 데이터 유지
쿠키 : 4KB 용량 제한, 사용자를 식별하고 저장, 유효기간 설정

브라우저 동작 과정

주요 렌더링 경로 (Critical Rendering Path)

브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계
CRP 최적화는 페이지 로드 시간을 단축시켜 사용자 경험을 향상시킴

1. Parsing (구문 분석)

브라우저가 네트워크를 통해 받은 리소스를 브라우저가 이해할 수 있는 구조인 DOM, CSSOM으로 바꾸는 것
Parser 는 문서를 읽고 문법 규칙에 따라 토큰화(Tokenization)하고 DOM Tree, CSSOM Tree를 생성
- 토큰화 : 의미가 있는 최소 단위로 코드를 쪼개는 것
  - Ex) <div class="container">Hello</div> -> <div, class, =, container, >, Hello, </div>

1-1. Building DOM(Document Object Model) Tree

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link href="style.css" rel="stylesheet" />    
        <title>Critical Path</title>  
    </head>  
    <body>    
        <p>Hello 
            <span>web performance</span> 
        students!</p>    
        <div>
            <img src="awesome-photo.jpg" /><
        /div>  
    </body>
</html>

네트워크로부터 Byte로 HTML을 전달받음
지정된 파일 인코딩에 따라 Character로 변환
특별한 의미와 자체 규칙 세트를 가지는 최소 문법단위인 Token으로 변환
속성과 규칙을 정의하는 객체이자 DOM을 구성하는 기본 요소인 Node로 렉싱
- 노드의 개수가 많을수록 DOM Tree 생성에 더 오랜 시간이 필요
- 노드의 종류

구분	내용
문서 노드 (document node)	트리의 최상위에 존재하며, HTML 문서 전체를 나타내는 노드
요소 노드 (element node)	모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
속성 노드 (attribute node)	모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
텍스트 노드 (text node)	HTML 요소의 텍스트를 표현하는 노드
주석 노드 (comment node)	HTML 문서의 모든 주석은 주석 노드

생성된 노드들이 마크업에 정의된 상하위 관계에 따라 트리데이터 구조로 연결되어 DOM Tree 생성

1-1-1. HTML Parser의 특징

오류에 너그러움
- HTML 파싱 중 에러가 발생하면 브라우저가 자체적으로 에러를 복구

<body>
    <p>Hello
    <div><span>World
</body>

위 코드는 <p>, <div>, <span> 태그의 닫는 태그가 모두 존재하지 않는다. 하지만 브라우저에서 이를 실행하면 파서가 자동적으로 닫는 태그를 추가하여 오류가 발생하지 않는다.

파싱이 중단될 수 있음
- 파싱 도중 <script>, <link>와 같은 태그를 만나면 파싱을 중단하고 해당 태그가 참조하는 파일을 먼저 다운로드하고 해석함
- 이러한 특징때문에 <script> 태그에 HTML 파일이 파싱 된 후에 스크립트를 실행하도록 하는 defer 속성이나 HTML 파일이 파싱 된 후에 스크립트를 실행하도록 하는 async 속성을 추가하여 파싱 속도를 최적화함
네트워크를 통해 먼저 받아온 코드부터 해석을 실행할 수 있음

1-2. Building CSSOM(CSS Object Model) Tree

HTML 파일을 파싱하는 도중 <style> 태그 또는 CSS파일이 연결된 <link> 태그를 만나면 CSS 파싱을 시작
CSS 역시 byte ▶️ character ▶️ token ▶️ node 변환 과정을 거쳐 CSSOM Tree에 연결
CSS는 Cascading의 특징을 가지는만큼 모든 CSS를 처리하고 수신할 때까지 렌더링을 막음

2. Render 렌더

DOM Tree와 CSSOM Tree를 조합하여 화면에 나타나는 요소를 결정하는 Render Tree 생성
DOM Tree의 root부터 시작하여 모든 node를 확인하면서 어떤 CSS 규칙을 첨부할지 결정
<head>, <title>, <script> 등의 비시각적 요소나 display: none; 스타일이 적용된 요소는 렌더 트리에 포함되지 않음
- visibility: hidden 스타일이 적용된 요소는 보이지 않을 뿐 화면에서 공간을 차지하고 있기 떄문에 트리에 포함
Frame Tree 라고도 함

3. Layout 배치

렌더 트리 상의 모든 노드의 기기의 표시 영역 내 정확한 너비, 높이, 위치를 결정하는 단계
Reflow 라고도 함
렌더링 트리의 최상위 노드, root object인 <body>에서부터 시작하여 모든 요소를 순회하며 계산
- <body>의 위치는 0,0이고 브라우저 창의 보이는 영역에 해당하는 뷰포트만큼의 면적을 가짐
노드가 많을수록 레이아웃의 복잡도가 증가하고 형성 시간이 길어질 수 있음
3-1. Dirty Bit System(더티 비트 체제)
특정 엘리먼트의 레이아웃이 변경될 경우 전체 렌더 트리의 레이아웃을 다시 계산할 필요 없도록 계산이 필요한 해당 요소와 연관된 요소들을 Dirty라고 표시하여 리소스의 낭비를 줄이는 최적화 방법
레이아웃 과정에서 Dirty를 만날 경우 그 즉시 계산을 수행하는 것이 아닌 스케줄러를 통해 비동기로 일괄 작업
이를 통해 연산의 횟수와 범위를 줄일 수 있음

4. Paint 페인트

레이아웃 단계를 통해 화면에 배치된 엘리먼트들의 실제 픽셀을 그리는 단계
텍스트, 색깔, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함하여 모든 요소의 시각적인 부분을 화면에 그리는 작업
z-index 속성에 따라 쌓임 맥락을 결정
- 낮은 순서대로 먼저 페인팅되어 뒷쪽에 그려지고 높을수록 윗쪽에 겹쳐 그려짐

참고

1.프론트엔드 개발자가 알아야 할 브라우저 렌더링의 모든 것: CSR과 SSR의 이해와 기술 및 최적화 전략 - weniv
2.요즘IT 프론트엔트 개발자라면 알고 있어야 할 브라우저의 동작 과정-지그재그의 개발 블로그
3.MDN 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가
4.MDN 중요 렌더링 경로
5.NAVERD2 브라우저는 어떻게 동작하는가?-탈리 가르시엘(Tali Garsiel)
6.web.dev 주요 렌더링 경로-Ilya Grigorik

'WEB' 카테고리의 다른 글

HTTP header 1 - 일반헤더 (0)	2024.05.28
쿠키와 웹 캐시 (1)	2024.05.27
CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링) (0)	2024.04.19
HTTP Status Code 상태코드 (0)	2024.04.06
HTTP METHODS 2 (0)	2024.04.05

A NARA PLACE

브라우저의 개념과 동작 과정

브라우저의 개념

브라우저의 구성요소

사용자 인터페이스

브라우저 엔진

렌더링 엔진

네트워킹

UI 백엔드

자바스크립트 엔진

브라우저 저장소(Web Storage)

브라우저 동작 과정

주요 렌더링 경로 (Critical Rendering Path)

1. Parsing (구문 분석)

1-1. Building DOM(Document Object Model) Tree

1-1-1. HTML Parser의 특징

1-2. Building CSSOM(CSS Object Model) Tree

2. Render 렌더

3. Layout 배치

3-1. Dirty Bit System(더티 비트 체제)

4. Paint 페인트

'WEB' 카테고리의 다른 글

티스토리툴바

브라우저의 개념과 동작 과정

브라우저의 개념

브라우저의 구성요소

사용자 인터페이스

브라우저 엔진

렌더링 엔진

네트워킹

UI 백엔드

자바스크립트 엔진

브라우저 저장소(Web Storage)

브라우저 동작 과정

주요 렌더링 경로 (Critical Rendering Path)

1. Parsing (구문 분석)

1-1. Building DOM(Document Object Model) Tree

1-1-1. HTML Parser의 특징

1-2. Building CSSOM(CSS Object Model) Tree

2. Render 렌더

3. Layout 배치

3-1. Dirty Bit System(더티 비트 체제)

4. Paint 페인트

'WEB' 카테고리의 다른 글

'WEB' Related Articles

티스토리툴바