38장: 브라우저의 렌더링 과정

38.1 요청과 응답

브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 시각적으로 렌더링

38.2 HTTP 1.1과 HTTP 2.0

• HTTP 1.1은 다중 요청/응답이 불가하다는 단점
• HTTP 2.0은 커넥션당 여러 개의 요청과 응답, 즉 다중 요청/응답이 가능

38.3 HTML 파싱과 DOM 생성

브라우저 렌더링 과정

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

38.4 CSS 파싱과 CSSOM 생성

렌더링 엔진은 HTML을 순차적으로 파싱하여 DOM을 생성하고 css를 로드하는 태그를 만나면 DOM생성을 중단한뒤 로드한 css파일을 HTML과 동일한 파싱과정을 거치며 해석하여 CSSOM을 생성

38.5 렌더 트리 생성

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

• 렌더트리는 렌더링을 휘한 트리 구조의 자료구조
  • 브라우저 화면에 렌더링되는 노드만으로 구성
    
    

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

• 렌더링 엔진으로 부터 제어권을 넘겨받은 자바스크립트 엔진은 자바스크립트 코드를 파싱, AST를 생성
• AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트코드를 생성하여 실행
  

38.7 리플로우와 리페인트

자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 변경됨. 이때 변경된 DOM과 CSSOM은 다시 렌더트리로 결합된 후 렌더트리를 기반으로 레이아웃 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링

• 리플로우: 레이아웃 계산을 다시 함
• 리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트

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

async와 defer 어트리뷰트를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행

async어트리뷰트

• HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행
• 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며, 이때 HTML 파싱이 중단된다.

defer어트리뷰트

• HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행
• 단, 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후 진행