38. 브라우저의 렌더링 과정
- 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성함
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행함. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨.
- 렌더 트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML요소를 페인팅함
38.1 요청과 응답
- 브라우저의 핵심 기능 : 필요한 리소스 서버에 요청하기, 서버에서 받은 응답으로 브라우저에 렌더링하기
- 서버는 루트 요청에 대해 암묵적으로 서버의 루트 폴더에 존재하는 정적 파일 index.html을 브라우저로 응답함
(https://abc.com은 https://abc.com/index.html과 같은 요청임)
38.2 HTTP 1.1과 HTTP 2.0
- HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜임
- HTTP/1.1은 커넥션당 하나의 요청과 응답만 처리함
- HTTP/2.0은 커넥션당 여러 개의 요청과 응답이 가능함
38.3 HTML 파싱과 DOM생성
1. 서버에 존재하던 html파일이 브라우저 요청에 의해 응답됨. 이 때, 서버는 브라우저가 요청한 HTML파일을 읽어들여 메모리에 저장한 다음, 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답함
2. 브라우저는 서버가 응답한 HTML문서를 바이트(2진수)형태로 응답받음. 응답된 바이트 형태의 HTML문서는 meta태그 charset에 선언된 인코딩 방식(ex. UTF-8)기준으로 문자열로 변환됨
3. 문자열로 변환된 HTML문서를 읽어들여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해함
4. 각 토큰들을 객체로 변환하여 노드들을 생성함. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성됨 (노드는 DOM을 구성하는 기본요소가 됨)
5. HTML문서는 HTML 요소들의 집합으로 이루어지며 HTML요소는 중첩관계를 가짐. 중첩관계에 의해 부자관계가 형성되고, 모든 노드들을 트리 자료구조로 구성함. 이러한 트리 자료구조를 DOM이라 함
- DOM : HTML문서를 파싱한 결과물
38.4 CSS파싱과 CSSOM생성
- 렌더링 엔진은 HTML을 한줄 한줄 파싱하며 DOM을 생성하다가 CSS를 로드하는 태그를 만나면 DOM생성을 일시 중단함.
- CSS를 HTML과 동일한 파싱과정을 거치며 CSSOM(CSS Object Model)을 생성함.
- CSS파싱을 완료하면 다시 HTML을 파싱하여 DOM생성을 재개함
- CSSOM은 CSS의 상속을 반영하여 생성됨
38.5 렌더 트리 생성
- 렌더링 엔진이 생성한 DOM과 CSSOM은 렌더링을 위해 렌더 트리(render tree)로 결합됨
- 렌더트리는 렌더링을 위한 트리구조의 자료구조로, 화면에 렌더링되지 않는 노드와 CSS에 의해 비표시 되는 노드는 불포함되어 있음
(ex. HTML의 meta태그, script태그, CSS의 display:none) - 이후 완성된 렌더 트리는 각 HTML요소의 레이아웃을 계산하는데 사용되며, 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력됨
1. 브라우저 렌더링 과정 반복실행 요인
- 자바스크립트에 의한 노드 추가 또는 삭제
- 브라우저 창의 리사이징에 의한 뷰포트 크기 변경
- HTML요소의 레이아웃에 변경을 발생시키는 width/height, margin, padding, border, display, position, top/right/bottom/left 등의 스타일 변경
38.6 자바스크립트 파싱과 실행
- HTML은 DOM파일을 생성하다 script태그를 만나면 DOM생성을 일시 중단함
- 자바스크립트 엔진에 제어권을 넘겨 자바스크립트 파싱을 실행
- 자바스크립트 파싱이 종료되면 렌더링 엔진으로 제어권을 넘겨 다시 HTML파싱 시작
1. 자바스크립트 엔진이 하는 일
- 자바스크립트를 해석하여 AST(Abstract Syntax Tree, 추상적 구문 트리)를 생성함
- AST를 기반으로 바이트코드를 생성하여 실행함
1. 토크나이징 (tokenizing)
- 자바스크립트 소스코드를 어휘분석하여 토큰들로 분해함
2. 파싱 (parsing)
- 토큰들의 집합을 구문분석하여 AST를 생성함
3. 바이트코드 생성과 실행
- AST는 바이트코드로 변환되고 인터프리터에 의해 실행됨
38.7 리플로우와 리페인트
- 자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 리플로우, 리페인트가 일어남
- 리플로우 : 레이아웃 변경이 일어나 레이아웃 계산을 다시 하는 것
- 리페인트 : 레이아웃 변경이 없는 경우, 재결합된 렌더 트리를 기반으로 다시 페인트 하는 것
38.8 자바스크립트 파싱에 의한 HTML 파싱 중단
- 자바스크립트 script태그가 html태그가 모두 파싱되기 전에 실행된다면 문제가 발생할 수 있기 때문에 body요소 가장 아래에 자바스크립트를 위치시키는 편이 좋음.
- 이점: 페이지 로딩시간이 단축됨
38.9 script태그의 async/defer어트리뷰트
<script async src='extern.js'></script>
<script defer src='extern.js'></script>1. async어트리뷰트
- HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됨, 단, 자바스크립트 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행됨
2. defer어트리뷰트
- HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행되지만 HTML파싱이 끝난 후에 자바스크립트 파싱이 실행됨
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자