프론트엔드 면접 단골 질문 6 | Reflow와 Repaint에 대해 설명하시오
Vložit
- čas přidán 23. 06. 2024
- 원하시는 기업에 꼭 합격하시길 기원하겠습니다 :)
면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요.
1. *리플로우란 무엇인지 설명해주세요*
리플로우란, 웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을 때, 변화된 레이아웃을 다시 계산하여 렌더 트리에 적용하는 과정을 의미합니다. width, height, padding, margin 그리고 border-width와 같은 크기 관련 속성, position, top, left와 같은 위치 관련 속성, display, flex 속성과 같은 레이아웃 관련 속성, font-size, font-weight와 같은 폰트 크기 관련 속성이 리플로우를 유발하는 속성입니다.
2. *리페인트란 무엇인지 설명해주세요*
리페인트란, 웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을 때, 변화된 시각적 표현을 다시 계산하여 렌더 트리에 적용하는 과정을 의미합니다. color, background-color 같은 색상 관련 속성, border-color, border-radius 와 같은 테두리 관련 속성이 리페인트를 유발하는 속성입니다.
3. *리플로우와 리페인트의 성능상 차이점을 설명해주세요*
부모 노드의 레이아웃 변화는 자식 노드의 레이아웃까지 영향을 미치기 때문에, 리페인트와는 달리, 리플로우가 발생하면 하위 렌더 트리를 다시 계산하고 재구성하는 과정이 필요합니다. 따라서, 리플로우는 그 자체만으로도 부하가 큰 작업입니다. 또한, 리플로우가 발생하면 일반적으로 리페인트도 다시 발생하기 때문에, 성능에 큰 영향을 끼친다고 할 수 있으며, 렌더링 성능을 최적화하기 위해선 리플로우를 최소화해야 합니다. 또한, 리플로우는 주로 CPU를 활용하여 연산하는 반면, 리페인트는 GPU를 활용한다는 차이도 있습니다.
4. *리플로우를 최소화하기 위한 방법은 무엇이 있을까요?*
리플로우를 최소화하기 위해, DOM 업데이트를 하나로 묶어 Batch Update하는 방법을 생각해볼 수 있습니다. 또한, offsetHeight, offsetWidth와 같은 자바스크립트의 레이아웃 속성에 여러 번 접근하면 리플로우가 발생할 수 있기 때문에, 이러한 속성들은 변수에 저장해 두고 재사용해야 합니다. 마지막으로, 가급적 레이아웃 변경이 적은 요소를 사용해야 합니다. position 속성을 예로 들면 fixed나 absolute 같은 값들을 사용할 수 있습니다.
![[#langchain 밋업 발표] R.A.G. 우리가 절대 쉽게결과물을 얻을 수 없는 이유](http://i.ytimg.com/vi/NfQrRQmDrcc/mqdefault.jpg)
감사합니다!! 앞으로도 많이 올려주시면 반복재생 하겠습니당
컨텐츠 내용과 비주얼 모두 합격
감사합니다ㅎㅎ
와 설명 너무 잘하시네요.
면접 단골 질문들을 리액트, 자바스크립트 시리즈별로 나눠서 제작하시면 좋을 것 같아요! 너무 잘 봤습니다~
의견 감사드립니다!! :)
프론트 개발자로 3년... 진짜 짧은 경력이긴 하지만 나름의 경험으로 영상 속 내용을 파악하고 있습니다.
처음에는 별 생각 없이, 아니 아직도 그냥 하던 경험에서 나오는 본능 같은 방식으로 별 생각 없이 코딩을 하고 있지만 그래도 현업에서 몇 년 뛰었다고 저런 거 효율적으로 작성하는 나름의 자체룰 같은 것도 생겼는데 후배님들한테 왜 이렇게 해야 하는지는 제대로 설명을 못하고 있었어요 고맙습니다ㅎㅎ
말씀하시는 것만 봐도 좋은 선배 개발자 티가 팍팍 나시는데요!! 앞으로도 더욱 좋은 내용 공유할 수 있도록 노력할게용 :)
안 다닐래요
어디를 말씀이시죠..?!
향후 부채널 백엔드맨, 풀스택맨 만드실 듯
님 도대체 정체가 뭐길래 이런 꿀 정보만 주세요?
정체가 별로 대단하진 않지만ㅎㅎㅎ유익하게 봐주셨다니 감사합니다!! 힘이 되는 댓글이네요 :)
내가 아는걸 듣는사람이 이해하기 쉽게 설명하는게 진짜 어렵더라구요..
그쵸ㅠㅠ저도 그게 제일 어렵더라구요...