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

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

 

브라우저의 랜더링 과정

38.1 요청과 응답

• 요청과 응답은 개발자 도구의 Network 패널에서 확인할 수 있다.
• 브라우저의 렌더링 엔진이 html 을 파싱하는 도중에 외부 리소스를 로드하는 태그, 즉 css 파일을 로드하는 link 태그, img,script 태그들을 만나면 html 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청

38.2 HTTP 1.1과 HTTP 2.0

• 1.1 은 커넥션당 하나의 요청과 응답만 처리한다 = 여러개의 요청을 한번에 전송할 수 없고, 응답도 마찬가지
• 동시전송이 불가능한 구조, 요청할 리소수의 개수에 비례하여 응답시간도 증가
• 2.0은 다중요청/ 응답이 가능하다. 1.1에 비해 페이지 로드 속도가 50% 빠름

38.3 HTML 파싱과 DOM 생성

• 브라우저의 랜더링 엔진은 다음 그림과 같은 과정을 통해 응답 받은 html 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다

• DOM은 HTML 문서를 파싱한 결과물이다.

38.4 CSS 파싱과 CSSOM 생성

• CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.
• link 태그의 href 어트리뷰트에 지정된 CSS 파일을 서버에 요청하여 로드한 CSS 파일이나 style 태그 내의 CSS HTML과 동일한 파싱과정 (바이트 -> 문자 ->토큰 -> 노드->CSSOM)을 거치며 해석하여 생성

38.5 랜더 트리 생성

• DOM과 CSSOM 랜더링을 위해 렌더 트리로 결합된다
• 랜더 트리는 랜더링을 위한 트리구조의 자료구조다.
• 브라우저 화면에 랜더링되는 노드만으로 구성한다.
• 각 HTML 요소의 레이아웃을 계산하는 데 사용되면 브라우저 화면에 픽셀을 렌더링 하는 페인팅 처리에 입력된다.
• 반복 실행 가능

• 리렌더링이 빈번하게 발생하지 않도로 주의할 필요가 있다

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

• 자바스크립트 파싱과 실행은 브라우저 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다
• 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행
• ECMAScript 사양 준수
• 렌더링 엔진으로부터 제어권을 넘겨받으면 코드를 파싱하기 시작한다
• 자바스크립트를 해석하여 AST(추상적 구문 트리)를 생성
• AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트 코드를 생성하여 실행
• 토크나이징, 파싱, 바이트코드 생성과 실행

38.7 리플로우와 리페인트

• DOM,CSSOM을 변경하는 DOM API가 사용된 경우 DOM 이나 CSSOM이 변경된다 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링한다.
• 이를 리플로우, 리페인트라 한다.
• 리플로우는 레이아웃 게산을 다시 하는 것
• 리페인트는 재결합된 렌더 트리를 기반으로 다시 페인트 하는 것
• 38.8 자바스크립트 파싱에 의한 HTML 파싱 중단
• script 태그위체 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있다는 것을 의미
• script 태그의 위치는 중요한 의미를 갖는다.

• 이러한 문제들이 발생할 수 있으니 body 맨 아래에 자바스크립트를 위치시키는것이 좋다
• 38.9 script 태그의 async.defer 어트리뷰트
• 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 async와 defer 어트리뷰트가 추가 되었다

<script async src = "index,js"></script>
<script defer src = "index,js"></script>

• HTML 파싱과 외부 스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 자바스크립트 실행 시점에 차이가 있다.

async 어트리뷰트

• HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.
• 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행 이때 HTML 파싱 중단
• 여러개의 script 태그에 async 어트리뷰트를 지정하면 순서와 상관없이 로드가 완료
• IE10 이상에서 지원한다.
• defer  어트리뷰트
• HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.
• 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후 진행 즉 DOM 생성이 완료된 직후에 진행한다.
• 따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다
• IE10 이상에서 지원한다.