[부스트 코스] browser의 동작

브라우저가 뭐지?ㅇㅅㅇ

모르는 용어가 나왔다고 해서 당황하지 말자!

 

브라우저(Browser)는 다른 게 아니다. 우리가 인터넷을 접속하기 위해 바탕화면에서 클릭해 열었던 사이트들을 보여주던 것들이 다 브라우저다. Window에서는 Internet Explorer, Mac이나 아이폰에서는 Safari, 그외에 Chrome, FireFox 등등이 브라우저에 해당한다.

 

https://1boon.kakao.com/ppss/59caef82e787d00001fe013c

 

 개발자들은 웹 사이트를 개발할 때 프론트엔드 영역에서 HTML, CSS, Javascript 등의 프로그래밍 언어로 구현을 한다. 그런데 놀랍게도 이용자들이 보게 되는 것은 빽빽한 코드가 아니라 깔끔하게 만들어진 우리가 잘 알고있는 웹사이트 화면이다. 브라우저는 개발자들이 구현한 코드를 해석해서 개발자가 의도하는대로 화면을 변환해주는 것이다.

 

 

 

부스트코스에서는 브라우저를 다음과 같이 소개하고 있다.

웹을 통해서 전달되는 데이터는 어딘가에서 해석돼야 합니다.
서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser'입니다.
Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있습니다.
이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 반드시 알아야 하는 것은 아닙니다. 하지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있습니다.

 

 

예전에는 브라우저의 동작 방식에 대해서는 개발자들도 잘 알 필요가 없다고 생각했다. 브라우저들이 알아서 해결해줬기 때문에 개발자들이 신경 쓸 필요가 없었다. 하지만 최근에는 다음과 같은 이유로 브라우저의 동작 원리에 대해 관심을 갖게 되었다.

 

- 의도한대로 브라우저가 코드를 해석하지 않는 것 같아서

- 우리의 서비스가 브라우저에서 빨리 실행되려면 어떻게 해야할까라는 고민 때문에

 

 

 

브라우저의 기본 구조

 

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

 

https://d2.naver.com/helloworld/59361

사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

 

브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

 

렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함

 

통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨

 

UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

 

자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행

 

자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있음

 

 

 

렌더링 엔진

 

직접적으로 코드를 해석해 파싱하는 작업이 렌더링 엔진에서 이루어 진다.

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

 

기본적인 동작 과정은 다음과 같다.

 

https://d2.naver.com/helloworld/59361

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

 

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

 

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

 

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

 

 

 렌더링 엔진은 가능하면 빠르게 내용을 표시하기 위해 모든 HTML을 파싱할 때까지 기다리는 것이 아니라 전송되지 않은 내용을 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.(인터넷이 느릴 때, 모든 내용이 한 번에 뜨지 않고 웹 사이트의 일부가 한참 뒤에 나오는 것이 이러한 이유 때문이다.)

 

 

 

*구체적인 Browser 동작 원리가 궁금하다면 여기를 참고하면 좋을 것 같다.

 

[관련 부스트코스 강의 링크] https://www.edwith.org/boostcourse-web/lecture/16663/