👩💻 브라우저 동작 원리
백엔드 로드맵에 있는 내용입니다. naver d2에 있는 내용을 기반으로 요약 및 추가설명을 하였습니다. 필자의 기록용이지만 다른 분들도 도움이 되었으면 합니다! 🔥
✔️소개
인터넷이 작동하는 원리를 공부하면서 클라리언트와 서버가 정보를 요청하고 응답한다는 원리를 알게 되었고 HTTP가 무엇인지를 공부하면서 클라이언트의 웹 브라우저와 서버가 어떤 방식으로 정보를 요청하고 응답하는지를 알게 되었습니다. 하지만 정보를 받은 웹 브라우저가 어떻게 동작하는지가 궁금해졌습니다. 때문에 브라우저의 동작원리를 공부하고 그 내용을 바탕으로 이 글을 작성하게 되었습니다. 이 글에서 설명하는 웹 브라우저는 파이어폭스, 크롬, 사파리와 같은 오픈소스 브라우저를 예로 들 것 입니다.
⭐️ 중요 포인트: 브라우저의 기본 구조 - 렌더링 엔진
📄 목차:
1. 브라우저의 주요 기능
2. 브라우저의 기본 구조
3. 렌더링 엔진
- 동작 과정
- DOM 트리의 구축을 위한 HTML 파싱
- 렌더 트리 구축
- 배치
- 그리기
4. 마무리
✔️ 브라우저의 주요 기능
웹 브라우저가 html 코드(자원)를 요청하면 웹 서버에서 html파일(자원)을 찾아서 읽고 클라이언트에 전달합니다. 클라이언트에 있는 웹 브라우저에서 이 코드를 읽어서 웹페이지 화면에 출력합니다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다. URL은 각 자원의 서버 주소를 말합니다.
브라우저는 HTML과 CSS명세에 따라 HTML 파일을 해석해서 표시하는데 이명세는 웹 표준화 기구인 W3C(World wide Web Consortium)에서 정합니다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따릅니다.
브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적입니다. (지금 사용하고 계신 브라우저를 살표보면 쉽게 보이실 겁니다.)
- URI를 입력할 수 있는 표시줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 잇는 정지 버튼
- 홈버튼
브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 수 년간 서로의 장점을 모방하면서 현재에 이르게 되었습니다. HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음고 같은 일반적인 요소를 제외하고 브라우저의 필수 UI(User Interface)를 정의하지 않았습니다. 물론 파이어폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있습니다.
✔️브라우저의 기본 구조
브라우저 내의 기본적인 구조는 아래와 같습니다.
1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼 등을 포함한 화면(요청한 페이지를 보여주는 창 제외 모든 부분)
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
6. 자바스크립트 해석기 - 자바스킵트 코드를 해석하고 실행
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
✔️ 렌더링 엔진
렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일입니다. 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있습니다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있습니다. 그러나 이 글에서는 HTML과 이미지를 CSS로 표시하는 주된 사용 패턴에 초점을 맞출 것입니다.
• 동작과정
파이어폭스는 게코(Geako), 사파리와 크롬은 웹킷(Webkit) 렌더링 엔진을 사용한다. 렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB단위로 전송됩니다.
렌더링 엔진은 1. HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 스타일 정보와 HTML 표시 규칙은 2. "렌더트리"라고 부르는 또 다른 트리를 생성합니다. 렌더트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시합니다. 렌더트리 생성이 끝나면 3. 배치가 시작됩니다. 이것은 각 노드가 화면의 정확한 위치를 표시하는 것을 의미합니다. 다음은 UI 벡엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 4. 그리기 과정입니다.
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작합니다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것입니다.
웹킷과 게코가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 위 그림을 통해 알 수 있습니다. 요약하자면 아래와 같습니다.
1. DOM트리의 구축을 위한 HTML 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기
• DOM 트리의 구축을 위한 HTML 파싱
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다.
렌더링 엔진은 서버에서 응답받은 HTML 문서를 파싱하여 각 요소들을 DOM Tree의 각 DOM 노드들로 전환합니다.
**DOM(document Object Model): 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것.
DOM은 마크업과 1:1 관계를 맺습니다. 예를 들면 아래와 같은 마크업이 있습니다.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html>
이것은 아래와 같은 DOM 트리로 변환할 수 있습니다.
HTML과 마찬가지로 DOM은 W3C에 의해 명세(프로그램의 유지 보수가 가능하도록 프로그램의 구조와 기능을 상세하게 기술한 문서)가 정해져 있습니다. 이것은 문서를 다루기 위한 일반적인 명세인데 부분적으로 HTML 요소를 설명하기도 합니다.
트리가 DOM 노드를 포함한다고 말하는 것은 DOM 접점의 하나를 실행하는 요소를 구성한다는 의미입니다. 브라우저는 내부의 다른 속성들을 이용하여 이를 구체적으로 실행합니 다.
• 렌더 트리 구축
DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축합니다. 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적이 있습니다.
파이어폭스는 이 구성 요소를 "형상(frames)" 이라고 부르고 웹킷은 "렌더러(renderer)" 또는 "렌더 객체(render dbject)" 라는 용어를 사용합니다.
렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있습니다.
렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아닙니다. 예를 들어 "head" 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않습니다. 어떤 렌더는 DOM 노드에 대응하지만 트리의 동일한 위치에 있지 않습니다.
• 배치
렌더러가 생성되어 트리에 추가될 때 까지 크기와 위치 정보는 없는데 이런 값을 계산하는 것을 배치 또는 리플로라고 부릅니다.
• 그리기
그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더러의 "paint" 메서드가 호출됩니다. 그리기는 UI 기반의 구성 요소를 사용합니다.
✔️ 마무리
오늘은 브라우저가 어떻게 동작하는지에 대해 알아봤습니다. 요약하자면 서버로부터 전달된 정보 즉, 코드 등은 렌더링 엔진이 HTML 문서를 Parsing하고, 내부에서 DOM(Document Object Model) 노드로 변환합니다. 그 다음 CSS 파일과 스타일 요소를 함께 Parsing, Render Tree를 생성합니다. Render Tree 생성 후에 각 노드가 화면에 표시되도록 배치를 시작하고, UI backend layer를 이용하여 배치된 노드들이 그려지게 됩니다.이렇게 최종적으로 화면에서 우리가 읽을 수 있는 문서로 표시되게 됩니다. 이 큰 틀을 중심으로 세부적인 내용을 알아가셨으면 좋겠습니다.
✔️ 참고
https://d2.naver.com/helloworld/59361
https://ddangjiwon.tistory.com/140
'인터넷' 카테고리의 다른 글
| HTTP는 무엇일까요? - 백엔드 로드맵 (0) | 2023.02.27 |
|---|---|
| 인터넷은 어떻게 작동될까요? - 백엔드 로드맵 (0) | 2023.02.26 |
