🌱 브라우저의 주요 기능
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다.
자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해짐
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정합니다.
🌱 브라우저의 기본 구조
🌿 브라우저의 주요 구성 요소
-
사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 -
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 -
렌더링 엔진
요청한 콘텐츠를 표시. 예를 들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함 -
통신
HTTP 요청과 같은 네트워크 호출에 사용되며, 플랫폼 독립적인 인터페이스로 구성됨 -
UI 백엔드
플랫폼에서 명시하지 않은 일반적인 인터페이스로서 콤보 박스와 창 같은 기본적인 장치를 그림 -
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행 -
자료 저장소
쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장하는 계층 (HTML5 명세에는 브라우저가 지원하는 웹 DB가 정의되어 있음)
🌿 렌더링 엔진
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 그리는 역할을 합니다. 이것은 HTML이나 XML 문서와 이미지를 그릴 수 있고, 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 그릴 수 있습니다.
📌 동작 과정
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송됩니다.
어테치먼트 : 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 스타일 정보를 연결하는 과정
- HTML 파싱 후 DOM 트리 만들기
HTML 문서를 파싱하여 각 요소들을 DOM Tree의 각 DOM 노드들로 전환
- 렌더 트리(Render Tree) 만들기
HTML 문서들을 파싱하여 DOM Tree를 구성한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 만듦
DOM 트리가 웹 상에 나타날 내용(Contents)를 구성한다면
렌더 트리는 시각적 요소, 어떻게 나타날지 그 스타일을 지정
렌더 트리는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성됨
그 정사각형들은 스크린에 맞는 순서대로 정렬됨
렌더 트리 각각의 정사각형에 해당하는 Renderer들은 DOM 트리 요소들에 적용되지만 1:1 관계가 성립되는 것은 아님
시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없음
- 렌더 트리(Render Tree) 레이아웃 만들기
레이아웃을 만든다는 것은 각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값(Position, Size 등)을 부여하는 것을 의미함
- 렌더 트리 페인팅(Render Tree Painting)
렌더 트리가 만들어져 레이아웃이 구성되었다면, UI 백엔드가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치
더 나은 UX(User experience)를 위해, 렌더링 엔진은 각 콘텐츠를 가능한한 빨리 스크린에 띄워야 합니다. 따라서 모든 HTML 요소들을 렌더링 엔진으로 넣어서 한번에 출력하는 것이 아니라, 일부 콘텐츠는 먼저 트리 과정을 거쳐 스크린에 나타나고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들어 오는 순차적인 방식으로 입출력이 진행됩니다.
🔎 DOM(Document Object Model)
웹 브라우저가 HTML 페이지를 인식하는 방식을 말합니다. 이것을 관리하기 위해 Tree 구조를 만들고, 그 Tree 구조 안에 각 태그들을 Node로 다루면서 정해진 값을 배치합니다.
우리가 일반적인 P/L에서 컬렉션을 통해 각 요소들을 접근하고 다루는 것처럼 웹 브라우저도 Tree라는 컬렉션을 통해 각 태그들의 접근과 객체 생성을 돕는 것입니다.HTML 문서의 각 마크업과 DOM의 각 요소는 1:1 매칭
img-1
🔎 파싱(Parsing)
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것입니다. 문서를 가지고 어휘 분석과 구문 분석 과정을 거쳐 파싱 트리를 구축합니다.
어휘 분석기를 통해 언어의 구문 규칙에 따라 문서 구조를 분석하고 이 과정에서 구문 규칙과 일치하는지 비교한 후 일치하는 노드만 파싱 트리에 추가시킵니다.
파서 트리가 나온 후 다시 기계코드 문서로 변환시키는 과정까지 완료되면 최종 결과물이 나오게 됩니다.
🌱 브라우저 동작 방법
-
사용자 인터페이스나 URL을 통해 클라이언트 요청을 받아 서버에 요청을 전송함
-
해당 페이지에 존재하는 여러 자원들을 함께 보냄
-
렌더링 엔진이 동작하여 HTML과 CSS 스타일 등을 파싱하고 어테치먼트하여 렌더 트리를 생성함
-
렌더 트리 생성 후, UI 백엔드를 통해 배치 작업을 하는 렌더 트리 페인팅 작업을 함
-
이 때, 빠른 브라우저 화면 표시를 위해 배치와 그리기 과정은 자원을 기다리는 동시에 일부분 먼저 진행하고 화면에 표시함
references
- https://m.blog.naver.com/magnking/220972680805
- img-1 : https://inpa.tistory.com/entry/%EB%B0%B1%EC%97%94%EB%93%9C-%EB%A1%9C%EB%93%9C%EB%A7%B5-%F0%9F%8C%90-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%99%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC#%E2%80%8B%EB%A0%8C%EB%8D%94_%ED%8A%B8%EB%A6%AC(Render_Tree)_%EB%A7%8C%EB%93%A4%EA%B8%B0
- https://github.com/gyoogle/tech-interview-for-developer/blob/master/Web/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EB%8F%99%EC%9E%91%20%EB%B0%A9%EB%B2%95.md
