본문 바로가기
Engineering

브라우저 렌더링 과정

브라우저가 HTML·CSS·JS를 받아 화면에 그리기까지의 렌더링 파이프라인(파싱·렌더 트리·레이아웃·페인트)을 단계별로 정리했습니다.

1. 브라우저의 렌더링 과정 요약

  1. 브라우저가 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음
  2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리 생성
  3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree:추상적 구문 트리)를 생성하고 바이트코드로 변환하여 실행. 변경된 DOM과 CSSOM은 다시 렌더트리로 결합
  4. 렌더트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML요소 페인팅

2. 용어 해설

  • 파싱 : 구문 분석(syntax analysis) 목적 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어들여 실행하기 위함 순서 : 문자열을 토큰으로 분해(어휘분석 lexical analysis) -> 토큰에 문법적 의미와 구조 반영하여 트리구조의 자료구조인 파스 트리를 생성 파싱 완료 이후 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행
  • 렌더링 : HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것

3. 요청과 응답

  1. 브라우저의 핵심 기능 : 필요한 리소스(HTML, CSS, 자바스크립트, 이미지, 폰트 등 정적파일 OR 서버가 동적으로 생성한 데이터)를 서버에 요청하고 응답받아 브라우저에 시각적으로 렌더링 하는 것 => 렌더링에 필요한 리소스는 모두 서버에 존재하므로, 필요한 리소스를 서버에 요청하고 응답받은 리소스를 파싱하여 렌더링 하는것
  2. www.google.com 엔터치면 일어나는 일
  1. 브라우저는 캐싱된 DNS 기록을 통해 www.google.com 에 대응되는 IP 주소 확인
  2. 캐시에 없으면, ISP 의 DNS 서버가 www.google.com 을 호스팅하는 서버의 IP 주소를 찾기 위해 DNS query 를 날림
  3. 브라우저가 서버와 TCP connection 을 함
  4. 브라우저가 웹 서버에 HTTP 요청을 함
  5. 서버가 요청을 처리하고 응답을 생성
  6. 서버가 HTTP 응답을 전송함
  7. 브라우저가 HTML 컨텐츠를 보여줌
  • DNS : Domain Name System
  • TCP/IP : 컴퓨터와 컴퓨터간에 데이터를 전송 할 수 있도록 하는 장치로 인터넷이라는 거대한 통신망을 통해 원하는 정보(데이터)를 주고 받는 기능을 이용하는 응용 프로토콜
  • 브라우저의 렌더링엔진은 HTML을 파싱하는 도중 외부 리소스를 로드하는 태그(link-css, img, script)등을 만나면 HTML의 파싱을 중단하고 해당 리소스 파일을 서버로 요청

4. HTTP

  1. Hyper Text Transfer Protocol : 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)

  2. HTTP/1.1 - TCP

  • 커넥션 당 하나의 요청과 응답만 처리 : 동시 전송 문제와 다수의 리소스 처리로 인한 속도와 성능 이슈 존재
  • link, img, scipt 등에 의한 리소스 요청&응답이 개별적으로 전송됨
  • 헤더에 많은 메타 정보들이 저장되어 있고, 매 요청마다 쿠키 같이 중복된 헤더를 매번 전송하므로 헤더가 큰 편
  1. HTTP/2 - TCP
  • 커넥션 당 여러 개의 요청과 응답이 가능
  • HTTP/1.1에 비해 페이지 로드 속도가 약 50%정도 빠름
  • Header 정보를 HPACK 압축 방식을 이용한 압축 전송이 가능
  1. HTTP/3 - UDP
  • UDP 기반 프로토콜인 QUIC 를 사용해 통신
  • 기존 HTTP 들과 가장 큰 차이점이라면 TCP가 아닌 UDP 기반의 통신을 한다는 것
  1. HTTPS ?
  • HTTP에 데이터 암호화가 추가된 프로토콜
  • 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 공개키 암호화를 지원
  • 인증된 기관 CA(Certificate Authority)에 공개키를 전송하여 인증서를 발급받아야 함

브라우저의 렌더링

HTML 파싱과 DOM 생성

브라우저의 렌더링 엔진은 byte-> 문자 -> 토큰 -> 노드 -> DOM의 과정을 통해 응답받은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model) 생성 즉, DOM은 HTML 문서를 파싱한 결과물

  1. 노드
  • 문서 노드 : document
  • 요소 노드 : html, head, body, meta, link, script, ul, li
  • 어트리뷰트 노드 : charset="UTF-8", rel="stylesheet", src=app.js, id="apple",
  • 텍스트 노드 : Apple, Banana

CSS 파싱과 CSSOM 생성

byte-> 문자 -> 토큰 -> 노드 -> CSSOM CSS를 파싱하여 CSSOM트리 생성 CSS의 상속을 반영하여 생성

css 적용 우선순위

  1. 속성값 뒤에 !important
  2. 인라인 스타일링 : HTML 에서 style 을 직접 지정한 속성
  3. #id 로 지정한 속성
  4. .class : 추상클래스 로 지정한 속성
  5. 태그이름 으로 지정한 속성 : h1
  6. 상위 객체에 의해 상속된 속성 => 모든 설정이 같은 경우는 나중에 선언한 것이 우선 적용

렌더 트리 생성

렌더트리 = DOM+ CSSOM 브라우저 화면에 렌더링되지 않는 노드(<meta>, <script>)와 CSS에 의해 비표시되는 노드(display:none)들은 포함하지 않음 => 브라우저 화면에 렌더링되는 노드만으로 구성됨

Render tree => Layout => Paint

  1. 리플로우 : 레이아웃 계산을 다시 하는 것 // 레이아웃 변경이 없는 경우에는 일어나지 않음 : 노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징(뷰포트 크기 변경)

  2. 리페인트 : 재결합된 렌더트리를 기반으로 다시 페인트

=> 리렌더링

자바스크립트 파싱과 실행

HTML 파싱 중 <script>태그를 만나면, 렌더링엔진은 HTML 파싱을 일시 중단하고 자바스크립트엔진에 제어권을 넘김 AST(Abstact Syntax Tree) 생성 => 생성된 AST기반으로 인터프리터가 실행할 수 있는 중간코드인 바이트코드 생성하여 실행

script태그 위치에 따라 HTML파싱이 중단되어 DOM 생성이 지연될 수 있다. => scipt 태그를 body 요소의 가장 아래 위치시키는 것이 좋음 why? 렌더링엔진이 HTML요소를 모두 파싱하여 DOM생성을 완료한 이후에 자바스크립트가 실행됨 따라서, DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하는 에러가 발생할 우려가 없음 또한, 페이지 로딩 시간 단축됨

  • 토크나이징
  • 파싱

참고자료 - 모던자바스크립트 deep dive

목록으로원문 보기 ↗