Web Browser - 웹 브라우저 렌더링 과정

Moolbum·2022년 6월 9일
0

공부

목록 보기
4/5
post-thumbnail

웹 브라우저 렌더링 과정

웹 브라우저 렌더링이란?

HTML, CSS, JavaScript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력되는 것을 말합니다.

파싱 : 어떤 페이지에서 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것


렌더링 과정의 순서를 요약하면

1. 서버에 요청 및 응답(HTTP)
2. 브라우저 렌더링엔진 HTML 파싱(DOM)
3. CSS파싱(CSSOM)
4. 렌더 트리 생성
5. 자바스크립트 엔진 파싱 및 실행
6. 리플로우, 리페인트

6단계로 축약할 수 있습니다. 하나하나 보겠습니다.


1. 요청과 응답

주소창에 URL을 입력하여 필요한 리소스를 서버에 요청하고 서버가 응답한 리소스를 파싱하여 렌더링 합니다.

URL의 구조


2. HTML파싱과 DOM 생성

브라우저 렌더링 엔진은 응답받은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조 DOM을 생성한다.
DOM이란? HTML문서에 접근하기위한 인터페이스입니다.


3. CSS파싱과 CSSOM 생성

CSS를 로드하는 link, style 태그를 만나면 DOM 생성을 일시 중단하며. CSSOM을 생성합니다. CSS파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하여 DOM 생성을 재개합니다.


4. 렌더트리 생성

DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합된다. 렌터트리는 렌더링을 위한 트리 구조의 자료구조다.

따라서 브라우저 화면에 렌더링 되지 않는 노드(meta태그, script태그), CSS에 의한 비표시(display:none)는 포함하지 않는다. 렌더트리는 HTML 요소의 레이아웃(위치와 크기)을 계산하는데 사용된다.


5. 자바스크립트 파싱과 실행

script태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 서버에 요청하면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다.

자바스크립트 엔진은 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 언어로 변환, 실행하는 역할을 한다. 이후 파싱이 종료되면 DOM생성을 재개한다.



6. 리플로우와 리페인트

자바스크립트 코드에서 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM과 CSSOM이 변경된다. 이때 변경된 렌더트리를 기반으로 화면에 다시 렌더링 된다. 이 과정을 리플로우, 리페인트라합니다.

리플로우 : 레이아웃을 다시 계산하는 것 (요소의 크기, 위치, 추가,삭제, 윈도우 리사이징 등)
리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인트를 하는것

profile
Junior Front-End Developer 👨‍💻

0개의 댓글