모던 자바스크립트 Deep Dive 38장 브라우저의 렌더링 과정

파싱?

구문 분석 syntax analysis. 텍스트 문서를 토큰으로 분해하여 트리 구조의 자료구조의 파스 트리를 생성하는 과정을 말한다.

렌더링?

브라우에 시각적으로 출력하는 것을 말한다.

브라우저의 렌더링 과정

1. HTML, CSS, 자바스크립트, 이미지, 폰트 등... 필요한 리소스를 서버로부터 응답 받는다.
2. HTML과 CSS를 파싱하여서 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
3. AST 생성하고 이를 바이트코드로 변환한다. DOM API를 통해서 DOM이나 CSSOM을 변경할 수 있다.
4. 렌더 트리를 기반으로 레이아웃을 계산(리플로우)하고 화면에 HTML 요소를 페인팅한다. (리플로우와 리페인팅은 성능에 악영향을 주는 작업)

HTTP 1.1 : 커넥션당 하나의 요청과 응답만 처리한다.
HTTP 2.0 : 커넥션당 여러 개의 요청과 응답을 처리한다.