브라우저 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시한다.
요청하는 자원은 html 문서, pdf, image 등 다양한 형태이다.
자원의 주소는 URI에 의해 정해진다.

브라우저는 html 과 css 명세에 따라 html 파일을 해석해서 표시한다. 이 명세는 웹 표준화 기구인 W3C(World wide web Consortium)에서 정해진다. 브라우저마다 명세가 다르면 호환성 문제가 발생하기 때문이다.

브라우저의 기본 구조

브라우저의 주요 구성 요소는 다음과 같다.

사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 부분
브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 요청한 콘텐츠를 표시. HTML과 CSS를 파싱하여 화면에 표시함
통신 HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼에 하부에서 실행됨
UI 백엔드 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
자바스크립트 해석기 자바스크립트 코드를 해석하고 실행
자료 저장소 자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있다.

렌더링 엔진

아래 렌더링 엔진은 크롬이 사용하는 웹킷(Webkit) 엔진을 기준으로 한다.

동작 과정

렌더링 엔진이 수행되기 전에 우선 통신으로부터 요청한 문서의 내용을 얻어야 한다. 문서의 내용은 보통 8KB 단위로 전송된다.

다음은 렌더링 엔진의 기본적인 동작 과정이다.

렌더링 엔진은 HTML 문서를 파싱하고 ‘콘텐츠 트리’ 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 그리고 파싱된 이 DOM 트리와 스타일 정보는 ‘렌더 트리’라고 부르는 또 다른 트리를 생성한다.

콘텐츠 트리는 HTML문서의 트리 구조를 말한다.

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있으며, 정해진 순서대로 화면에 표시된다.

렌더 트리가 생성되면 배치가 시작되는데, 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.

다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지으며 형상을 만들어 내는 그리기 과정이 수행된다.

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 즉 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

DOM 트리와 렌더 트리의 관계

렌더러란 렌더 트리의 구성요소를 말한다.

렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아니다. 예를 들어 head 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다. 또한 display 속성에 none 값이 할당된 요소는 트리에 나타나지 않는다. (visibility 속성에 hidden 값은 트리에 나타난다.)

select 같은 요소는 ‘표시 영역, 드롭다운 목록, 버튼’ 표시를 위한 3개의 렌더러가 있으므로 1:N으로 대응된다.

또한 한 줄에 표시할 수 없는 문자가 여러 줄로 바뀔 때 새 줄은 별도의 렌더러로 추가된다.

요약

주소창에 url을 입력하면 서버에 요청이 전송된다.
대응된 서버가 클라이언트에게 자원을 보내준다.
브라우저(클라이언트)는 해당 자원을 W3C 명세에 따라 해석한다.
해석의 과정은 렌더링 엔진이 수행한다.
렌더링 엔진은 HTML을 파싱하여 DOM 트리를 만든다.
CSS를 파싱하여 스타일 정보를 만든다.
DOM 트리와 스타일 정보로 시각적 요소를 포함한 렌더 트리를 만든다.
렌더 트리가 생성된 후 배치가 시작되고, UI 백엔드가 노드를 돌며 형상을 그린다.
나은 사용자 경험을 위해 브라우저는 자원을 기다리는 동시에 여태까지 받은 자원을 화면에 표시한다.

참고한 사이트 https://d2.naver.com/helloworld/59361

Thank You for Visiting My Blog, Have a Good Day.
@ 2022 Developer Jun, Powerd By Gatsby.