브라우저 아키텍처 그리고 html 파싱

서버로부터 HTML를 받아온 브라우저가 이를 어떻게 해석하여 화면에 표시하는지 과정을 알고 싶어서 찾아보았다. 이 글은 https://d2.naver.com/helloworld/59361과 https://dzone.com/articles/behind-browser-basicspart-1를 정리하여 작성한다.

■브라우저의 기능

브라우저는 웹 리소스(HTML, CSS, XML, JS, JSON, PDF 등등)을 화면에 그리는 기능을 한다. 일반적으로 리소스의 위치를 사용자가 URI를 통해 사용함으로 브라우저는 서버에게 요청을 하고 서버는 이에 대한 응답을 정보들을 준다. 

■브라우저의 구성 요소

1. 사용자 인터페이스 

- 일반적으로 우리가 바라보는 브라우저의 모습이다. (뒤로가기 버튼, 새로 고침 버튼, 주소 입력창, 탭창 등등..)

- 인터페이스 계층은 주로 데이터 계층과 커뮤니케이션한다. 또한 콤보 박스 같은 위젯을 그리기 위해 UI 백엔드와 통신하기도 한다. 

2. 브라우저 엔진 

- 브라우저 엔진은 렌더링 엔진과 인터페이스 사이에서 다리 역할을 하며 새로 고침이나 뒤로가기, 앞으로가기 등 메소드를 제공한다.

 

3. 렌더링 엔진 : 컨텐츠를 화면에 그리는 역할을 한다.

- 화면에 URL로부터 주어진 컨텐츠를 렌더링하는 역할을 하며 HTML과 CSS, XML등을 해석한다. 기본적으로 하나의 스레드로 동작한다.

4. 통신 

-Http요청과 같은 네트워크 호출에 사용한다.

  

5. 자바스크립트 해석기 

-자바스크립트를 해석하고 실행한다.

6. UI 백엔드  

- 콤보 박스와 창 같은 기본적인 장치를 그림.

7. 자료 저장소  

-  자료를 저장하는 곳으로. 모든 종류의 자원을 로컬의 하드 디스크에 저장할 필요가 있다. 로컬 웹 데이터베이스다.

■ HTML 파싱 과정

1. HTML Parser가 DOM 트리로 파싱한다.
   
   

   파싱 = 코드를 이해하고 사용할 수 있도록 특정 구조로 변환시키는 것
   
   

   DOM = 웹페이지가 로드될 때, 페이지의 엘리먼트가 구조화되어 트리를 이루는데, DOM이란 그 엘리먼트를 다루기 위한 표준이다.
   

   (DOM에 대해 더 알고싶다면 https://www.w3schools.com/js/js_htmldom.asp)
   
   

   
   
   웹은 파싱과 동시에 수행이 되는 동기화 모델이다. 파싱 중 <script> 태그를 만나게 되면 파싱을 멈추고 스크립트를 실행하게 된다. 보통 html을 작성할 때 스크립트 태그를 가장 아래에 내려놓는 이유도 이것이다.  css의 경우에는 화면을 표시하기 위한 정보를 담고 있기에 미리 해석되는 것이 유리하다 판단하기 때문에 body태그 위에 많이 선언한다. 이렇게 자바스크립트의 경우 아래에 많이 삽입하는데 HTML5에서는 defer , async와 같이 비동기로 속성을 추가하기 때문에 별도의 맥락에 의해 파싱되고 실행할 수 있다.
   
   async의 경우는 외부에 위치한 스크립트 파일에만 적용가능하며, 스크립트 로드를 파싱하고 있는 와중에 비동기로 다운받고, 실행할 때는 파싱을 멈춘다. 
   
   defer 속성은 비동기적으로 스크립트를 로드하지만 실행은 파싱이 끝난 후에 하도록 하는 것이다.
   
   

2. CSS Parser가 스타일을 파싱하여 스타일 규칙을 생성한다.
   
   
   
   
3. DOM 트리와 스타일 규칙을 이용하여 렌더트리를 생성하고 레이아웃을 실행 시킨다. 
   
   렌더 트리 = DOM 트리에 스타일 규칙을 적용하여 만든 것
   
   
   
   레이아웃 실행 = 노드와 해당 노드의 스타일 규칙을 적용 만든 것들의 정확한 위치와 크기 등을 계산하는 과정 
   
   
   
4. 이제 렌더 트리는 각 노드를 화면에 실제로 나타낼 수 있도록 페인팅한다.
   
   

이 전체 과정을 보면 다음 사진과 같다.

이 과정을 측정할 수 있는 도구가 크롬 개발자 도구에도 있는데 크롬 개발자 도구를 열고 아래와 같이 들어가게 되면

다음과 같이 측정되었던 것들을 볼 수 있게 된다.