[모던 JS] CH 38. 브라우저의 렌더링 과정

CH 38. 브라우저의 렌더링 과정

렌더링?

- HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것

38.1 요청과 응답

- 브라우저의 핵심 기능

: 필요한 리소스(HTML, CSS 등)를 서버에 요청하고 서버로부터 응답 받아 브라우저에 시각적으로 렌더링하는 것

- 브라우저의 주소창에 URL을 입력하고 엔터를 누르면 URL의 호스트 이름이 DNS를 통해 IP주소로 변환

- 이 IP 주소를 갖는 서버에게 요청을 전송

38.2 HTTP 1.1과 HTTP 2.0

- HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)

HTTP1.1

- 기본적으로 커넥션 당 하나의 요청과 응답만 처리

- 리소스의 동시 전송이 불가능한 구조

- 요청할 리소스의 개수에 비례하여 응답 시간도 증가하는 단점

HTTP 2.0

- 커넥션 당 여러 개의 요청과 응답이 가능

- 여러 리소스 동시 전송이 가능

- HTTP 1.1에 비해 페이지 로드 속도가 약 50% 빠름

38.3 HTML 파싱과 DOM 생성

- 브라우저 요청에 의해 서버가 응답한 HTML문서는 순수한 텍스트

- 이를 시각적 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조(DOM)로 변환해 저장해야 함

- DOM은 HTML 문서를 파싱한 결과물

38.4 CSS 파싱과 CSSOM 생성

- 렌더링 엔진은 DOM을 생성해나가다가 CSS를 로드하는 태그를 만나면 DOM 생성을 일시 중단함

- CSS 파일의 태그를 HTML과 동일한 파싱 과정(바이트->문자->토큰->노드->CSSOM)을 거쳐 해석해 CSSOM생성함

- CSSOM은 CSS의 상속을 반영하여 생성됨

38.5 렌더 트리 생성

- DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합됨

- 렌더 트리는 브라우저 화면에 렌더링되는 노드만으로 구성됨

- 렌더링 과정은 반복해서 실행될 수 있음

38.6 자바스크립트 파싱과 실행

- 자바스크립트 파싱과 실행은 자바스크립트 엔진이 처리함

- CPU가 이해할 수 있는 저수준 언어로 변환하고 실행하는 역할

- A ST(추상적 구문 트리) 생성

: AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트코드를 생성하여 실행함

38.7 리플로우와 리페인트

- 만약 자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경됨

- 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고,

   변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링 함

: 리플로우 - 레이아웃 계산을 다시 하는 것

: 리페인트 - 재결합된 렌더 트리를 기반으로 다시 페인트 하는 것

- 레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 실행됨

38.8 자바스크립트 파싱에 의한 HTML 파싱 중단

- 병렬적 파싱이 아닌, 직렬적으로 파싱 수행

- body 요소의 가장 아래에 자바스크립트 위치 시키기

: DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하는 에러가 발생할 우려 없음

: 자바스크립트가 실행되기 이전에 DOM 생성이 완료되어 렌더링되므로 레이지 로딩 시간이 단축되는 이점

38.9 script 태그의 async/defer 어트리뷰트

- DOM에 의해 생성이 중단되는 문제를 근본적으로 해결하기 위해 추가됨

- src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용 가능

async

- 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행

- 이때 HTML 파싱 중단

defer

- 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후 진행