BlogEtcReflow, Repaint

Reflow, Repaint

Reflow

Reflow는 DOM(Document Object Model) 요소의 크기나 위치가 변경될 때 발생하는 프로세스입니다.

  • 페이지 레이아웃을 다시 계산합니다.
  • DOM 트리의 일부 또는 전체를 재구성합니다.
  • 계산 비용이 높고 성능에 큰 영향을 미칩니다.

Reflow를 일으키는 작업

DOM 조작 작업

  • 요소 추가, 이동, 제거
  • 텍스트 내용 변경

CSS 속성 변경

/* 레이아웃에 영향을 주는 속성들 */
{
  /* 기본 레이아웃 */
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  display: block;
  position: relative;
 
  /* 위치 관련 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 
  /* 기타 레이아웃 속성 */
  float: left;
  overflow: hidden;
 
  /* 텍스트 관련 */
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
 
  /* 박스 모델 */
  box-sizing: border-box;
  min-width: 100px;
  max-width: 200px;
  min-height: 100px;
  max-height: 200px;
}

Flexbox 관련 속성

{
  flex: 1;
  flex-basis: auto;
  flex-direction: row;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-shrink: 1;
  flex-wrap: nowrap;
}

Grid 관련 속성

{
  grid: auto-flow;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "header header";
  grid-auto-columns: 1fr;
  grid-auto-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

기타 작업 및 속성

  • window.resize 이벤트
  • 스크롤
  • 폰트 로딩
  • image 크기 변경
  • calc() 함수 사용
  • viewport 단위 사용 (vw, vh, vmin, vmax)

Repaint

요소의 시각적 스타일은 변경되지만 레이아웃에는 영향을 주지 않을 때 발생하는 프로세스입니다.

  • 요소의 외관을 다시 그립니다.
  • Reflow보다는 덜 비용이 듭니다.
  • 레이아웃 변경 없이 시각적 스타일만 업데이트합니다.

Repaint를 일으키는 작업

{
  /* 색상 관련 */
  color: red;
  background-color: blue;
  border-color: green;
  outline-color: yellow;
  text-decoration-color: purple;
 
  /* 가시성 */
  visibility: hidden;
 
  /* 배경 관련 */
  background-image: url('image.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
 
  /* 윤곽선 */
  outline: 1px solid black;
  outline-style: solid;
  outline-width: 1px;
 
  /* 그림자 효과 */
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
  text-shadow: 1px 1px 1px black;
 
  /* 기타 */
  border-radius: 5px;
  text-decoration: underline;
  filter: blur(5px);
}

Reflow와 Repaint 최소화하기

1. 영향받는 노드 최소화하기

/* position: fixed, absolute 사용 */
.minimal-impact {
  position: fixed;
  /* or */
  position: absolute;
}

2. 숨겨진 엘리먼트 수정

/* display: none으로 숨기고 수정 */
.hidden-element {
  display: none;
  /* 수정 작업 수행 */
}

3. transform, opacity 속성 사용하기

/* Reflow 없이 위치 변경 */
.optimized-animation {
  transform: translateX(100px);
  opacity: 0.5;
}

4. 애니메이션 최적화

// requestAnimationFrame 사용
function animate() {
  requestAnimationFrame(() => {
    // 애니메이션 로직
    animate()
  })
}

5. will-change 속성 활용하기

.optimized-element {
  will-change: transform, opacity;
}
CORSREST API design