Skip to content

⚡ Bolt: CSS content-visibility 최적화 #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seonghobae wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: CSS content-visibility 최적화 #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,6 @@
## 2024-06-27 - 초기 언어 로드 시 불필요한 DOM 탐색 제거
**Learning:** 초기 로드 시 요청된 언어가 HTML의 기본 언어(ko)와 동일한 경우, 모든 DOM 텍스트 노드를 탐색하고 치환하는 불필요한 작업을 생략하면 성능이 향상됨을 확인했습니다.
**Action:** `isInitialDefault` 조건을 추가하여 초기 로드 시 불필요한 DOM 순회 코드가 실행되지 않도록 개선했습니다.
## 2024-07-03 - Off-screen rendering optimization with content-visibility
**Learning:** 뷰포트 바깥의 긴 섹션을 렌더링하면 렌더링 성능이 저하될 수 있습니다. `content-visibility: auto`를 사용하면 오프스크린 요소의 렌더링을 지연시킬 수 있으나, `contain-intrinsic-size`를 설정하지 않으면 스크롤바 점핑과 레이아웃 시프트가 발생합니다.
**Action:** 항상 `content-visibility: auto`를 사용할 때 `contain-intrinsic-size`를 함께 사용하고 구버전 브라우저 호환성을 위해 fallback 크기를 지정합니다 (예: `contain-intrinsic-size: 600px;` 이후 `contain-intrinsic-size: auto 600px;` 적용).
4 changes: 4 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,10 @@ h1 {
.section {
padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 72px);
border-top: 1px solid var(--line);
/* ⚡ Bolt: Optimize off-screen rendering for long sections */
content-visibility: auto;
contain-intrinsic-size: 600px;
contain-intrinsic-size: auto 600px;
}

.section-heading {
Expand Down