렌더링
렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.
브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.
크롬은 블링크(Blink), 사파리는 웹킷(Webkit) 파이어 폭스는 게코(Gecko)
크롬도 예전에는 웹킷(Webkit)을 사용했다가 2013년에 웹킷(Webkit)에서 갈라져 나온 블링크(Blink)라는 엔진을 사용하고 있다.
렌더링 엔진은 두가지 목표를 위해 움직인다.
1. HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다.
여기서 업데이트는 사용자 동작으로 인해서 input 발생, 스크롤 생성, 애니메이션 동작, 비동기요청으로 인한 데이터 로딩 종류가 있다.
렌더링 과정
사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로 부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드 받는다.
브라우저가 페이지를 렌더링 하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성한다.
DOM 트리 생성
사용자가 요청한 HTML문서를 불러오고 변환하여 파싱한다.
변환: 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩에 따라 개별 문자로 변환
HTML 코드는 어휘 분석을 통해서 HTML5 표준에 지정된 고유한 토큰으로 변환된다.
토큰화: 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환
브라우저의 렉싱 과정을 통해 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다.
렉싱: 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환
각 노드가 연결성을 가질 수 있도록 트리를 생성하는데, 이게 바로 DOM 트리이다.
브라우저는 HTML 마크업을 처리 할 때 마다 위의 모든 단계를 수행한다.
최상위에는 document 객체가 들어가고, 태그는 element node가 되고, 태그의 요소는 attribute node, 텍스의 경우는 text node가 되어 트리 구조로 생성한다.
CSSOM 트리 생성
CSS로는 HTML을 DOM 트리로 만드는 과정과 동일하게 CSSOM 트리가 만들어진다.
CSSOM은 DOM이 어떻게 화면에 표시될 지를 알려주는 역할을 한다.
CSS도 위에서 아래로 스타일 규칙이 정해지기 때문에 이 또한 트리구조를 가지고 있다.
예를 들어서 스타일시트 에서 body 태그에 text-align 이라는 속성을 정해뒀다면
body에 자식요소들에게도 동일한 속성이 전파되어서 적용되게 된다.
Render Tree
렌더링 엔진이 DOM 트리와 CSSOM 트리를 합쳐서 렌더 트리(Render Tree)라는 것을 만들게 된다.
렌더 트리는 화면에 표시 되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리이다.
렌더 트리가 만들어지는 과정을 대략적으로
document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다.
그러면서 렌더와 관련된 요소들을 렌더 트리에 포함시키게 된다.
이 때, meta 태그나 display: none 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더 트리에 포함되지 않는다.
이 렌더 트리는 브라우저마다 조금씩 다르게 생성된다고 함
Layout
렌더 트리가 생성되었으면 레이아웃이라는 과정을 거친다.
뷰포트 내에서 요소들에 정확한 위치와 크기를 계산하는 과정이다.
박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백
그리고 이외의 스타일 속성이 계산된다.
이 때 CSS에서 %나 em같은 상대적인 단위를 사용했을때는 뷰포트에 맞춰서 픽셀단위로 변환된다.
레이아웃 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 이를 어떻게 보여줄지 알게되면
마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데 이를 페인트 과정이라고 한다.
이 과정에서 렌더 트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀로 그려진다.
웹 브라우저의 구조
User Interface
주소 표시줄, 이전/다음/새로고침 버튼 등
웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스
Renderting Engine
HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
Browser Engine
유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
Networking
각종 네트워크 요청을 수행하는 네트워킹 파트
UI Back-end
체크박스나 버튼고 같은 기본적인 위젯을 그려주는 UI 백엔드 파트
Data Persistence
localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트
JavaScript Interpreter
자바스크립트 코드를 실행하는 파트 (크롬은 v8엔진)
