웹 브라우저의 동작 원리를 알고 계신가요?

이 글을 통해서 브라우저가 어떻게 동작하는지 설명해 보려 한다
글을 천천히 읽고 나면 웹 브라우저의 동작 원리를 이해할 수 있을 거라 생각한다

브라우저의 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다

보통 HTML 문서지만 이미나, PDF 등 다른 형태가 될 수 있다 자원들의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다

 

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

과거에는 브라우저들이 일부만 명세에 따라 구현하고 독자적인 확장을 함으로써 심각한 호환성 문제를 겪었지만 최근에는 브라우저들 대부분이 표준 명세에 따른다

 

크롬으로 동작한 네이버

브라우저의 사용자 인터페이스

• URI를 입력할 수 있는 주소 표시 줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

사용자 인터페이스는 시간이 지남에 따라 표준 명세가 없음에도 서로의 장점을 모방하면서 현재에 이르게 되었다

 

이쯤 되면 빨리 브라우저의 동작원리를 설명해 주시죠?

가즈아!!!!!

동작 과정 부터 그림으로 보자

렌더링 엔진의 동작 과정

웹킷 동작 과정

위에 브라우저의 기능에서 말했듯이 브라우저를 동작시키게 하는 것은 HTML과 CSS를 해석하고 명세에 따라 보여주는 것에 있다

여기서 자바스크립트를 모르는 사람들을 위해 자바스크립트는 어떤 언어인가 설명하자면

자바스크립트?

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크가

처음에는 모카라는 이름으로, 나중에는 라이브 스크립트라는 이름으로 개발하였으며 당시 자바라는 언어의 인기에 편승하기 위해

앞에 자바 이름을 붙여 자바스크립트가 되었다

현시대에 와서 자바스크립트는 HTML과 CSS만으로 웹 브라우저를 표현하기에 벅차 웹 브라우저를 동적으로 표현하기 위해 사용하는

강력한 언어가 되었다 

지금은 자바스크립트로 애플리케이션 개발 같은 것도 많이 하지만 여전히 가장 많이 사용되는 분야는 웹 환경에서 동작하는 웹 페이지이다.

 

동작 과정 요약

브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것이다

브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다

HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱 되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다

이렇게 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다

 

동작 순서

HTML 파서는 Script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.

제어 권한을 넘겨받은 자바스크립트 엔진은 자바스크립트 파일을 로드하고 파싱 하여 실행한다

실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.

 

동기적으로 처리되는 HTML, CSS, Javascript 때문에 블로킹이 발생하여 DOM의 생성이 지연될 수 있다

따라서 script 태그의 위치는 중요한 의미를 갖는다

 

body 요소의 가장 아래에 script 태그를 위치시키는 것이 좋다

 

마지막 간단하게 이해하는 요약

• 웹 브라우저는 서버로부터 HTML, CSS, Javscript를 응답받아 웹 브라우저를 표시하게 된다
• 자바스크립트는 웹브라우저에 표시할 때 HTML과 CSS로 변환하는 과정을 거치게 되는데 엄밀히 말하면 자바스크립트는 웹브라우저를 표시하는 HTML을 알아들을 수 없기 때문에 이 과정에서 DOM을 생성하여 변환하는 렌더링 과정을 거치게 된다
• 파싱 과정 중에 있어 위에서 아래로 순차적 실행을 하는 동기적 방식에 의해 HTML을 그리다 Javascript를 만나면 멈추게 되고 DOM 생성이 끝나야 다시 HTML이 실행되는 비효율적인 현상이 발생하여 body요소 제일 아래에 자바스크립트를 위치시켜 HTML먼저 파싱 하여 실행시키고 다음 자바스크립트를 실행시키는 것이다

 

[참고]

브라우저 동작 원리 https://poiemaweb.com/js-browser 원글

브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 원글, 이미지