[POB#19] 브라우저 작동 원리

dongwon·2021년 8월 13일
2

원티드-프리온보딩

목록 보기
13/25
post-thumbnail

브라우저의 작동 원리를 이해한 대로 정리했습니다.
사파리, 크롬 브라우저 위주로 정리했습니다.
브라우저 렌더링 과정의 핵심인 렌더링 엔진 위주로 정리하고 요청 결과로 주로 HTML, CSS, Javascript를 응답받는다고 가정했습니다.
틀린 부분 지적 부탁드립니다!

📄 브라우저의 정의와 주요 기능

브라우저웹 서버와 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어입니다.
브라우저주요 기능사용자가 요청한 자원(웹 페이지)을 웹 서버에 요청하고 응답된 자원을 브라우저에 표시하는 것입니다.
응답된 자원에는 HTML, CSS, Javascript, 이미지 파일 등을 응답받습니다.

⚙️ 브라우저의 구성 요소

  1. 사용자 인터페이스
    브라우저의 UI 부분입니다.
  2. 브라우저 엔진
    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
  3. 렌더링 엔진
    사용자가 요청한 자원을 표시하는 역할을 합니다.
  4. 통신
    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
  5. UI 백엔드
    콤보 박스와 창 같은 기본적인 장치를 그립니다.
  6. 자바스크립트 해석기
    자바스크립트 코드를 해석하고 실행합니다.
  7. 자료 저장소
    자료를 저장하는 계층입니다.

렌더링 엔진

브라우저의 핵심 기능인 요청한 웹 페이지를 표시하는 역할을 담당하는 렌더링 엔진입니다.

✔️ 렌더링 엔진 작동 방식

렌더링 엔진 작동 방식은 다음과 같은 4가지 절차를 거칩니다.

이미지 출처 https://d2.naver.com/helloworld/59361

  1. HTML 파싱 후 DOM(CSSOM) 트리 만들기
  2. 렌더 트리 만들기
  3. 렌더 트리 레이아웃 만들기 ( 배치 )
  4. 렌더 트리 그리기

1. HTML 파싱, DOM, CSSOM 트리 만들기

사용자가 URL을 입력하면 일련의 과정을 거쳐 서버로부터 index.html 파일을 전달받고 파싱을 진행해 DOM 트리를 만듭니다.

클라이언트가 브라우저 검색창에 www.google.com을 입력하면 DNS가 URL을 IP 주소로 변환 후 라우터를 통해 경로를 지정해 연결됐다면 서버로부터 응답을 받습니다.

파싱

파싱은 HTML 파서와 CSS 파서를 통해 분석되어 DOM트리과 CSSOM트리를 생성하는 과정입니다.
DOM 트리HTML 내용들을 통해, CSSOMlink 태그를 만나 css 파일을 요청에 받은 파일을 분석합니다.

DOM 트리

DOMHTML 내에 원하는 위치에 접근하기 위한 하나의 방식으로 HTML 을 Object 형식으로 바꾼 것입니다. 따라서 태그 하나하나가 각 DOM 요소로 표현됩니다.
DOM 트리는 이러한 DOM들을 트리구조로 만든 것입니다.

2. 렌더 트리 만들기

렌더 트리는 만들어진 DOM 트리를 어떻게 보여줄지 시각적으로 스타일을 지정합니다. 색상, 차원정해진 순서대로같이 시각적 정보들을 담은 사각형으로 구성되고 **** 화면에 표시됩니다.

렌더 트리의 특징

렌더 트리는 DOM 요소와 1:1 매칭이 되지는 않습니다. 예를 들어 css의 display:none과 같은 속성은 사각형이 무시되기 때문에 정보를 가지고 있는 DOM과 매칭이 되지 않습니다.

3. 렌더 트리 레이아웃 만들기

렌더 트리가 생성되어 트리에 추가될 때 크기와 위치 정보가 없는데 이런 값을 계산하는 것을 레이아웃이라 합니다. 즉, 각 노드들에게 스크린의 어느 공간에 위치해야 할지 포지션 값이나 사이즈를 부여합니다.

4. 렌더 트리 그리기

레이아웃까지 다 구성되었다면 브라우저의 구성요소 중 하나인 UI 백엔드에 의해 각 노드들을 정해진 스타일, 위치값을 토대로 화면에 그립니다.

✔️ 자바스크립트 파싱 시점

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리합니다. 따라서 HTML 파싱 중 script 태그를 만나면 DOM 생성을 멈추고 제어 권한을 자바스크립트 엔진에게 넘긴 후, 다시 HTML 파서로 제어 권한을 넘겨줍니다.

⚠️ 자바스크립트 파싱 주의점

브라우저는 동기적이기 때문에, 제어 권한을 자바스크립트 엔진에게 넘겨줬을 때 DOM 생성이 멈추게 되는 블로킹이 발생합니다. 따라서 매끄러운 화면 구성을 위해 script 태그 위치 선정을 어디에 할지 생각해 볼 필요가 있습니다.

🚩 script 태그의 위치

DOM 생성 블로킹을 막기 위해 body 태그마지막script 파일을 추가합니다. 이로 인해 얻을 수 있는 장점은,

  1. HTML 요소들이 script 로딩에 지장을 받지 않아 페이지 로딩 시간을 단축시킵니다.
  2. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM 조작하는 것을 막을 수 있습니다.

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. 구성된 렌더 트리를 이용해 레이아웃을 만들고 브라우저에 그려줍니다.

참고

브라우저는 어떻게 작동하는가?

Javascript Environment 브라우저 동작 원리

profile
데이원컴퍼니 프론트엔드 개발자입니다.

0개의 댓글