본문 바로가기
javascript

content-visibility로 렌더링 성능 향상

by hjcode 2024. 12. 3.

 

브라우저는 기본적으로 화면 밖의 콘텐츠도 모두 렌더링합니다. 
이는 불필요한 리소스 낭비입니다.

content-visibility: auto 를 사용하면 화면에 보이는 부분만 렌더링하고, 
보이지 않는 부분은 필요할 때 렌더링하도록 최적화할 수 있습니다.

 

개발중인 서비스는 사용자가 원하는 만큼 이미지를 업로드할 수 있는 기능을 제공하고 있습니다. 
문제는 이미지가 많아질수록 초기 페이지 로딩이 느려진다는 것입니다.

 

/* vue3 */
const CHUNK_SIZE = 3
const imageChunks = computed(() => {
  const chunks = []
  for (let i = 0; i < images.length; i += CHUNK_SIZE) {
    chunks.push(images.value.slice(i, i + CHUNK_SIZE))
  }
  return chunks
})
...
<template>
  <div v-for="(chunk, index) in imageChunks" :key="index" class="image-chunk">
    <img v-for="img in chunk" :key="`img-${img.src}`" :src="img.src" />
  </div>
</template>
...
.image-chunk {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

 

사용자가 업로드하는 이미지 수를 미리 알 수 없어서, 임의로 3개씩 나눠서 그룹처리를 했습니다.

contain-intrinsic-size 를 설정해 스크롤 영역이 올바르게 계산되도록 했습니다.

화면에 보이는 청크만 렌더링하고, 스크롤하면서 필요한 부분을 그때그때 렌더링합니다.

 

📊 성능 개선 결과

개발자 도구로 측정한 결과, 렌더링 시간이 약 200ms 단축되었습니다. 

사용자 경험이 눈에 띄게 개선되었습니다

 

작은 CSS 속성 하나로 큰 성능 향상을 이룰 수 있었습니다.

특히 동적으로 늘어나는 콘텐츠를 다룰 때 content-visibility는 강력한 도구가 될 수 있습니다.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

 

content-visibility - CSS: Cascading Style Sheets | MDN

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed

developer.mozilla.org

 

 

 

반응형

'javascript' 카테고리의 다른 글

Web Workers와 OffscreenCanvas로 canvas 성능 향상  (0) 2024.10.21
Cookie Store API  (1) 2024.02.22
FE 클린코드  (0) 2023.08.29
백틱 tagged templates  (0) 2023.05.19
memoize  (0) 2023.03.22