브라우저의 렌더링 과정

 

제가 브라우저와 DOM,HTML에 대해 공부했던 내용입니다. 참고하실분은 참고해주세요~!

5주차.docx

0.55MB

6주차.docx

1.47MB

브라우저의 렌더링 과정

1. HTML,CSS,JS, 이미지,폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합아여 렌터 트리를 형성한다.

3. 브라우저의 JS 엔진은 서버로부터 응답된 JS를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환,실행한다. JS는 DOM API를 이용해 DOM,CSSOM을 변경할 수 있다. 변경된 후 다시 렌더 트리로 결합된다.

4. 렌더 트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저 화면에 HTML요소를 페인팅한다.

 

1.요청과 응답

서버에 요청을 전송하기 위해 브라우저가 제공하는 주소창에 URL을 입력하고 엔터를 누르면 URL호스트 이름이 DNS를 통해 IP 주소로 변환되고 이 IP주소를 갖는 서버에거 요청을 전송한다.

2.HTTP

http2.0 은 1.1에서 불가능했던 여러개의 요청에 한번에 대응할 수 없는 문제점을 해결해, 여러 리소스의 동시 전송이 가능하다.

 

3.HTML파싱, DOM생성

브라우저가 요청한 HTML문서는 순수 텍스트이다. 이를 브라우저가 이해할 수 있는 자료구조로 변경하여 메모리에 저장해야 한다. 이처럼 브라우저가 이해할 수 있는 자료구조로 변경된 형태를 DOM(Document Object Model)이라고 한다.

HTML을 이용해 DOM을 생성하지만, HTML과 DOM은 같은 것은 아니다. DOM은 HTML문서가 표기하지 않는 기본 태그들을 생성과 동시에 갖고 있기 때문에 HTML의 내용과 다를 수도 있기 때문이다.

4. CSS 파싱과 CSSOM생성

렌더링 엔진은 HTML을 순차적으로 파싱하여 DOM을 생성한다. DOM을 생성하던 와중 CSS를 로드하는 link나 style태그를 만나면 DOM생성을 일시중지하고 CSS를 HTML과 동일한 파싱 과정을 통해 CSSOM(CSS Object Model)을 생성한다. CSS파싱이 끝나면 아까 정지했던 DOM생성을 재개한다. 

한마디로 DOM은 HTML을 나타내는 자료구조이고, CSSOM은 CSS를 나타내는 자료구조인 것이다. 

 

5.렌더 트리 생성

렌더 트리란 한마디로 DOM과 CSSOM이 렌더링을 위해  합쳐진 트리 자료구조라고 생각하면 된다. 따라서 화면에 렌더링되지 않는 display : none과 meta, script등과 같은 노드들은 포함하지 않는다. 

 

6.JS 파싱과 실행

HTML을 파싱하여 생성된 DOM은 DOM API를 제공한다. JS에서 DOM API를 사용하면 이미 생성되어 있는 DOM이나 CSSOM을 동적으로 조작할 수 있다. 

 

CSS와 마찬가지로 DOM을 파싱하는 과정중에 Script를 만나면 일시 정지하고 Script문을 먼저 해석하고 난 뒤 다시 DOM을 생성한다. 따라서 Script문을 </body>태그 바로 상위에 선언하는 이유가 이것 때문이다.

 

7.리플로우, 리페인트

JS에서 DOM API가 사용된 경우 DOM, CSSOM이 변경된다. 변경된 이후 다시 렌더 트리로 결합되고 이를 기반으로 다시 레이아웃과 페인트 과정을 거치는데, 이를 리플로우, 리페인트라고 한다.

8. async/defer 어트리뷰트

JS에 의해 DOM생성이 중단되는 문제를 해겨라기 위해서, script태그에 async와 defer 어트리뷰트가 추가되었다.

src 어트리뷰트를 사용하여 JS파일을 외부에서 로드하는 경우에만 사용할 수 있다. 

<script async src="extern.js"></script>
<script defer src="extern.js"></script>

async와 defer를 사용하면 HTML파싱과 외부 JS파일의 로드가 비동기적으로 동시에 진행된다. 

둘은 진행 시점에 차이가 있다

 

async

HTML파싱과 JS로드가 비동기적으로 동시에 진행된다. 단 JS파일의 파싱과 실행은 JS로드가 완료된 후 진행되며 이때 HTML파싱이 중단된다. 여러개의 async 를 지정하면 순서와 상관없이 로드가 완료된 순서대로 파싱되므로 순서가 필요한 script의 경우 async를 지정하면 안된다.

defer

defer또한 비동기적으로 동시진행된다. 하지만 파싱은 DOM생성이 완료된 직후에 진행된다. 따라서 DOM이후에 실행 될 JS에 적용하면 유리하다.