[CS] Reflow, Repaint

 

.

 

브라우저 렌더링 과정에 이어 CS 두번째 시간이다.

 

 

브라우저가 렌더링 되는 과정을

다시한번 간략히 설명하면

 

 

1. 요청 응답
2. HTML파싱ㅡDOM생성ㅡCSS파싱ㅡCSSOM생성
3. 자바스크립트 파싱
4. 레이아웃(리플로우)
5. 페인팅

 

 

다음과 같은 순서를 거친다.

 

우리가 주소창에 https://www.google.com/ 을 입력하면

 

우리가 이용하는

크롬이나 사파리,파이어폭스와 같은 브라우저들은

 

DNS서버에 해당 도메인에 매칭되는 IP주소를 요청하고

여기서 응답받은 IP주소를 손에 쥔 채

google 서버와 통신망을 구축해

HTML,CSS,JS 파일 등을 요구한다.

 

 

그리고

 

받아온 파일들을 

HTML부터 순서대로 파싱하는데

이 파싱이라는 것은

브라우저가 이해할 수 있는 '형태'로 바꾸는 작업이다.

 

그 결과물이 DOM이고

 

CSS도 마찬가지로

파싱한 후 

CSSOM이라는 결과물을 만들어낸다.

 

 

DOM과 CSSOM는 트리형태로 구성되어 있고

두 트리를 합쳐 

렌더 트리를 생성하는 것이 

렌더링 과정의 핵심이다.

 

 

 

 

또한 DOM을 생성하다

자바스크립트를 작성할 수 있는

<script>태그를 만나면

파싱을 잠시 멈춘 후

Javascript 엔진을 통해

자바스크립트를 먼저 파싱한 후

 

마무리되면

다시 DOM트리 생성 과정으로 넘어가는 것이다.

 

 

---

 

여기까지가 HTML, CSS, JS파일을 파싱하고 

렌더링 하는 과정인데

더 자세한 내용이 궁금하면

 

https://jurgen-94.tistory.com/35

[CS] 브라우저 렌더링 과정

 

이 글을 참고하자!

 

---

 

 

이제

리플로우(Reflow)와 리페인팅(Repainting)에 대해 알아보자

 

 

 

그 전에!

 

위 순서에서 

HTML,CSS,JS를 파싱하고

트리를 생성한다음

화면에 보여지는 렌더링 과정을 간단하게 설명했는데

 

실제로 클라이언트 화면에 보여지려면

플로우와 페인팅 과정을 거쳐야 한다.

 

 

 

렌더트리에는 요소들의 위치나 크기와 관련된 정보들이 있다.

 

이 정보들은

각각의 요소들에 대한 정보일 뿐

화면 전체에서 어디에 위치해야할 지는 정해지지 않은 것이다.

 

이 계산을 레이아웃(플로우) 단계에서 진행한다.

 

그리고 

 

브라우저 화면은

픽셀이라고 하는 아주 작은 점들로 이뤄져있는데

 

각각 배치된 요소들에 색상을 입히고 보여주기 위해서는

이 픽셀에 대한 정보가 있어야 한다.

페인팅은 이런 픽셀들을 채워나가는 과정이고

따라서 이 과정을 마지막으로  

렌더링이 끝나게 된다.

 

 

 

그럼 

Reflow와 Repaint는 무엇일까?

 

 

단어 앞의 re는 뭔가를 다시한다는 뜻이다.

리플레이, 리콜, 리마인드 등..

 

리플로우는 

레이아웃단계를 다시 거친다는 의미이다.

 

사실상 우리의 브라우저가 계속해서

같은 스타일로 유지되어 있지는 않다.

 

개발자의 의도에 따라

스타일을 변경하거나 

노드들이 추가되어질 수도 있고

 

브라우저의 크기인 viewport를 조절하는 경우에도 

이 레이아웃 단계를 다시 거치게 된다.

 

 

이럴 때 발생하는게

reflow와 repaint

 

레이아웃과 페인트칠을

다시 한번 한다는 얘기!

 

 

만약

 

스타일이나 DOM 내부를 변경하는

DOM API가 사용됐다면

 

 

DOM은

 

뭔가 변경됐음을 인식하고

브라우저의 작동 과정을 반복한다음

리 렌더링을 시작한다

 

 

 

 

리플로우와 리페인트를 자주하는게 좋을까?

 

브라우저의 최적화 관점에서 보면

당연하게도 답은 NO다.

 

브라우저의 성능을 저하시키기 때문이다.

 

 

그렇다면

 

웹개발자의 입장에선

HTML, CSS, JS 파일을 작성할 때

최대한

reflow와 repaint를 줄이는 방향으로 고민을 해야 한다.

 

 

가장 기초적이고 쉬운 방법을 설명하자면

 

사용하지 않는 노드는 

 

 visibilty: invisible 보다 display: none을 사용하는게 대표적이다.

 

visibility는 레이아웃 공간을 차지하기 때문에 reflow의 대상이 되지만

display : none;은 레이아웃 공간을 차지하지 않아 

렌더트리에서 아예 제외되기 때문이다.

 

또한

 

Reflow와 Repaint가 일어나는 대표적인 속성들을 

피해줘야 한다.

 

그 속성들은

다음과 같다.

이미지 출처 : https://boxfoxs.tistory.com/408

 

width, height, right, font-size등 

CSS를 입힐 때 사용하지 않을 수 없는 속성들까지도

최대한 적게 사용해야한다는 것

 

사실 쉽지 않지만

더 나은방법이 있다면

그 방법에 대해 고민해보는 것이 최적화의 첫걸음!

 

 

 

솔직히 

HTML CSS 작성하면서 

'리플로우를 최대한 줄여야지!!'

라고 의식해 본 적은 없지만

 

앞으로는 위 표를 참고하여

신경써서 작성해봐야겠다.