주소창에 https://www.naver.com 와 같은 다양한 URL을 검색하면 어떠한 동작 원리로 화면이 보여지는지 알아보겠습니다.
👩🏻💻 브라우저란
웹 브라우저는 HTML과 CSS, JavaScript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다.
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 여기서 자원이란 보통 HTML 문서를 의미하지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다.
브라우저의 종류에는 파이어폭스, 사파리, 크롬, 오페라, 네이버 웨일 등이 있습니다.
👩🏻💻 브라우저 기본 구조
브라우저의 기본 구조는 위 그림과 같습니다.
사용자 인터페이스
- 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다.
브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
렌더링 엔진
- 요청한 콘텐츠를 표시합니다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다.
통신
- HTTP 요청과 같은 네트워크 호출에 사용됩니다.
UI 백엔드
- select, input 등 기본적인 요소를 그립니다.
자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행합니다.
자료 저장소
- Cookie, Local Storage 등 브라우저 메모리를 활용하여 저장하는 영역입니다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있습니다.
👩🏻💻 렌더링 엔진
렌더링 엔진의 역할은 요청 받은 콘텐츠를 브라우저 화면에 표시하는 일입니다.
각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있습니다.
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능한 빠르게 내용을 표시하기 위해 노력합니다. 따라서 동작 과정들이 동기적인 방식이 아닌 비동기적인 방식으로 진행됩니다.
크롬, 오페라는 Blink 사파리는 Webkit 익스플로어는 Trident 마이크로소프트 엣지는 EdgeHTML 렌더링 엔진을 사용합니다.
렌더링 엔진 동작 과정
기본적인 동작 과정은 아래와 같습니다.
- 렌더링 엔진은 HTML 문서를 파싱 하여 DOM 트리를 구축합니다.
- 그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 하여 CSSOM 트리를 구축합니다.
- DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 구축합니다.
- 렌더 트리 각 노드에 대해 화면 상에서 어느 공간에 위치해야 할지 각 객체들에게 위치(position)와 크기(size)를 결정해줍니다.(레이아웃 단계)
- UI 백엔드에서 Layout 계산이 완료되면 이제 렌더 트리의 각 노드들을 실제 화면을 그리게 됩니다.(페인트 단계)
이때 주의해야 할 점은 자바스크립트 파일은 렌더링 엔진에서 처리 하지 않고 자바스크립트 엔진이 처리한다는 점 입니다.
HTML 파서는 script 태그를 만나면 JavaScript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘깁니다. 제어 권한을 넘겨받은 자바스크립트 엔진은 script 태그 내의 JavaScript 코드 또는 src 속성에 정의된 JavaScript 파일을 로드하고 파싱 하여 실행합니다. JavaScript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개합니다.
