From 0234f5cf7cdde85a13ea063d1c9aad86cae0c1ab Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 13 Aug 2026 21:26:46 +0000 Subject: [PATCH] =?UTF-8?q?perf:=20String.padStart()=EB=A5=BC=20=EC=9D=B8?= =?UTF-8?q?=EB=9D=BC=EC=9D=B8=203=ED=95=AD=20=EC=97=B0=EC=82=B0=EC=9E=90?= =?UTF-8?q?=EB=A1=9C=20=EB=8C=80=EC=B2=B4=ED=95=98=EC=97=AC=20=EC=84=B1?= =?UTF-8?q?=EB=8A=A5=20=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .jules/bolt.md | 3 +++ app.js | 20 +++++++++++++++----- index.html | 2 ++ pr_desc.md | 21 ++++----------------- 4 files changed, 24 insertions(+), 22 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index b08b203a..1a50c452 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -4,3 +4,6 @@ ## 2026-07-12 - Optimize renderTaskRow DOM allocations **Learning:** Caching unattached template nodes and instantiating them via `.cloneNode(false)` reduces DOM instantiation overhead in O(N) render loops significantly. **Action:** Apply this optimization to other hot-path rendering elements such as rows, cells, and stack containers. +## 2026-08-13 - Replace String.padStart() with inline ternary concatenation +**Learning:** For performance optimizations in hot loops (e.g., date formatters), `String.padStart()` has unnecessary string allocations and JS-to-C++ overhead. +**Action:** Prefer using inline ternary string concatenation (e.g., `val < 10 ? '0' + val : '' + val`) instead of methods like `String.padStart()` to avoid unnecessary string allocations. diff --git a/app.js b/app.js index a04aae71..20f2369c 100644 --- a/app.js +++ b/app.js @@ -2682,22 +2682,32 @@ function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } +// ⚑ Bolt: Replace String.padStart() with inline ternary concatenation in hot loops to avoid unnecessary string allocations and JS-to-C++ overhead function formatDateInput(date) { const year = date.getUTCFullYear(); - const month = String(date.getUTCMonth() + 1).padStart(2, '0'); - const day = String(date.getUTCDate()).padStart(2, '0'); + const m = date.getUTCMonth() + 1; + const month = m < 10 ? '0' + m : '' + m; + const d = date.getUTCDate(); + const day = d < 10 ? '0' + d : '' + d; return `${year}-${month}-${day}`; } function formatLocalDateInput(date) { const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); + const m = date.getMonth() + 1; + const month = m < 10 ? '0' + m : '' + m; + const d = date.getDate(); + const day = d < 10 ? '0' + d : '' + d; return `${year}-${month}-${day}`; } function formatCompactDate(date) { - return `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`; + const year = date.getFullYear(); + const m = date.getMonth() + 1; + const month = m < 10 ? '0' + m : '' + m; + const d = date.getDate(); + const day = d < 10 ? '0' + d : '' + d; + return `${year}${month}${day}`; } function formatPercent(value, digits) { diff --git a/index.html b/index.html index a7f4b49c..71af8121 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ ScopeWeave Planner + + diff --git a/pr_desc.md b/pr_desc.md index a51d4cec..577a02a3 100644 --- a/pr_desc.md +++ b/pr_desc.md @@ -1,17 +1,4 @@ -## πŸ’‘ What: -`app.js`μ—μ„œ O(N)으둜 λ™μž‘ν•˜λ˜ λ°°μ—΄ 검색(`findIndex`, `find`)을 O(1) μ‹œκ°„ λ³΅μž‘λ„λ₯Ό 가진 Map μΊμ‹œ(`taskIdToIndexCache`) 쑰회둜 μ΅œμ ν™”ν–ˆμŠ΅λ‹ˆλ‹€. O(1) 쑰회λ₯Ό μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄ 지연 μ΄ˆκΈ°ν™”(lazy initialization)λ˜λŠ” μΊμ‹œλ₯Ό κ΅¬μΆ•ν•˜κ³ , `state.tasks` λ°°μ—΄μ˜ ꡬ쑰적 λ³€κ²½(μ‚½μž…, μ‚­μ œ, μˆœμ„œ λ³€κ²½ λ“±)이 μΌμ–΄λ‚˜λŠ” λͺ¨λ“  μ§€μ μ—μ„œ μΊμ‹œλ₯Ό λ¬΄νš¨ν™”ν•˜μ—¬(`invalidateTaskIndexCache()`) 데이터 무결성을 보μž₯ν–ˆμŠ΅λ‹ˆλ‹€. - -## 🎯 Why: -트리 ꡬ쑰의 νŠΉμ„± 상, μžμ‹ νƒμƒ‰μ΄λ‚˜ 계측 ꡬ쑰 μž¬μ‘°μ •μ„ μœ„ν•΄ `getLastDescendantId`, `getTaskSubtreeRange` λ“±μ˜ 헬퍼 ν•¨μˆ˜κ°€ λΉˆλ²ˆν•˜κ²Œ ν˜ΈμΆœλ©λ‹ˆλ‹€. ν•΄λ‹Ή ν•¨μˆ˜λ“€ λ‚΄λΆ€μ—μ„œ 맀번 `findIndex`λ₯Ό μ‚¬μš©ν•˜μ—¬ μ„ ν˜• 탐색을 μˆ˜ν–‰ν•˜λ©΄ νƒœμŠ€ν¬κ°€ λ§Žμ•„μ§ˆμˆ˜λ‘ UIκ°€ λ©ˆμΆ”κ±°λ‚˜ 병λͺ© ν˜„μƒμ΄ λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό ν•΄κ²°ν•˜μ—¬ λŒ€κ·œλͺ¨ λ°μ΄ν„°μ—μ„œλ„ μ›ν™œν•˜κ³  λΉ λ₯Έ μ„±λŠ₯을 μœ μ§€ν•˜κΈ° μœ„ν•¨μž…λ‹ˆλ‹€. - -## πŸ“Š Measured Improvement: -μ•½ 10,000개의 νƒœμŠ€ν¬λ‘œ κ΅¬μ„±λœ 계측적 데이터λ₯Ό μž„μ˜ μƒμ„±ν•˜μ—¬ Node.js ν™˜κ²½μ—μ„œ μ„±λŠ₯ 츑정을 μˆ˜ν–‰ν•œ κ²°κ³ΌλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€ (반볡 10,000회 μˆ˜ν–‰ κΈ°μ€€): - -* **μ΅œμ ν™” μ „ (Baseline):** - * `getLastDescendantId`: ~1189 ms μ†Œμš” - * `getTaskSubtreeRange`: ~1224 ms μ†Œμš” -* **μ΅œμ ν™” ν›„ (Optimized):** - * `getLastDescendantId`: ~5 ms μ†Œμš” - * `getTaskSubtreeRange`: ~5 ms μ†Œμš” - -μΊμ‹œλ₯Ό λ„μž…ν•˜μ—¬ λ°°μ—΄ μ„ ν˜• νƒμƒ‰μ˜ 병λͺ©μ„ μ™„λ²½νžˆ ν•΄μ†Œν•˜μ˜€μœΌλ©°, E2E ν…ŒμŠ€νŠΈ(Playwright)λ₯Ό 톡해 κΈ°λŠ₯의 λΆ€μˆ˜ 효과(side effects)κ°€ μ—†μŒμ„ ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€. +πŸ’‘ What: λ¬Έμžμ—΄ μ‘°ν•© μ„±λŠ₯ μ΅œμ ν™” (String.padStart()λ₯Ό 인라인 3ν•­ μ—°μ‚°μžλ‘œ λŒ€μ²΄) +🎯 Why: λ‚ μ§œ 포맀터와 같이 자주 ν˜ΈμΆœλ˜λŠ” ν•« λ£¨ν”„μ—μ„œ String.padStart()λ₯Ό μ‚¬μš©ν•  λ•Œ λ°œμƒν•˜λŠ” λΆˆν•„μš”ν•œ λ¬Έμžμ—΄ ν• λ‹Ήκ³Ό JS-C++ λ³€ν™˜ μ˜€λ²„ν—€λ“œλ₯Ό 쀄이기 μœ„ν•¨μž…λ‹ˆλ‹€. +πŸ“Š Impact: ν•« λ£¨ν”„μ—μ„œμ˜ λ¬Έμžμ—΄ ν¬λ§€νŒ… μ„±λŠ₯ ν–₯상 및 λ©”λͺ¨λ¦¬ ν• λ‹Ή κ°μ†Œ +πŸ”¬ Measurement: λ‹¨μœ„ ν…ŒμŠ€νŠΈ 및 e2e ν…ŒμŠ€νŠΈλ₯Ό ν†΅κ³Όν•˜λ©°, λ‚ μ§œ κ΄€λ ¨ 데이터가 μ •μƒμ μœΌλ‘œ ν¬λ§·νŒ…λ˜λŠ”μ§€ 확인