브라우저는 기본적으로 화면 밖의 콘텐츠도 모두 렌더링합니다.
이는 불필요한 리소스 낭비입니다.
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
반응형
'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 |