Reflow와 Repaint 그리고 css관련 브라우저 최적화

프론트엔드 개발을 시작하면서 무작정 기능개발만 했던시절이였지만 최근에 공부를하면서 프론트엔드에서 화면 변경시에 최적화를 어떻게 할지 고민도 하게 되었는데 여러가지 방법중에 css 관련해 최적화 인터넷을 참고하면서 정리한 내용들을 적어갈려고합니다.

css관련된 최적화를 생각하기전에 먼저 브라우저 렌더링 과정중에 reflow와 repaint의 개념에 대해서 알아야합니다.

 

reflow 

- Layout 단계를 거치는데 Layout은 렌더트리(DOM + CSSOM) 요소들의 위치, 크기들이 브라우저의 뷰 포인트에 따라 맞게 계산되고 렌더 트리를 위치, 크기와 함께 재생성합니다.
- 상위 노드가 변경시에 하위 노드까지 영향을 끼치고 렌더트리를 재생성해서 부하가 큽니다. 
- 발생시에 형제, 부모, 자식 노드까지 영향을 끼쳐서 비싼 값(?)이라고 합니다.

<reflow를 발생하는 style 속성>

position / width / height / margin / padding / display / top / left / right / bottom / 
box-sizing / border-color / text-align / border / border-width / 
font-family / float / font-size / font-weight / line-height / vertical-align / 
white-space / word-wrap / text-overflow / text-shadow

 

repaint

- 배치된 화면에 눈에 보이는 요소들이 변경되는데, Layout에 영향을 미치지 않는 요소의 외관을 변경할때 발생합니다. (style 적용)
- reflow보다는 부하가 크지 않습니다.

color / border-style / visibility / background / background-color / 
background-image / background-position / background-repeat / background-size / 
text-decoration / outline / outline-style / outline-color / outline-width / 
border-radius / box-shadow ...

* reflow와 repaint를 발생하지 않는 style 속성

opacity / transform / cursor / z-index ...

CSS 최적화는 이제 어떻게 할까요?

reflow와 repaint가 style css 속성에 따라서 어떤점은 reflow까지 발생하고 repaint만 발생하는지 위의 속성들로 알수있었는데 실제로 어떻게 적용해야할지 궁금해서 다른 블로그들을 참고하고 비교해 적어보았습니다.

1) 개별 스타일을 바꾸기보다 클래스 이름을 변경. 동적인 스타일인 경우 cssText속성을 편집합니다.

- 동적으로 스타일을 처리하면 

2) 사용하지 않는 css제거합니다

- Lighthouse를 이용하면 2kb이상의 사용하지 않는 css를 알려줍니다.
3) DOM 변경을 일괄처리합니다 (documentFragment 함수)
- 제 생각에는 react의 virtual DOM 에서의 batch작업과 비슷한것같습니다.
4) <table> 레이아웃을 피합니다.
- 테이블은 하나씩 렌더링되지않고 모두 로드된후 테이블 너비가 계산된후 화면에 그려지기 때문에 td안에 컨텐츠의 작은변화가 전체 테이블의 변화로 이어지게 됩니다.
5) animation으로 요소를 변경할 경우 position: absolute로 처리

- absolute로 처리해서 주변 요소의 변경에 영향을 주지않게 하기 위해
6) display:none을 처리하고 추후에 스타일 변경후에 다시 display를 보여주는 방식으로 처리합니다.
- 스타일이 적용되는 동적인 상황에서 두번의 reflow가 발생할수도있는데  그 요소 속성들의 스타일 처리가 많은경우 비용 절감이 가능합니다.
7) DOM 변경 속성을 모읍니다.

const first = document.querySelector('.first');
first.style.width = '10px';

const second = document.querySelector('.second');
second.style.width = '10px';

const third = document.querySelector('.third');
third.style.width = '10px';

위와 같이 처리하면 reflow가 3번 변경되지만 

const first = document.querySelector('.first');

const second = document.querySelector('.second');

const third = document.querySelector('.third');

first.style.width = '10px';
second.style.width = '10px';
third.style.width = '10px';

아래와 같이 변경하면 reflow가 한번에 처리된다.
이유로는 브라우저에서 변경할 요소를 바로 처리하지않고 큐에 담아 처리하는데 일정시간이 지나거나 큐가 작업이 쌓일때 리플로우를 실행한다고 한다.
8) css스타일변경시에 각각변경하지말고 한번에 변경합니다.

 

* display:none 과 visibility: hidden의 차이점

• 영역을 차지하지 않는다는 말을 곧 렌더트리에서 제외된다는 말이므로, display: none이 적용된 요소는 영역이 사라지면서 주변요소의 위치, 크기에도 영향을 주어 리플로우, 리페인트가 발생합니다.
• 하지만 visibility : hidden 이 적용된 요소는 단순히 보이지 않을 뿐, 크기나 위치가 변하는게 아니기 에 리플로우는 발생하지 않고 리페인트만 발생합니다.

 

 

참고 블로그
https://velog.io/@hsecode/최적화-웹-성능-최적화-방법-5분-완성

https://mong-blog.tistory.com/entry/%EB%A6%AC%ED%94%8C%EB%A1%9C%EC%9A%B0-%EB%A6%AC%ED%8E%98%EC%9D%B8%ED%8A%B8%EC%99%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

 

리플로우, 리페인트와 브라우저 렌더링 알아보기

[최적화] 웹 성능 최적화 방법 5분 완성