브라우저
인터넷을 통해 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어
사용자가 웹 주소를 입력하거나 링크를 클릭했을 때, 브라우저가 해당 웹 페이지를 불러와서 표시해준다.
브라우저의 기본 구조
1. 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어한다.
3. 렌더링 엔진 : 요청한 콘텐츠를 파싱하여 표시한다.
4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용된다.
5. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용
6. 자바스크립트 해석기(JS 엔진) : 자바스크립트 코드를 해석하고 실행
7. 자료 저장소 : 로컬스토리지, 쿠키 등 브라우저 메모리를 활용해 저장하는 영역
브라우저 렌더링 과정
렌더링이란? => 서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 것
파싱이란? => 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고, 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정
1. 불러오기
로더가 서버로부터 전달받은 리소스 스트림을 읽는 과정
2. HTML 파싱 및 DOM 생성
HTML 파일을 파싱해 DOM 트리를 생성
이 과정에서 브라우저는 HTML 태그의 종류와 속성을 분석하고, 각 태그의 위치를 계산한다.
=> HTML 파일을 처음부터 끝까지 읽으면서 태그를 만날 때마다 DOM 노드를 생성
DOM트리란, HTML 문서의 구조를 트리 형태로 표현한 것
3. CSS 파싱 및 CSSOM 생성
CSS 파일을 파싱하여 CSSOM 트리를 생성
이 과정에서 브라우저는 CSS 선택자의 규칙을 분석하고, 각 규칙의 적용 범위와 우선순위를 계산한다.
=> 스타일 태그나 외부 CSS 파일을 파싱해 CSS 규칙을 읽음
CSSOM이란, CSS 스타일 정보를 트리 형태로 표현한 것
3. 렌더 트리 생성
DOM과 CSSOM을 결합하여 각 DOM 노드에 해당하는 스타일 정보를 포함한 렌더 트리를 생성
렌더 트리는 화면에 표시될 요소와 그 스타일 정보를 포함하고 있으며, 보이지 않는 요소는 포함하지 않는다.
4. 레이아웃
렌더 트리를 기반으로 각 요소의 위치와 크기를 계산한다.
예를 들어, 부모 요소의 위치와 크기를 바탕으로 자식 요소의 위치와 크기를 결정한다.
5. 페인팅
레이아웃 단계가 끝나면, 화면에 픽셀을 칠하는 과정이 시작된다.
이 과정에서는 각 요소의 색상, 글꼴, 배경 이미지 등을 처리하여 화면에 표시한다.
6. 컴포지팅
복잡한 페이지의 경우 여러 레이어로 나뉘어 페인팅될 수 있다.
컴포지팅 단계에서는 이런 레이어를 결합해 최종적으로 화면에 표시한다.
이를 통해 복잡한 효과나 애니메이션을 효율적으로 처리할 수 있다.
브라우저 동작 방법
1. URL 입력 및 요청 단계
1. URL 입력 또는 링크 클릭
사용자가 주소 표시줄에 웹 주소(URL)를 직접 입력하거나 웹 페이지 링크를 클릭한다.
2. DNS 조회
브라우저는 URL에 해당하는 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버에 조회를 요청한다. 이 IP 주소를 통해 실제 웹 서버로 연결할 수 있다.
3. TCP 연결
브라우저는 웹 서버에 TCP/IP 연결을 생성하여 데이터를 주고받을 수 있는 통로를 연다. 이를 위해 3-way 핸드셰이크 과정을 거친다.
4. HTTP 요청
브라우저는 웹 서버에게 해당 웹 페이지의 내용을 요청하는 HTTP 요청 메시지를 보낸다. 이 요청에는 메서드(GET, POST 등), URL, 헤더, 쿠키 등이 포함된다.
2. 서버 응답 및 리소스 로드
5. 서버 응답
웹 서버는 브라우저의 요청을 받아 해당 웹 페이지의 내용을 포함한 HTTP 응답 메시지를 생성하여 보낸다. 응답에는 상태 코드(200, 404 등), 헤더, 본문(HTML, CSS, JavaScript, 이미지 등)이 포함된다.
6. 데이터 수신 및 해석
브라우저는 웹 서버로부터 받은 HTML, CSS, JavaScript, 이미지 등의 데이터를 받아와서 해석한다.
3. 렌더링 단계
7. 렌더링
브라우저는 HTML 문서를 파싱하여 웹 페이지의 구조를 이해하고, CSS 스타일을 적용하여 페이지의 디자인을 결정하며, JavaScript 코드를 실행하여 동적인 요소를 다루고 상호작용을 구현헌다.
8. 페이지 표시
브라우저는 렌더링된 내용을 사용자에게 표시하여 웹 페이지가 화면에 나타난다.
4. 상호작용 및 업데이트
9. 상호작용
사용자가 웹 페이지에서 링크를 클릭하거나 버튼을 누르는 등의 상호작용을 통해 브라우저는 새로운 요청을 생성하고 해당 페이지나 자원을 다시 가져와 갱신한다.
10. 페이지 캐시
브라우저는 이미 방문한 웹 페이지의 일부 데이터를 캐시에 저장하여, 다시 방문할 때 빠르게 표시할 수 있도록 한다.
이 때 DOM이나 CSSOM이 변경되면, 브라우저는 필요한 부분을 다시 레이아웃하고 페인팅하며, 이를 통해 화면에 변경 사항이 반영된다.
