Skip to content

⚡ Bolt: [성능 개선] 초기 로딩 시 불필요한 DOM 쿼리 지연 #36

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 3 commits into
base: main
Choose a base branch
from
Open

⚡ Bolt: [성능 개선] 초기 로딩 시 불필요한 DOM 쿼리 지연 #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee406c7
⚡ Bolt: [성능 개선] 초기 로딩 시 불필요한 DOM 쿼리 지연
seonghobae Jun 29, 2026
e7071ad
⚡ Bolt: [성능 개선] 초기 로딩 시 불필요한 DOM 쿼리 지연
seonghobae Jun 29, 2026
585a8e5
⚡ Bolt: [성능 개선] 초기 로딩 시 불필요한 DOM 쿼리 지연
seonghobae Jun 29, 2026
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
4 changes: 4 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2024-06-20 - Unnecessary initial DOM updates for default language
**Learning:** The simple static i18n implementation runs `node.textContent = dict[node.dataset.i18n]` for every translatable node on the initial script load, even when the HTML is already written in the target language (Korean). This creates unnecessary layout/paint operations and blocking time on the main thread for elements that don't need text changes.
**Action:** Always check if the current value matches the desired value before updating the DOM (`node.textContent !== newText`), and add early exits when setting state to the same value to avoid redundant DOM traversal and writes.

@opencode-agent opencode-agent Bot Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HIGH OpenCode could not establish approval sufficiency

  • Problem: the model pool exhausted without a valid current-head review control block, so this changed line cannot be approved from deterministic check state alone.
  • Impact: PR-intent mismatches, missing files, robustness bugs, UX/DX regressions, and CodeGraph-backed flow changes could be missed.
  • Fix: rerun OpenCode after model availability recovers, or add the missing source/test/docs/generated verification evidence needed for a source-backed approval.
  • Verification: rerun the OpenCode Review workflow and confirm it emits APPROVE or source-backed REQUEST_CHANGES for this head SHA.

## 2024-06-29 - 초기 로딩 시 불필요한 DOM 쿼리 생략
**Learning:** HTML이 이미 기본 언어로 렌더링된 상태에서 초기화할 때, 변경할 필요가 없는 140개 이상의 노드를 모두 탐색하는 것은 메인 스레드를 낭비하는 작업이었습니다.
**Action:** 현재 상태가 서버가 렌더링한 초기 DOM 언어와 일치할 때는 무거운 텍스트 노드 탐색(querySelectorAll)을 조건부로 완전히 건너뛰도록 구현하여 성능을 개선합니다.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# 변경 이력 (Changelog)

## [Unreleased]
### 성능 개선 (Performance)
- `i18n.js`: 초기 페이지 로딩 시, 기본 언어와 브라우저 언어가 동일할 때 불필요하게 140여 개의 노드를 탐색하는 DOM 쿼리(`querySelectorAll("[data-i18n]")`)를 생략하도록 최적화하여 렌더링 성능을 개선했습니다.
24 changes: 16 additions & 8 deletions i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,14 +315,20 @@ function setLanguage(lang) {

const dict = messages[lang] || messages.ko;

if (!i18nNodes) {
i18nNodes = document.querySelectorAll("[data-i18n]");
// ⚡ Bolt: Skip expensive DOM query and updates if setting the default language on first load
const isInitialDefaultLoad = !currentLang && document.documentElement.lang === lang;

if (!langButtons) {
langButtons = document.querySelectorAll("[data-lang]");
metaDesc = document.querySelector('meta[name="description"]');
ogDesc = document.querySelector('meta[property="og:description"]');
footerLogo = document.querySelector("#footer-logo");
}

if (!i18nNodes && !isInitialDefaultLoad) {
i18nNodes = document.querySelectorAll("[data-i18n]");
}

if (document.documentElement.lang !== lang) {
document.documentElement.lang = lang;
}
Expand All @@ -347,12 +353,14 @@ function setLanguage(lang) {
}

// Only update textContent if it actually changed to avoid layout recalculations
i18nNodes.forEach((node) => {
const newText = dict[node.dataset.i18n];
if (newText && node.textContent !== newText) {
node.textContent = newText;
}
});
if (i18nNodes) {
i18nNodes.forEach((node) => {
const newText = dict[node.dataset.i18n];
if (newText && node.textContent !== newText) {
node.textContent = newText;
}
});
}

langButtons.forEach((button) => {
const pressed = String(button.dataset.lang === lang);
Expand Down
17 changes: 17 additions & 0 deletions test_i18n.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Initial description">
<meta property="og:description" content="Initial og">
<script src="i18n.js" defer></script>
</head>
<body>
<h1 data-i18n="hero.title">맥락지혜 연구실</h1>
<div class="language-switch">
<button type="button" data-lang="ko" aria-pressed="true">KO</button>
<button type="button" data-lang="en" aria-pressed="false">EN</button>
</div>
</body>
</html>
Loading