브라우저 렌더링 과정
-
로딩
-
불러온 html, css 파일을 파싱하여 Rendering트리를 구성한다.
(document object model: HTML태그를 JS에서 이용할수 있는 객체로 만든다)1)이때, html파일은 DOM트리 생성
2)css파일은 파싱하여 CSSOM트리 생성
3)마지막으로 DOM트리와 CSSOM트리로 Redering트리를 생성 -
레이아웃잡기 : 렌더링 트리가 구축되면 (렌더링에 필요한 노드들만 가지고 있는 트리),
순차적으로 화면에 배치한다.
노드와 스타일값을 참고하여 배치한다.
- 그리기(페인팅) : 렌더링트리의 각 노드들을 화면상에 실제 픽셀로 변환하여 사용자에게 최종 웹 페이지의 모습을 보여준다.
요약
Q1. 브라우저 렌더링 과정?
A. 브라우저의 기본역할은 HTML, CSS에 따라 HTML파일을 해석해서 표시하는 것입니다.
렌더링 엔진은 먼저 HTML문서를 파싱해서 DOM트리를 구축하고
CSS마크업을 파싱해서 앞서 구축한 DOM트리와 함께 RENDERING트리를 생성합니다.
렌더링 트리는 렌더링하는데 필요한 노드들만 가지고 있는 트리로,
구축이 되면 순차적으로 화면에 배치합니다.
이 렌더링 트리를 바탕으로 레이아웃을 잡고,
화면에 그리는 작업을 수행해 사용자에게 웹 페이지의 최종 결과를 보여주게 됩니다.
Q2. 자바스크립트 삽입방식과 위치에 따른 차이
A. HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용한다.
웹 브라우저가 코드를 해석하는 과정에서 <script>를 만나면 DOM생성을 중지하고,
Javascript요소를 <script> 먼저 실행하게 된다.
브라우저는 동기적으로 작동하기 때문에 <script>위치에 따라 DOM생성이 지연될 수 있다.
-
1) Head안에 위치 : dom트리 생성 중단으로 완성되지 못한 화면이 렌더링 될 수 있음.
<head> <script> //코드내용 </script> </head> -
2) body태그 가장 끝에 위치 : 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행.
..... <script> //코드내용 </script> </body>
용어
- 렌더링 엔진
요청한 콘테츠를 표시. 예를 들면 HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시한다.
프론트엔드 개발자