24.06.20 day4 코드트리 조건문(중첩조건문까지) 학습, Reflow와 Repaint가 실행되는 시점

 

조건문 and, or 혼합

a = int(input())

if (a % 2 == 1 and a % 3 == 0) or (a % 2 == 0 and a %5 == 0):
    print("true")
else:
    print("false")

연산자 처럼 괄호로 우선순위를 둘 수 있다.

 

---

프론트엔드 기술면접 질문 - 3

Reflow와 Repaint가 실행되는 시점

Reflow와 Repaint는 브라우저가 웹 페이지를 렌더링하는 과정에서 발생하는 중요한 작업이다.

 

Reflow(Layout)

• Reflow는 브라우저가 DOM(Document Object Model)의 요소들을 다시 계산해 화면에 배치하는 과정이다.
• 레이아웃 계산이라고도 하며 특정 이벤트가 작업이 발생하면 DOM트리의 각 요소에 대해 위치와 크기를 다시 계산한다.
• 발생하는 주요 시점
  • DOM 변경 : 요소가 추가되거나 제거될 때,
  • 요소의 스타일 변경 : 요소의 크기, 위치, 폰트 크기 등 레이아웃에 영향을 미치는 CSS 속성이 변경될 때
  • 브라우저 창 크기 조정 : 사용자가 브라우저 창의 크기를 변경할 때
  • 페이지 초기 렌더링 : 페이지가 처음 로드될 때
  • 동적 컨텐츠 삽입 시 : 자바스크립트로 새로운 컨텐츠가 삽입될 때
• Reflow는 비용이 많이 들기 때문에 빈번하게 발생시키지 않게 최적화하는 것이 중요하며, 특히 DOM 변경 시에는 효율적으로 처리해야 한다.

Repaint(Redraw)

• Repaint는 요소의 시각적인 스타일이 변경될 때 발생하며, Reflow와 달리 레이아웃을 다시 계산하지 않고 변경된 스타일만 반영해 화면에 다시 그려준다. (구조는 그대로 유지하되 변경된 CSS 값만 적용)
• 발생하는 주요 시점
  • 색상 변경 : 요소의 배경색이나 텍스트 색상 등이 변경될 때
  • 가시성 변경 : display나 visibility같은 요소의 가시성이 변경될 때
  • 스타일 변경 : box-shadow나 outline같은 레이아웃에 영향을 미치지 않는 다른 CSS 속성이 변경될 때

 

Reflow가 발생했을 땐 반드시 Repaint가 발생하지만, 반대로 Repaint가 발생했을 땐 항상 Reflow가 발생하는 것은 아니다.

화면의 구조가 변경되면 그에 따른 CSS값도 같이 바뀌어야 하지만 CSS만 변경했을 땐 레이아웃은 그대로 유지되는 경우가 많기 때문이다.

 

이러한 렌더링을 최적화하기 위해서는

• 여러 스타일 변경을 한 번에 적용할 수 있게 CSS 클래스를 활용한다.
• 여러 DOM 변경을 한 번에 적용하여 각 변경에 대해 렌더링이 발생하는 것을 방지한다.
• "display: none" 상태인 화면에 보이지 않는 요소로 변경 후에 조작하여 완료되면 다시 표시하는 방식으로 작성한다.( "display: none" 은 해당 요소와 하위 요소에 대한 Reflow를 중단한다.)