/ ETC

브라우저의 동작 원리

기타 포스팅입니다.

브라우저의 동작 원리


브라우저는 웹사이트를 표시해주는 소프트웨어이며 웹 개발자들에게는 없어서는 안될 존재입니다. 브라우저는 어떤 원리로 동작하게 되는 것일까요? 주소창에 주소를 입력했을 때 어떤 과정을 거쳐서 웹페이지가 화면에 보이게 되는 것일까요?

브라우저의 종류


브라우저는 크롬, 사파리, 파이어폭스, 오페라, 인터넷 익스플로러, 네이버웨일 등 여러가지가 있습니다. 현재는 크롬이 가장 많이 사용되고 있습니다.

브라우저의 주 기능


브라우저의 주 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저화면에 표시하는 것입니다. 여기서 자원은 보통 HTML문서이고 PDF나 이미지 등 다른형태도 포함될 수 있습니다. 자원의 주소는 URL에 의하여 정해집니다.

브라우저는 HTML, CSS 명세에 따라서 HTML파일을 해석하고 표시합니다. 이 명세는 웹표준화기구(W3C)에 정하는데 과거에는 여러 브라우저가 각각 다른 방법으로 확장했고 이는 호환성의 문제를 발생시켰습니다. 하지만 현재는 거의 대부분의 브라우저들이 표준화된 명세를 따르게 되었습니다.

브라우저의 UI는 일반적으로 다음과 같이 구성되어있습니다.

  1. 주소 표시줄
  2. 뒤로가기,앞으로가기
  3. 중지, 새로고침
  4. 홈버튼
  5. 북마크

브라우저의 UI는 표준 명세가 없음에도 계속해서 브라우저들끼리 서로를 모방하면서 거의 비슷한 UI를 가지게 되었습니다. 물론 특정한 브라우저가 가지고 있는 기능도 있긴합니다.

브라우저의 기본 구조


  1. 사용자 인터페이스 - 주소 표시줄, 뒤로가기, 앞으로가기, 중지, 새로고침, 홈버튼, 북마크 등
  2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
  3. 렌더링 엔진 - 요청한 컨텐츠를 표시함.
  4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨.
  5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
  6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행함.
  7. 자료저장소 - 자료를 저장하는 계층.

렌더링 엔진


렌더링엔진은 요청한 컨텐츠를 표시하는 녀석입니다. 파이어폭스의 경우 “개코”엔진, 사파리나 크롬은 “웹킷”엔진을 사용합니다.

동작 과정에 대해


렌더링엔진은 통신으로부터 요청한 문서의 내용을 얻는데 보통 문서내용은 8KB 단위로 전송됩니다. 자, 렌더링엔진의 기본 동작 과정은 다음과 같습니다.

  1. HTML문서를 파싱하여 DOM트리를 구축
  2. CSS파일과 같은 스타일 요소를 파싱(CSSOM트리 구축)
  3. 이 둘을 합쳐서 렌더트리를 구축 (렌더트리는 문서를 시각적인 구성 요소로 만들어 주는 역할을 함)
  4. 렌더 트리 각 노드에 대해서 화면 상에 배치할 곳을 결정
  5. UI 백엔드에서 렌더 트리의 각 노드를 그림.

정리하면 브라우저가 서버로 부터 HTML문서를 전달받아서 HTML파서를 통해서 파싱하고 DOM트리를 생성합니다. 또한 CSS파일과 같은 스타일요소도 파싱되어 CSSOM트리를 생성합니다. 그다음에 DOM과 CSSOM이 합쳐져서 렌더트리를 구축하거 렌더트리를 배치합니다. 여기서 렌더트리는 위치와 크기를 가지고 있지 않기 때문에 어느 공간에 위치해야할지 각 객체들에게 위치와 크기를 결정해줍니다. 이어서 렌더트리가 만들어져 레이아웃이 구성됬으면 UI 백엔드가 동작하여 렌더 트리의 각 객체를 화면의 픽셀값으로 나타냅니다.

자바스크립트는?


HTML과 CSS는 렌더링엔진에서 처리가되는데 자바스크립트는 어떨까요?
자바스크립트는 렌더링엔진에서 처리가 되는 것이 아니라 자바스크립트 엔진이 처리하는 것입니다. HTML파서가 script태그를 만나면 자바스크립트코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트엔진에게 권한을 넘기게 됩니다. 넘겨받은 자바스크립트엔진이 script태그 내의 자바스크립트 코드를 로드하고 파싱하여 실행합니다. 실행이 완료되면 다시 HTML파서로 제어 권한을 넘겨서 중지했던 시점으로 넘어가 DOM 생성을 재개하게 되는 것입니다.
브라우저는 HTML, CSS, JS를 동기적으로 처리합니다. 그런데 자바스크립트 엔진에 제어 권한이 있는 상태에서 자바스크립트 코드가 아직 완성지 않은 DOM을 조작하게 되면 어떻게 될까요? 당연히 에러가 발생할 겁니다. 그래서 자바스크립트 코드를 <body>태그 하단에 위치시키는 것입니다.



End.

참조한 자료 :

https://bbangson.tistory.com/87.
https://d2.naver.com/helloworld/59361.