📚 Reference

📜 Chapter

CLS (Cumulative Layout Shift)

‣

Reflow / Re-layout

• Reflow
• Re-layout
• 리플로우
• 리플로우는 브라우저가 웹 페이지의 일부 또는 전체를 다시 그려야 하는 경우 발생한다.
• 과도한 Reflow
• Frequent layout recalculation
• 즉, DOM 높이나 위치가 계속 바뀌면서 브라우저가 layout 계산을 반복하는 상황.

Layout이 흔들리는 이유

• 예시

  setState(response + newChunk)
  

  • 이렇게 매 토큰마다 상태를 바꾸면 React가 매번 리렌더링해.
    • DOM 높이가 계속 바뀜
    • scrollHeight 계속 변경
    • 자동 스크롤 로직이 꼬임
    • Virtual keyboard 올라온 모바일에서 레이아웃 깨짐

안정적인 렌더링 구조