Skip to content

⚡ Bolt: [성능 개선] 오프스크린 섹션 렌더링 최적화 #49

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: [성능 개선] 오프스크린 섹션 렌더링 최적화 #49

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-04 - Optimize rendering of long off-screen sections
**Learning:** Using `content-visibility: auto` on elements that are off-screen significantly reduces rendering time, but without explicit intrinsic sizes, the browser miscalculates layout heights leading to severe scrollbar jumping.
**Action:** Always pair `content-visibility: auto` with `contain-intrinsic-size` with a suitable fallback length (e.g., `contain-intrinsic-size: 600px;`) and an auto value (`contain-intrinsic-size: auto 600px;`) for newer browsers to ensure a smooth scrolling experience.
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 rendering of off-screen sections */
content-visibility: auto;
contain-intrinsic-size: 600px;
contain-intrinsic-size: auto 600px;
}

.section-heading {
Expand Down
Loading