브라우저 렌더링 과정

브라우저 렌더링 과정

 

자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로

웹브라우저를 벗어나 서버사이드 개발에서도 사용할 수 있는 범용성을 가지게 됐다.

 

효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다.

 

HTML CSS JS 작성된 문서를 파싱해서 렌더링 하는 과정.

 

파싱

구문분석은 실행을 위해 텍스트 문서를 읽어서 문자열을 토큰으로 분해

(어희 분석)  문법적 의미와 구조를 반영하여 트리 구조인 파스트리를 생성하는

일련의 과정. 

 

렌더링

HTML CSS JS 로 작성된 문서를 파싱하여 시각적으로 출력

 

38.1 요청과 응답

 

핵심 기능은 필요한 리소스를 서버에 요청하고 응답 받아 시각적으로 렌더링 하는

것을 의미한다. 필요한 리소스는 모두 서버에 존재함. 따라서 서버에 요청후 렌더링하게 된다.

 

 

 

정적파일만을 요청하는 것이 아니라 ajax나 rest api 등을 이용해서 동적 정보들도 데이터를 요청 할 수 있다.

 

38.2.HTTP1.1 과 HTTP 2.0

 

HTTP 는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜 이다.

 

HTTP 1.1 은 기본적으로 커넥션당 하나의 요청과 응답을 처리 따라서 여러개의 요청을 한번에

전송 할 수 없고, 응답할 수 없다. 

 

HTTP 2.0 은 위의 단점을 보완해서 여러개의 응답을 한번에 처리 가능하게 되었고

따라서 50%정도의 속도가 빠르다고 알려져 있다.

 

38.3 HTML 파싱과 DOM 생성

 

HTML 문서를 파싱해서 브라우저가 이해 할 수 있는 구조인.DOM 을 생성한다.

 

 

 

38.4 CSS 파싱과 CSSOM 생성

 

렌더링 엔진은 처음부터 한줄 씩 순차적으로 파싱하며 DOM을 생성한다. 이때 link, style 태그를 만나게되면, 파싱을 중지하고 파일을 요청받는다. 이를 해석하여 CSSOM을 생성하고 이를 마친후

다시 생성을 제개 한다.

 

38.5 렌더트리 생성

 

렌더링 엔진은 위의 응답된 html과 css를 파싱하여 각각 DOM 과 CSSOM을 구분하여 생성한다.

그다음 렌더링을 위해서 렌더 트리로 결합한다.

 

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

 

html에서 js를 만나면 css와 마찬가지로 일시 중지한 후 

코드를 파싱하기 js를 파싱하고 실행한다음 다시 dom을 재개한다.

이때 js의 경우 렌더링 엔진이 아니라 js엔진이 처리하도록 한다.

기본적으로 모든 js엔진은 ecma 사양을 준수 하도록 구현되어 있다.

 

이를 통해 AST를 생성하고 이를 기반으로 인터프리터가 결과물을 생성하여 실행한다.

 

토크나이저 -> 파서 -> 바이트코드 생성 -> 실행

의 구조를 띈다.

 

38.7 리플로우와 리페인트 

 

js에서 DOM이나 CSSOM을 건드리게 된다면 다시 렌더 트리에 결합되고 재렌더링 과정을 거치는데 

이를 리플로우 리페인팅 이라고 한다.

왜 DOM을 직접제어 하는것이 문제가 되는지 이를 통해 알 수 있다.

 

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

 

렌더링 트리와 자바스크립트 엔진은 병렬적 진행이 아니라 개별적으로 진행되는 것을 알 수 있다.

따라서 스크립트는 돔이 그려진 후에 동작 해야함.

 

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

DOM생성이 중단되는 문제를 근본적으로 해결하기 위해 등작하였음.

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

하지만 실행시점의 차이가 있고, 파일의 로드가 완료된 직후에 진행되며 이때 

파싱이 중단되고 js파서가 실행된다.

 

async와 defer의 경우 태그 순서대로 보장되지 않음으로 사용에 유의해야 한다.

 

Defer 의 경우로드 완료시 DOM이베트를 제공하기 때문에 생성 이후 동작해야하는 자바스크립트

에서 사용된다.