브라우저의 작동 원리를 이해한 대로 정리했습니다.
사파리, 크롬 브라우저 위주로 정리했습니다.
브라우저 렌더링 과정의 핵심인 렌더링 엔진 위주로 정리하고 요청 결과로 주로 HTML, CSS, Javascript를 응답받는다고 가정했습니다.
틀린 부분 지적 부탁드립니다!
브라우저는 웹 서버와 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어입니다.
브라우저의 주요 기능은 사용자가 요청한 자원(웹 페이지)을 웹 서버에 요청하고 응답된 자원을 브라우저에 표시하는 것입니다.
응답된 자원에는 HTML, CSS, Javascript, 이미지 파일 등을 응답받습니다.
브라우저의 핵심 기능인 요청한 웹 페이지를 표시하는 역할을 담당하는 렌더링 엔진입니다.
렌더링 엔진 작동 방식은 다음과 같은 4가지 절차를 거칩니다.
이미지 출처 https://d2.naver.com/helloworld/59361
사용자가 URL을 입력하면 일련의 과정을 거쳐 서버로부터 index.html
파일을 전달받고 파싱을 진행해 DOM 트리를 만듭니다.
클라이언트가 브라우저 검색창에 www.google.com을 입력하면 DNS가 URL을 IP 주소로 변환 후 라우터를 통해 경로를 지정해 연결됐다면 서버로부터 응답을 받습니다.
파싱은 HTML 파서와 CSS 파서를 통해 분석되어 DOM트리과 CSSOM트리를 생성하는 과정입니다.
DOM 트리는 HTML
내용들을 통해, CSSOM은 link 태그
를 만나 css 파일
을 요청에 받은 파일을 분석합니다.
DOM은 HTML
내에 원하는 위치에 접근하기 위한 하나의 방식으로 HTML 을 Object 형식으로 바꾼 것입니다. 따라서 태그 하나하나가 각 DOM 요소로 표현됩니다.
DOM 트리는 이러한 DOM들을 트리구조로 만든 것입니다.
렌더 트리는 만들어진 DOM 트리를 어떻게 보여줄지 시각적으로 스타일을 지정합니다. 색상, 차원정해진 순서대로같이 시각적 정보들을 담은 사각형으로 구성되고 **** 화면에 표시됩니다.
렌더 트리는 DOM 요소와 1:1 매칭이 되지는 않습니다. 예를 들어 css의 display:none
과 같은 속성은 사각형이 무시되기 때문에 정보를 가지고 있는 DOM과 매칭이 되지 않습니다.
렌더 트리가 생성되어 트리에 추가될 때 크기와 위치 정보가 없는데 이런 값을 계산하는 것을 레이아웃이라 합니다. 즉, 각 노드들에게 스크린의 어느 공간에 위치해야 할지 포지션 값이나 사이즈를 부여합니다.
레이아웃까지 다 구성되었다면 브라우저의 구성요소 중 하나인 UI 백엔드에 의해 각 노드들을 정해진 스타일, 위치값을 토대로 화면에 그립니다.
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리합니다. 따라서 HTML 파싱 중 script 태그를 만나면 DOM 생성을 멈추고 제어 권한을 자바스크립트 엔진에게 넘긴 후, 다시 HTML 파서로 제어 권한을 넘겨줍니다.
브라우저는 동기적이기 때문에, 제어 권한을 자바스크립트 엔진에게 넘겨줬을 때 DOM 생성이 멈추게 되는 블로킹이 발생합니다. 따라서 매끄러운 화면 구성을 위해 script 태그 위치 선정을 어디에 할지 생각해 볼 필요가 있습니다.
DOM 생성 블로킹을 막기 위해 body 태그
의 마지막에 script 파일
을 추가합니다. 이로 인해 얻을 수 있는 장점은,
DOM이 완성되기 전에 DOM을 조작한다면?
당연히 조작할 DOM이 없어 에러가 발생합니다. 마찬가지로 여러 스크립트를 불러올 때도 앞, 뒤 스크립트 파일 간 DOM 조작이 엉키지 않도록 위치를 잘 지정해야 합니다.
정리한 내용을 토대로 브라우저의 주소 입력창에 URL을 입력했을 때부터 브라우저에 그려지는 단계 흐름 정리입니다.
이미지 출처 https://poiemaweb.com/js-browser
1. URL을 통해 접근해 index.html
을 받아옵니다.
2. HTML 파서를 통해 HTML을 분석, DOM 트리를 구성합니다.
3. Link 태그를 만나 CSS 파일을 요청, 응답받습니다.
4. 응답받은 CSS를 CSS 파서를 통해 CSSOM 트리를 구성합니다.
5. 이상적인 위치에 script가 있다면, script를 불러와 자바스크립트 엔진에 제어 권한을 넘겨 자바스크립트 파싱을 시작합니다.
6. DOM 트리를 구성하는 동안, 브라우저에서 렌더 트리를 구성합니다.
7. 구성된 렌더 트리를 이용해 레이아웃을 만들고 브라우저에 그려줍니다.