CS스터디
[Web] 브라우저 동작 방법
Codult
2024. 2. 4. 11:44
728x90
브라우저 동작 방법
사용자가 url을 입력했을 때, 브라우저 페이지가 화면에 보여지는 과정을 의미한다.
(※ 웹 동작 방법: 사용자가 입력한 url이 어떻게 서버로 전달되어 실행되는지의 과정)
- 브라우저는 사용자가 선택한 자원(html, pdf, 이미지 등)을 서버에 요청(url)한 뒤, 브라우저에 표기한다.
- 브라우저의 인터페이스: 주소 표시줄 (url 입력), 이전/다음 버튼, 북마크, 새로고침 버튼, 홈 버튼 등
브라우저 기본 구조
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
- 렌더링 엔진: 요청한 콘텐츠를 표시한다. (html 요청이 들어올 때, html, css 파싱하여 화면에 표시)
- 통신: http 요청과 같은 네트워크 호출에 사용한다.
- 자바스크립트 해석기: javascript 코드를 해석하고 실행한다.
- UI 백엔드: 플랫폼에서 명시하지 않은 일반적인 인터페이스로, 콤보 박스 창과 같은 기본적인 장치를 그린다.
- 자료 저장소: 쿠키 등 모든 종류의 자원을 하드 디스크에 저장하는 계층이다.
렌더링
웹 페이지 접속 시, 페이지를 화면에 그려주는 것이다. (요청받은 내용을 브라우저 화면에 표시하는 것)
렌더링 엔진은 기본적으로 html, xml 문서와 이미지를 표시할 수 있다.
브라우저의 렌더링 과정
- HTML 파서: 렌더링 엔진이 전달받은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
- CSS 파서: 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱하여, CSSOM을 구축한다.
- DOM트리와 파싱된 스타일 요소를 합쳐 렌더 트리를 구축한다.
- 렌더 트리의 각 노드에 대하여, 화면에 배치할 위치를 결정한다.
- UI 백엔드에서 렌더 트리 각 노드를 그린다.
DOM 트리 구축
토큰화
- HTML 문서를 문자열 형태로 받아, 작은 단위로 나누어 토큰이라는 조각으로 변환한다. (토큰 유형: 태그, 속성, 텍스트 등)
렉싱
- 토큰화된 문자열을 브라우저가 읽으면서, 각각의 토큰에 대한 의미를 부여한다. (태그유형, 속성 값 등 추가됨)
즉, 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다.
DOM 생성
- 각 노드가 연관성을 가질 수 있도록 트리를 생성한다. = DOM 트리
- HTML에 있는 모든 것들로 구성되며, 최상위에는 Document 객체가 들어간다.
- 태그는 Element 노드가 되고, 태그의 요소는 Attribute 노드, 텍스트는 Text 노드가 되어 트리 구조를 생성한다.
(주석은 comment 노드)
CSSOM 구축
브라우저는 HTML을 DOM으로 만들면서, 개발자가 정의해놓은 CSS와 가변적으로 설정되어 있는 CSS를 cascading rule에 따라 병합하여 CSSOM을 만들게 된다.
렌더 트리
DOM 트리가 만들어지고, CSSOM이 만들어진 뒤, 브라우저에서 표시될 요소들만 선별하여 Render Tree에 표시한다.
즉, DOM + CSSOM = Render Tree
렌더 트리는 DOM요소와 CSS규칙이 적을수록 빠르게 생성된다.
ex) HTML의 div 태그 남용 및 wrapping 등 불필요한 태그 사용을 자제하여, 렌더 트리 생성 속도를 향상시킬 수 있다.
출처
728x90