[Backend] 브라우저는 어떻게 동작할까?
Updated:
👨🏻💻 브라우저
브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 기능을 한다.
내가 선택한 자원의 주소는 URI에 의해 정해진다. URI는 Uniform Resource Identifier로 통합 자원 식별자이다.
URI에는 URL, URN이 있는데 대부분 URL (User Resource Locator) 을 사용하기 때문에 URI는 URL이라고 해도 무방하다.
📌 브라우저 요소
브라우저는 HTML, CSS를 해석하여 표시하는데 이 기준을 W3C (World Wide Web Consortium) 에서 정한다.
과거에는 몇몇의 브라우저만 이 기준을 따랐고 다 자신만의 기준을 통해 표시했다고 한다.
때문에 웹 프로그래머들이 굉장히 애를 먹었다고 한다. 하지만 최근에는 대부분의 브라우저가 표준 기준을 따른다고 한다.
하지만 사용자 인터페이스에 있어서는 표준 기준이 없다고 한다. 그러나 서로의 장점을 따르다 보니 공통적으로 가진 UI가 있다.
- URL을 입력할 수 있는 주소표시줄
- 이전 버튼, 다음 버튼
- 북마크
- 새로고침 버튼, 현재 페이지 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
📂 브라우저 구조
다음은 브라우저를 구성하고있는 구조이다.
- 사용자 인터페이스 : 요청한 페이지를 보여주는 창을 제외한 모든 부분을 일컫는다.
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진을 제어한다.
- 렌더링 엔진 : 사용자가 요청한 페이지를 표시한다.
- 통신 : HTTP 요청과 같은 네트워크 호출에 사용된다.
- 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행한다.
- UI 백엔드 : 콤보 박스와 창 같은 부분을 그린다.
- 자료 저장소
🔦 렌더링 엔진
렌더링 엔진은 HTML, XML 문서와 이미지를 출력 할 수 있다.
또 플러그인이나 확장 프로그램을 통해 PDF와 같은 다른 유형도 표시 할 수 이다.
대표적인 렌더링 엔진으로는 사파리와 크롬에서 사용하는 웹킷이 있다.
🛠 동작 과정
렌더링 엔진은 HTML 문서를 파싱하고 태그를 DOM 노드로 변환한다. 그리고 CSS 파일과 함께 포함된 스타일 요소도 파싱한다.
스타일 정보와 HTML 표시 규칙은 정해진 순서대로 표시되는 렌더트리를 생성한다.
렌더트리의 생성이 끝나면 배치가 시작된다. 이 배치는 각 노드가 정확한 위치에 표시되는 것을 의미한다.
다음으로는 UI 백엔드가 각 노드를 지나면서 형상을 그린다.
렌더링 엔진은 최대한 빠르게 내용을 표시하기 위해 HTML 파싱이 전부 끝날 때 까지 기다리지 않는다.
나머지 내용을 기다림과 동시에 먼저 받은 내용을 화면에 표시한다.
💡 정리
정리 해 보자면 브라우저의 전체적인 동작 과정은 우선 사용자가 원하는 자원의 주소 (URL)을 입력한다.
그러면 렌더링 엔진이 그 주소에 있는 HTML, CSS 파일을 파싱 해 렌더 트리를 생성한다.
트리 생성이 끝나면 각 노드를 정확한 위치에 배치하고 UI 백엔드가 노드의 형상을 그린다.
더 요약 해 보자면 내가 원하는 페이지의 HTML, CSS 파일을 읽어와 그린다! 라고 생각하면 될 것 같다.
파일을 읽어온다는게 파싱을 의미하는데 정말 복잡하고 어려운 과정이다.
심지어 태그가 잘못 되어있는 경우도 알아서 수정 해 준다고 한다.
파싱에 관한 설명은 [Naver D2] 브라우저는 어떻게 동작하는가? 에 아주 자세히 나와있다.
그런데 너무 어렵다..
Leave a comment