웹사이트는 어떻게 보여지는가-브라우저의 렌더링
웹사이트는 사용자의 요청에 따라 웹사이트를 구성하는 HTML과 CSS Javascript를 전달받고 이 파일들을 브라우저가 이해하고 렌더링하는 과정을 거쳐 눈에 보여지게 된다.
브라우저의 렌더링 과정#
브라우저는 HTML 과 CSS를 바로 이해하지 못한다 따라서 이해하고 화면에 그릴 수 있도록 하는 일련의 과정을 거친다. 그리고 이 과정을 Critical Rendering Path라고 부른다.
-
HTML 파싱과 DOM 생성
첫번째로 브라우져는 서버로 부터 받은 HTML을 파싱하여 점진적으로 DOM(Document Object Model)을 생성한다. 파싱 과정은 첫줄부터 순차적으로 진행된다
-
CSS 파싱과 CSSOM 생성
파싱하는 도중
<link rel="stylesheet">태그를 만나면 CSS 파일을 요청하고 파싱하여 CSSOM(CSS Object Model)을 생성한다. CSS는 렌더링 차단 리소스로, HTML 파싱은 계속될 수 있지만 최종 렌더링은 CSSOM이 완성될 때까지 지연될 수 있다. -
Javascript 처리
HTML 파싱 중
<script>태그를 만나면 HTML 파싱은 즉시 일시 중단된다.스크립트 실행 전, 해당 스크립트 이전에 선언된 모든 CSS가 로드되고 파싱될 때까지 Javascript실행이 차단된다(Javascript가 CSSOM에 접근할 수 있기 때문). 이후 Javascript 처리가 끝나면 HTML파싱이 중단된 시점부터 재게된다. 하지만defer나async속성이 있는 스크립트느 HTML파싱을 차단하지 않고 다른 방식으로 처리된다. -
Render Tree 생성
HTML과 CSS 파싱은 둘 다 점진적으로 진행되며 DOM과 CSSOM이 생성되면 두 트리를 결합하여 Render Tree를 생성한다. 이때 화면에 표시되지 앟는 요소들을 배제한다(
display:none적용된 요소,<head>내의 요소 등). -
Layout
이렇게 Render Tree 가 생성되면 Layout 단계를 거쳐 Render Tree의 노드와 그 관계되는 각 요소들이 화면에 위치해야 하는 위치와 크기를 설정한다.
-
Paint
Paint 단계로 넘어가 Render Tree의 각 노드를 화면에 그리게 된다. 이때 색상, 이미지, 그림자 등 시각적 요소가 처리된다. 이 때 시각적 요소에 따라 필요하다면 여러 레이어들을 생성하게 된다.
-
Compositing
생성된 여러 레이어를 합성하여 최종 화면을 화면에 표시한다. CSS 의 Z-index에 의해 쌓이는 순서가 결정된다. 이 레이어 합성은 주로 GPU를 활용하여 처리하여 에니메이션이나 전환 효과의 성능을 향상시킨다.
이렇게 화면에 보여지는 웹사이트는 DOM과 CSSOM를 이용해 Javascript를 통해 조작이 가능해 진다.