프론트엔드 면접(reflow, repaint)

1. reflow와 repaint의 차이점에 대해 설명해주세요.

reflow와 repaint는 모두 렌더링과 관련이 있습니다.

 

화면이 리랜더링 됐을 때, 각 상황에 따라 reflow와 repaint가 일어나게 됩니다. reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 의미하고 repaint는 계산 결과를 바탕으로 화면에 다시 그리는 과정입니다.

 

reflow는 DOM의 구조가 변경되거나 요소의 크기나 위치가 변경될 때 일어납니다. repaint는 레이아웃은 그대로이고 색상이나 배경 등의 스타일만 변경되었을 때 일어납니다. 레이아웃을 다시 계산하는 reflow가 일어나면 repaint가 필연적으로 일어나기도 하고, reflow는 비용이 더 들기 때문에 레이아웃 계산이 다시 일어나지 않도록 관리하는 것이 중요합니다. 

2. reflow가 다시 일어나지 않게 하려면 어떻게 해야하나요?

reflow를 유발하는 CSS 속성 사용을 최소화해야합니다. width, height, margin, padding, border 등의 속성은 요소의 레이아웃을 다시 계산하게 하기때문에 reflow를 일으킵니다. 미리 해당 속성 값을 설정해 초기 로드 시에만 계산이 이루어지도록 하고, 이후에는 변경하지 않는 것이 좋습니다.

 

✏️ Reflow가 발생하는 경우

1. 요소의 크기, 위치 변경

2. 브라우저 창의 크기 변경

3. font size 변경

4. scroll

5. DOM API를 통한 노드 요소의 추가, 삭제

 

✏️ 2번 질문 추가 방법

CSS 애니메이션 최적화

CSS 속성 사용을 최소화하기 어렵다면, transform을 사용하거나 display 보다는 opacity를 사용하는 것이 성능 개선에 도움이 됩니다. 이는 GPU 가속을 사용할 수 있기 때문에 reflow를 일으키지 않고 repaint만 발생시키므로 CPU 자원을 적게 사용합니다.

 

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스