<aside>

</aside>

➡️ 문제

• 화면에 안보이는 블록들도 렌더링이 되고 있었다.
• 먼저, 렌더링이 되는지 어떻게 확인하는 걸까? 크롬 브라우저의 렌더링 탭에서 다음과 같이 선택해준다.

• 다음과 같이 페이지를 리사이징할때, overflow:hidden 까지 모두 재렌더링이 된다.

화면 기록 2024-12-07 오후 3.27.14.mov

어떤 상황에서 발생하는 걸까

• 이유가 무엇일까? 그리고 렌더링이 되는 경우가 있고, 안되는 경우가 있다.

• 어떤 상황에서 정확히 발생하는 문제인지 찾아보자.

• 페이지 위치를 조정할때 → 안일어난다.

  화면 기록 2024-12-07 오후 4.30.40.mov

• 페이지 크기를 조정할때 → 일어난다.

  화면 기록 2024-12-07 오후 4.17.52.mov

• 또한, 페이지 높이만을 조정할때는 리렌더링이 발생하지 않았다.

  화면 기록 2024-12-07 오후 4.32.51.mov

• 페이지의 width가 바뀔때만 리렌더링이 발생한다.

  화면 기록 2024-12-07 오후 4.40.56.mov

왜 width를 바꿀때만 리렌더링이 일어날까?

• 어떤 상황에서 발생하는지는 알았다. 그렇다면, 왜 페이지 width를 바꿀때만 리렌더링이 일어날까?
• block이 부모요소(페이지)의 width의 full 에 맞춰간다.
• 즉, 부모 width에 full로 따라가니까, 부모(페이지) width를 변경시킴에 따라 block이 다시 width가 계산이 되는거다.
• 그래서 width를 고정했을때는 리렌더링이 안일어나는거다.

➡️ 분석