1. 브라우저란??
브라우저란 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox 등을 말하며 MDN에서는 웹에서 페이지를 찾아서 보여주고 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 설명하고 있음.
2. 렌더링이란??
렌더링이란 HTML, CSS, Javascript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말함.
브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있으며 Chrome은 Blink, Safari는 Webkit, Firefox는 Gecko를 사용한다.
3. 렌더링 과정
HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.(Parsing)
=> 자바스크립트 실행
두 Tree를 결합하여 Rendering Tree를 만든다(Style)
Rendering Tree에서 각 노드의 위치와 크기를 계산한다.(Layout)
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다(Paint)
레이어를 합성하여 실제 화면에 나타낸다(Composite)
가. Parsing
1) HTML, CSS를 다운로드
2) HTML, CSS => Object Model로 만든다.
HTML의 경우 DOM(Document Object Model)로 구성되고 파싱 중에 HTML에 CSS가 포함되어 있으면 CSSOM(CSS Object Model)로 구성이 함께 된다.
나. Style
Parsing 단계에서 생성된 DOM Tree를 매칭시켜서 Render Tree로 구성한다.
Render Tree는 화면에 그려질 Tree이다.
이때 display:none의 경우 요소가 공간을 차지하지 않기 때문에 Render Tree에서 제외된다.
visibility:hidden은 공간 요소를 차지하기 때문에 Render Tree에 포함됨
다. Layout
Render Tree를 화면에 어떻게 배치해야할지 노드의 정확한 위치와 크기를 계산한다.
라. Paint
Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.
이때 픽셀로 변환된 결과는 여러 개의 레이어로 관리된다.
스타일이 복잡할 수록 Paint 시간도 늘어나게됨.
마. Composite
Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내며 우리는 화면에서 웹 페이지를 볼 수 있다.
