💻 자세한 정보성 글이 아닌 면접 대비 간단하게 정리한 글입니다!
1 브라우저 렌더링 과정
- 브라우저 주소창에 특정 주소를 입력한다 (ex. "www.google.com")
- 해당 주소의 서버를 찾아가고 DNS가 실제 서버가 있는 곳으로 연결을 해준다.
이 때 http, https 각 조건에 맞는 방식으로 통신한다. - 서버의 기본 설정이 대부분 index.html로 되어있으므로 이 파일을 서버에서 클라이언트 쪽으로 보내준다.
- index.html을 받은 브라우저에서는 텍스트로 이루어진 이 파일을 파싱하면서 DOM 트리를 만들어 나간다.
- html을 읽다가 중간에 link tag를 만나서 css 요청이 발생하면 요청과 응답과정을 거쳐 css를 파싱한다.
- css 파싱이 종료 되면 잠시 중단 되었던 html 을 다시 읽고 DOM tree를 완성시킨다.
- 완성된 DOM tree와 CSSOM tree를 합쳐서 Render tree를 만들게 된다.
(Render tree를 통해 문서가 시각적 요소를 포함한 형태로 구성이 된 상태가 되는 것이다) - html 파서는 파싱을 하다가 script tag를 만나면 JS 코드를 실행하기 위해서 파싱을 중단한다.
- 제어 권한을 JS engine에게 넘기고, JS 코드 또는 파일을 로드해서 파싱하고 실행한다.
크게 보면 위와 같은 과정을 거쳐서 렌더링이 되는 것이다.
2 렌더링 과정에서 찾아볼 수 있는 DOM, CSSOM, Render Tree란?
1. DOM (Document Object Model) 문서객체 모델
브라우저가 html 파일을 읽을 때 브라우저가 이해할 수 있고, 메모리에 보관할 수 있는 object로 변환시키게 된다.
object로 변환 후 Tree 구조를 생성하는데 이것이 DOM 이다.
이는 우리가 정의한 요소들이 tree 구조로 구성 되어있으며, 이것을 이용해서 JS로 웹페이지를 제어할 수 있다.
2. CSSOM (CSS Object Model) CSS 객체 모델
브라우저는 html을 DOM으로 만들면서, 개발자가 정의해놓은 CSS와 기본적으로 설정되어있는 CSS를 cascading rule에 따라서 병합하여 CSSOM을 만들게 된다.
3. Render Tree
브라우저가 html 파일을 읽으면 제일 먼저 DOM tree를 만들고, 그 다음 CSS 파일을 읽은 다음 최종적으로 확정 된 CSS style tree를 만든다.
이 후, 브라우저에 표시 될 요소들만 Render Tree에 선별해서 표시한다.
만약 opacity: 0, visibility : hidden 이런 값들이 있다면 사용자 눈에는 보이지 않지만 요소 자체가 완전히 없어진 것은 아니므로 Render Tree에 포함되어진다.
즉, DOM + CSSOM = Render Tree이다.
3 렌더링 최적화하기
심플하게 보면 DOM 요소와 CSS 규칙이 적을 수록 Render Tree를 빠르게 만들 수 있다.
렌더링을 최적화 하기 위해서는 윈도우 리사이징이나 요소의 위치 크기 변경으로 일어나는 Reflow (Layout) 와 수정된 Render Tree를 화면에 다시 그리는 Repaint (Paint) 를 줄여야 할 것이다.
html의 경우 div tag의 남용, 쓸데없는 wrapping 등 불필요한 태그 사용을 자제하고, css의 경우 box를 이동할 때 top, left 등의 속성을 사용하면 layout부터 다시 발생하게 되는데 translate을 사용하면 composition만 일어나게 된다.
다음은 Reflow, Repaint 연산을 줄이는 방법들이다.
1. 사용하지 않는 노드에는 visibility : invisible 보다 display : none 을 사용하기
visibility : invisible 은 레이아웃의 공간을 차지하기 때문에 reflow의 대상이 되지만 display : none은 Layout 공간을 차지 하지 않아 Render Tree에서 제외 된다.
2. Reflow, Repaint 가 발생하는 속성 사용을 피하기
CSS속성 중 Reflow와 Repaint가 일어나지 않는 속성들을 사용한다.
3. 영향을 주는 노드 줄이기
position의 경우 fixed는 영향을 받는 노드가 전혀 없기 때문에 애니메이션이 많거나 레이아웃 변화가 많은 요소의 경우 absolute 또는 fixed를 사용한다.
4. 프레임 줄이기
0.1초에 1px씩 이동하는 요소보다 0.5초에 5px씩 이동하는 요소가 Reflow, Repaint 연산 비용이 5배 적다는 것을 알 수 있다. 프레임을 줄이면 성능을 개선할 수 있다.
