ES5 .Intro(3) - Browser 동작 원리

브라우저는 아마도 가장 많이 사용되는 소프트웨어일 것이다. 이 기록은 브라우저가 어떻게 동작하는지 간략하게 알아볼 것이다.

 

현재를 기준으로 상당히 많이 브라우저들이 존재하는데, 대표적인 브라우저로는 인터넷 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등을 들 수 있다. 여기서 설명하는 브라우저는 크롬, 사파리, 파이어폭스를 예로 들 것이다. 

 

진행순서는 다음과 같다. 

 

1. 브라우저의 주요 기능 

2. 브라우저의 기본 구조 & 동작 원리 

 

---

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원(HTML문서, 이미지 등)을 서버에 요청하고, 브라우저에 표시하는 것이다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 

 

*URI에 기록은 여기를 클릭해주세요.

 

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구간 W3C(World Wide Web Consortium)에서 정한다. 

 

• 브라우저의 사용자 인터페이스는 다음과 같다. 
• URI를 입력할 수 있는 주소 표시 줄
• 이전 버튼과 다음버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

 

---

브라우저의 기본 구조 & 동작 원리 

위에서 설명했다시피, 브라우저의 핵심기능은 사용자가 선택한 자원을 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것이다. 

 

브라우저는 서버로부터 파일(HTML, CSS, JavaScript, 이미지 파일 등)을 응답받아 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고, 렌더트리로 결합되는데 이렇게 생성된 렌더트리를 기반으로 브라우저는 웹페이지를 표시한다. 

렌더링 엔진 -> HTML파서, CSS 파서 -> DOM, CSSOM트리 -> 렌더 트리 -> 웹페이지

- 브라우저 동작 원리 -

 

자바스크립트는 자바스크립트 엔진이 처리한다. ex) 크롬-> V8

 

HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고, 자바스크립트 엔진으로 제어 권한을 넘긴다. 이때 자바스크립트 엔진은 script 태그의 src 에 정의된 JS파일을 로드하여 파싱하여 실행하고, 완료가 되면 HTML파서로 제어 권한을 넘겨 중지된 시점부터 DOM생성을 재개한다. 

 

렌더링 엔진 -> HTML파서, CSS 파서 -> DOM, CSSOM트리 생성 -> 도중 script 태그를 만남 -> DOM, CSSOM트리 생성중단-> 자바스크립트 엔진 -> JS 파서 -> DOM, CSSOM트리 생성 재개 -> 렌더 트리 -> 웹페이지

 

이 모든 처리는 동기적으로 일어나는데, 이는 script 태그의 위치에 따라 blocking이 발생하여 DOM 생성 지연을 일으킬 수도 있다.

 

그렇기 때문에 script태그의 위치는 중요한 의미를 갖는다. 

이러한 지연을 방지하기 위해 script 태그는 body 요소에 가장 아래에 위치시키는 것이 좋다.  

 

다음 기록은 URI vs URL 이다.

 

<참고자료>

https://poiemaweb.com/js-browser

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

 

<ES5 series> chapter 3, 브라우저 동작원리 end

 

---