웹 브라우저 동작 방식

박총명·2025년 2월 27일

CS지식 렌더링 웹 웹 브라우저

프론트엔드 지식 창고

목록 보기

2/7

🎈웹 브라우저를 알기전 기본 지식들

HTML

웹 문서를 작성하기 위해 사용하는 마크업 언어

마크업 : 웹 문서가 모니터 화면에서 보이는 형태를 결정하는 구조

태그로 시작하고 태그로 종료된다.

HTTP

하이퍼텍스트를 전송하기 위해 개발된 프로토콜

간편하게 데이터를 전송하게 해준다. 웹브라우저의 주소 표시줄에 URL을 입력한 뒤에 접속을 시도한다. URL은 인터넷에 존재하는 특정 정보 자원의 종류와 위치를 나타내는 문자열이다.

WEB

많은 웹 문서를 연결하는 생테계

HTTP 프로토콜을 이용해 수없이 많은 페이지로 링크를 타고 이동한다.
웹에서는 많은 페이지가 마치 거미줄같은 연결 형태를 가진다.

파싱

브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미

파싱 결과는 보통 노드 트리이며, 파싱트리/문법트리라고 부르기도 한다.

🎈웹 브라우저(Web Browser)

웹 브라우저 정의

인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램

우리는 인터넷 검색을 할 때 특정 사이트를 접속하여 필요한 정보를 검색한다. 이러한 사이트에 접속할 수 있는 도구를 브라우저(or 웹 브라우저)라고 부른다.

웹 브라우저 종류

1. Google Chrome
컴퓨터의 메모리만 충분하면 굉장히 빠르게 동작하고 사용자 입장에서 쾌적한 환경을 지원해주는 것으로 잘 알려져 많은 사람들에게 애용되는 브라우저이다. 전 세계적으로 점유율이 가장 높다.
2. Firefox
3. Safari
애플에서 개발한 웹 브라우저로 크롬 다음으로 인기가 많다. MAC, IOS전용으로 출시 되어 타 OS에서 출시 되지 않는 특징이 있다.
4. Naver Whale
네이버에서 출시한 웹브라우저로 크로뮴을 기반으로 만들어졌다.
5. Microsoft Edge
6. 그 외(Opera, Samsung Internet 등)

웹 브라우저의 수행 기능

웹 페이지를 서버에 요청(request)하여 서버의 응답(response)을 웹 문서 형태로 받는다
받은 웹 문서(HTML, CSS 등)을 렌더링하여 모니터 화면에 웹 페이지를 표시한다.

웹 브라우저의 구조

UI : 웹 브라우저의 화면(주소 창, 새로고침 버튼 등)
Broweser Engine : UI와 Rendering Engine의 매개체 역할 수행 및 쿠키와 같은 로컬 데이터를 저장소에 저장한다.
Rendering Engine : 웹 서버로부터 받은 응답을 화면에 표현한다.(HTML, CSS와 같은 코드를 실질적으로 처리)

렌더링 과정

웹 브라우저가 HTML/CSS를 해석해서 화면에 출력하는 과정을 렌더링 파이프라인 이라고 한다.

1. 불러오기
Loader가 서버로부터 전달받은 리소스 스트림을 읽는 과정이다.

2. DOM,CSSOM 생성
웹 엔진의 HTML/XML 파서가 문서를 파싱해 DOM 트리를, CSS파서가 CSSOM 트리를 생성한다.

3. 생성된 DOM과 CSSOM으로 렌더 트리 생성
Dom Tree + CSSOM Tree 결합, 렌더링에 필요한 노드만 선택해 페이지를 렌더링하는데 사용한다.
랜더 트리에는 스타일이 적용된 요소들만 포함된다.

4. css, 레이아웃
렌더트리를 토대로 그려질 노드와 스타일, 크기를 계산한다. 렌더링 트리에서 위치, 크기등을 알 수 없기 때문에 객체들에게 위치, 크기를 정해주는 과정이다. css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다.

5. 그리기
렌더트리의 각 노드를 실제 픽셀로 변환 -> 실제로 그리는 작업을 실행한다.

6. 합성
페인트된 여러 레이어들을 조합하여 최종화면을 완성한다.
애니메이션이나 스크롤 처리 시 레이어를 재조합한다.