브라우저의 작동 원리💻💫

YUZAMIN
YUZAMIN
Hello, World! I'm YUZAMIN, a diligently endeavoring frontend developer 🐤💦
브라우저의 작동 원리💻💫

Summary

브라우저는 어떻게 동작할까?😯

웹브라우저의 주요 기능

사용자가 원하는 자원을 서버에 요청한 뒤 브라우저에 표시하여 보여주는 것

  • 자원: 주로 HTML 문서, PDF, 이미지, etc.

  • HTML, CSS 표준 명세에 따라 HTML 파일 해석 및 표시

브라우저의 기본 구조

  • 사용자 인터페이스: 페이지 보여주는 창 외의 부분, 사용자가 직접 조작할 수 있음(주소 표시줄, 이전/다음 버튼 등)

  • 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어

  • 렌더링 엔진: 요청한 콘텐츠(html, css 문서)를 파싱하여 화면에 표시

  • 통신: 각종 네트워크 요청을 수행

  • UI 백엔드: 버튼 등 기본적 위젯을 그림

  • 자료 저장소: 보조 기억 장치(LocalStorage, Cookie 등)에 데이터 저장

  • 자바스크립트 해석기: 자바스크립트 코드 해석 및 실행

동작 과정

  1. HTML 문서 파싱 👉🏻 DOM 노드로 변환
  2. 외부 CSS 파일과 스타일 요소 파싱
  3. 렌더 트리 생성
  4. 렌더 트리 배치 👉🏻 각 노드가 정확한 위치에 표시됨
  5. 렌더 트리 그리기

1. 서버로부터 HTML 문서 다운로드 👉🏻 HTML, CSS 문서 parsing

  • Parsing: 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것, 문서 구조를 나타내는 노드 트리(파싱 트리, 문법 트리)로의 변환

  • 파싱 후 DOM, CSSSOM 구축

    • DOM: 문서 객체 모델, HTML 문서를 객체로 표현한 것
1
2
3
4
5
6
7
8

<html>
 <body>
  <p>TEST</p>
  <div>
  <img src="test.jpg" alt="test.jpg" />
  </div>
 </body>
</html>

다음과 같은 코드를

이런 DOM 트리로 변환하는 과정

  • CSSOM 트리: CSS 내용을 파싱하여 노드를 만들어 트리 구조로 구축한 것

2. DOM, CSSOM을 합쳐 렌더 트리 생성 👉🏻 문서를 시각적인 구성 요소로 변환

  • 렌더 트리: 스타일 정보가 설정되어 있으며, 실제로 화면에 표시되는 노드들로만 구성됨

    • DOM 트리와 각 DOM 요소들에 상응하는 스타일을 참조하는, 화면에 그려질 정보들이 담긴 데이터

  • 다만, 모든 요소가 다 화면에 표시되는 것은 아님(display: none은 visibility: invisible과 달리 화면에서 공간을 차지하지 않기 때문에 렌더 트리에서 제외됨)

3. 각 노드들의 위치와 크기 계산(Layout)

  • 렌더 트리의 노드들의 스타일, 속성에 따라 브라우저 위의 어디에서 얼마만큼의 공간을 차지하여 그려질지 계산하는 단계
    • 브라우저 뷰포트: ViewPort, 그래픽이 표시되는 브라우저 영역
    • vh, vw와 같은 상대적인 속성들은 pixel 단위로 변환됨

  • 브라우저 0,0의 위치부터 각 영역의 viewport만큼의 면적 가지며 배치됨

    • 전역 배치: 모든 렌더러에 영향을 주는 전역적인 스타일을 변경했을 때 동기적으로 한 번에 일어남

    • 점증 배치: 작은 변경으로 인해 페이지 전체를 다시 배치하지 않을 수 있게 변경되는 특정 부분과, 그 부분과 관련된 렌더러들만 비동기적으로 다시 배치하는 것

4. 실제로 화면에 그려짐(Paint)

  • 렌더 트리 전테적으로 탐색되며 각 렌더러의 paint 메소드가 호출되면, UI Backend 요소가 사용되며 그려짐

    순서

    1. 배경
    2. 배경 이미지
    3. 테두리
    4. 자식 엘리먼트
    5. 아웃라인
  • 다 그려진 뒤에 브라우저에서 변경 일어날 경우 Reflow(Layout)와 Repaint 실행됨

5. Reflow(Layout) & Repaint

  • Reflow: 액션, 이벤트 등에 의해 html 요소의 크기, 위치 등이 수정되면 영향을 받는 노드들을 포함하여 Layout 과정 재수행 👉🏻 렌더 트리 및 각 요소들의 크기, 위치 다시 계산

  • Repaint: Reflow 이후 수정 사안을 반영하여 실제 화면에 다시 그려주는 과정

    • 레이아웃에 영향 주지 않는 스타일 속성(background-color 등)이 변경되었을 경우 Reflow 없이 Repaint만 수행됨

참고1

참고2

참고3

참고4