- 파싱(parsing) : 문법에 맞게 작성된 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토근(token, 문법적으로 더는 나눌 수 없는 코드의 기본 요소)으로 분해하고, 토큰에 문법적의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정
- 렌더링(rendering) : HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것
렌더링 과정
- 필요한 리소스를 요청
- 서버로부터 응답
- 응답받은 HTML, CSS를 파싱하여 DOM, CSSOM을 생성
- 결합하여(DOM + CSSOM) 렌더트리 생성
- 렌더트리를 기반으로 HTML 요소의 레이아웃(위치와 크기) 계산
- 브라우저 화면에 HTML요소 페인팅
# 요청과 응답
- 서버에 요청을 전송하기 위해 브라우저는 주소창을 제공한다.
- URL(Uniform Resource Identifier)
# HTML 파싱과 DOM 생성
- 응답받은 HTML은 문자열로 이루어져 있다.
- 문자열을 보이는 결과물로 출력하여 렌더링 하려면 브라우저가 이해할 수 있는 자료구조(객체)로 변환해야 한다.
- 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성한다.
- 서버에 존재하던 HTML 파일이 브라우저의 요청에 의해 응답된다.
- 브라우저는 서버가 응답한 HTML 문서를 바이트(2진수) 형태로 응답받는다. 응답된 바이트 형태의 HTML 문서는 meta태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식(UTF-8)을 기준으로 문자열로 변환된다.
- 문자열로 변환된 HTML 문서를 읽어 들여 문법적 의미를 갖는 코드의 최소 단위인 토큰(token)들로 분해한다.
- 각 토큰들을 객체로 변환하여 노드(node)들을 생성한다. (DOM을 구성하는 기본요소)
- HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩관계를 가진다. 중첩관계에 의해 부자관계가 형성된다. 이러한 HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이 노드들로 구성된 트리 자료구조를 DOM이라고 부른다.
📌 요청및응답 → 문자열로 변환 → 토큰 → 노드 생성→ DOM 생성
# CSS 파싱과 CSSOM 생성
- DOM을 생성하다가 CSS파일을 만나면 DOM 생성을 일시 중단한다.
- CSS파일을 서버에 요청하여 HTML 과 동일한 파싱 과정(바이트→ 문자→ 토큰→ 노드→ CSSOM)을 거치며 해석하여 CSSOM(CSS Object Model)을 생성한다.
- CSS 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다.
- 부모요소에 적용한 스타일링이 자식요소에도 반영된다.(상속)
# 렌더 트리 생성
- DOM + CSSOM = render tree
- 브라우저 화면에 렌더링되지 않는 노드(예:meta태그, script 태그 등)와 CSS에 의해 비표시(예:display: none)되는 노드들은 포함하지 않는다.
- 렌더트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.
- 완성된 렌더트리는 각 HTML 요소의 레이아웃(위치와 크기)를 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅(painting)처리에 입력된다.
# 자바스크립트 파싱과 실행
- 자바스크립트 파싱과 실행은 자바스크립트 엔진이 처리한다.
- script 파일을 만나서 렌더링 엔진으로 부터 제어권을 넘겨받은 자바스크립트 엔진은 자바스크립트 코드를 파싱하기 시작한다.
- 자바스크립트 엔진은 자바스크립트를 해석하여 AST(Abstract Syntax Tree, 추상적 구문 트리)를 생성한다.
- AST를 기반으로 인터프리터가 실행 할 수 있는 중간코드(intermediate code)인 바이트코드를 생성하여 실행한다.
# 리플로우(reflow)와리페인트(repaint)
- 리플로우(reflow) : 레이아웃을 다시 계산하는 것, 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행된다.
- 노드 추가/삭제
- 요소의 크기/위치 변경
- 윈도우 리사이징
- 리페인트(repaint) : 재결합된 렌더 트리를 기반으로 다시 페인트 하는 것
- 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링 한다.
- 리플로우와 리페인트는 비용이 많이들고 성능에 악영향을 준다. 가급적 변경하지 않는것이 좋다.
📌참고
모던자바스크립트 Deep dive
'Web' 카테고리의 다른 글
이벤트 루프와 비동기적으로 처리하기 (0) | 2023.02.02 |
---|---|
#3 이벤트란? (0) | 2023.01.27 |
#2 DOM이란? (0) | 2023.01.26 |