브라우저는 무엇인가?
랜더링을 알아보기전에 브라우저는 무엇인가..
사용자가 얻고자 하는 자원을 서버로 요청하고, 응답받은 자원을 브라우저에 표시하는 행위를 해주는 소프트웨어
종류로는 크롬,파이어폭스,사파리,엣지, 인터넷익스플로어가 있다.
랜더링 과정은 무엇인가?
브라우저 주소창에 www.google.com을 적고 엔터를 쳐보자.
그럼 브라우저는 입력된 www.google.com으로 GET 요청을 보내게 된다.
요청 받은 서버는 알맞은 HTML, CSS파일을 브라우저에게 다시 보내줄것이다.
하지만 브라우저가 아무런 과정 없이 그냥 보여준다면 아래와 같이 HTML만 보일 것이다.
이 때 랜더링 엔진이 랜더링 할 문서를 HTML 과 CSS를 나눠서 읽고 Parsing 후 보여주게 된다.
정리하자면,
-
사용자가 브라우저 주소창에 URL을 입력한다.
-
DNS 서버가 입력된 도메인 네임을 실제 서버 주소 IP로 바꿔준다.
-
http / https 에 따라 해당 통신 방식으로 서버에 요청한다.
-
서버의 기본 설정이 대부분 index.html로 되어 있어 서버에서 이 파일을 클라이언트로 보내준다.
-
브라우저는 텍스트로 이루어진 index.html 파일을 html parser로 파싱하여 DOM tree를 만든다.
-
중간에 css파일에 대한 link태그를 만나면 다시 서버에 요청/응답 과정을 거쳐 css파일을 가져온다.
-
css parser로 css파일을 파싱하여 CSSOM tree를 만든다.
-
완성된 DOM tree와 CSSOM tree를 합쳐 Render tree를 만든다.
-
이후 노드를 어느 위치에 얼마나 크게 표기할건지 계산하는 과정 (Layout)을 거쳐 화면에 그린다(Paint).
-
javascript의 경우 html parser가 중간에 script 태그를 만나면 html파싱을 중단한다.
-
제어 권한을 자바스크립트 엔진에게 넘기고 javascript 파일을 로드해서 파싱하고 실행한다.
(만약 script 태그에 defer 옵션이 쓰였다면 html 파싱을 중단하지 않고 병렬적으로 파일을 받아온다. 그리고 html 파싱이 끝나면 fetch 해둔 js 파일을 실행한다.)
Reflow 와 Repaint
랜더링 과정을 모두 마친 후, 최종적으로 브라우저에 페이지가 그려진다고 해서 랜더링이 끝난 것이 아니다.
특정 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등 레이아웃 수치가 수정되면 그에 영향을 받는 자식노드나 부모 노드를 포함하여 Layout 과정을 다시 수행하게 된다(Reflow). 그리고 그 결과물을 다시 화면에 그려주는 Repaint 과정을 거친다.
reflow가 일어나면 실제 화면에 반영해주기 위한 painting이 일어난다.
하지만 reflow가 발생해야 repaint 되는 건 아니다. background-color, opacity처럼 레이아웃에 영향을 주지 않는 스타일 속성의 변경은 repaint만 일어난다.
랜더링 최적화 하기
-
Reflow 와 Repaint 최소화
🔔 reflow가 일어나는 대표적인 속성
position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align, white-space...🔔 repaint가 일어나는 대표적인 속성
background, background-image, background-position, ackground-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, outline-color, outline-style, outline-width, text-decoration, visibilty... -
영향을 주는 노드 최소화하기
애니매이션이나 레이아웃 변화가 많은 요소의 경우 position을 absolute나 fixed를 사용하면 영향을 주는 주변 노드들을 줄일 수 있다.
fixed는 주변에 영향을 주지 않아 repaint 비용만 들어서 효과적이다. -
프레임 줄이기
예를 들어 0.1초마다 1px씩 이동하는 요소보다 0.3초마다 3px 씩 이동하는 요소가 reflow 연산 비용이 3배 줄어든다고 볼 수 있다. 따라서 부드러운 효과를 조금 줄이면서 성능을 개선할 수 있다.
Reference
