HTML/CSS/JavaScript로 웹페이지를 만드는 작업을 할 때 웹 브라우져는 저 코드를 해석을 해서 웹페이지를 만든다. 이 때 브라우저는 무슨 일을 할까?
그 전에 브라우저의 구조에 대해 먼저 알아보자.
브라우저의 구조
1. User Interface
- 주소 표시줄, 이전/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스
2. Rendering Engine
- 요청한 HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 렌더링 엔진
3. Browser Engine
- 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
4. Network
- 각종 네트워크 요청을 수행하는 네트워크 파트. HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. JavaScript Interpreter
- JS코드를 실행하는 인터프리터(크롬-V8, Mozilla-Rhino, Firefox-SpiderMonkey)
6. UI Backbone
- 체크박스 혹은 버같은 기본적인 위젯을 그려주는 파트
7. Data Persistence
- local Storage 혹은 Cookie같이 보조 기억장치에 데이터를 저장하는 파트
여기서 Rendering Engine에 대해 좀 더 자세히 알아보자
각 브라우저의 렌더링 엔진
웹 브라우저마다 렌더링 엔진이 다른데
Safari는 Webkit, Chrome은 Blink, Firefox는 Gecko를 사용한다.
렌더링 엔진의 목표
- HTML/CSS/JS/이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여주기
- 업데이트(사용자가 입력을 한다던지, 스크롤 이미지 데이터로딩 등..)가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성하기
렌더링 엔진의 동작 과정(Critical Rendering Path)
- Dom Tree와 CSSOM의 생성
- HTML5표준에 맞춰서 각 태그를 토큰화를 한다. 그리고 브라우저의 렉싱(Lexing)과정을 통해 토큰의 해당 속성과 규칙을 정의하는 node 객체로 변환하고, 그 node들이 연관성을 갖게 끔 Tree구조로 변환시키는 것이다. HTML을 파싱하는 가운데 필요한 CSS나 JS를 불러오도록 요청하기도 한다.
(렉싱은 토크나이징이라고 불리기도 하며 문자열을 나누어 토큰이라 불리는 (해당 언어에) 의미 있는 조각으로 만드는 과정 이라고 한다.) - CSSOM은 DOM이 화면에 어떻게 표시될지 알려주는 역할을 한다. 이것도 DOM처럼 Tree를 구조를 갖기 때문에 자식 노드들도 부모의 스타일을 받게된다.
- Render Tree 생성
- DOM Tree와 CSSOM Tree를 합친 트리. 즉 화면에 표시되어야하는 모든 노도의 컨텐츠, 스타일 정보를 포함하는 트리를 생성한다. CSS의 meta, display:none같은 것들은 DOM과 상관 없기 때문에 포함되지 않는다.브라우져마다 조금씩 차이가 있다.
- Reder Tree 배치(Layout(Reflow))
- 뷰포트 내에서 각 요소의 정확한 위치와 크기를 계산하는 과정. 박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백이 계산된다. 이때 CSS의 %나 em같은 상대적인 단위들이 뷰포트를 계산해서 픽셀로 전환된다.
- Render Tree 그리기 (Paint(Repaint))
- 위의 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고, 이를 어떻게 보여줄지 알게된 후 화면에 실제 픽셀로 그려지는 과정. 이 과정에서 텍스트 이미지 등이 실제 픽셀로 그려진다.
이러한 과정을 줄이면 그만큼 렌더링 하는 시간도 줄어든다. 그러나 중간에 사용자가 조작을해서 업데이트가 일어나게 된다면 어떻게 될까?
UI가 업데이트 되는 상황
- 다시 Layout이 발생하는 경우
- 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀔때 다시 발생한다.
-> 이 순서대로 크기나 그런것들이 다시 계산된 후 화면에 배치되고 그려지는 과정을 거치게된다.
- Paint부터 다시 발생되는 경우
- 주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어날 때 발생한다.
-> 레이아웃 과정이 발생하지 않기 때문에 성능이 좋다.
- 레이어의 합성만 다시 발생하는 경우
- 레이어는 페인팅할 영역을 나누어 놓은 것이다. 크롬의 경우 정해진 경우 필요에의해 브라우저가 레이어를 생성한다. 그리고 렌더트리에있는 노드객체들은 생성된 레이어에 포함하게 된다. 이 레이어들은 트리 형식이고, 렌더링 엔진이 페인팅과정에서 각각 그린다음 하나의 비트맵으로 합성하여 화면에 그린다.
-> Layout과 Paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 갖는다.
가로