1/* 反例：去掉預設 focus outline */
2button:focus { outline: none; }
3
4/* 對例：可見的 focus indicator */
5button:focus-visible {
6  outline: 2px solid var(--focus-color);
7  outline-offset: 2px;
8}

1dialog.addEventListener('keydown', (e) => {
2  if (e.key === 'Escape') dialog.close();
3});

 1function moveFilter(targetSlot) {
 2  const filter = document.querySelector('.filter');
 3  const focused = document.activeElement;
 4  const wasFilterFocused = filter.contains(focused);
 5
 6  targetSlot.appendChild(filter);  // reparent
 7
 8  if (wasFilterFocused) {
 9    focused.focus();  // 還原 focus
10  }
11}

1<!-- polite：等使用者操作完才朗讀（搜尋結果數量、filter 切換） -->
2<div aria-live="polite" aria-atomic="true">
3  顯示 12 筆結果
4</div>
5
6<!-- assertive：立刻打斷朗讀（錯誤訊息、緊急狀態） -->
7<div aria-live="assertive" role="alert">
8  搜尋失敗、請重試
9</div>

1<div class="results" aria-live="polite" aria-atomic="false">
2  <p class="status">顯示 <span id="count">12</span> 筆結果</p>
3  <ul>...</ul>
4</div>

1<div class="toggle" role="switch" tabindex="0" aria-checked="false">
2  <span class="track"></span>
3</div>
4<script>
5  toggle.addEventListener('click', ...);
6  toggle.addEventListener('keydown', e => {
7    if (e.key === 'Enter' || e.key === ' ') ...;
8  });
9</script>

1<label class="toggle">
2  <input type="checkbox">
3  <span class="track" aria-hidden="true"></span>
4  <span class="visually-hidden">啟用 dark mode</span>
5</label>

1.toggle input { position: absolute; opacity: 0; }
2.toggle input:checked + .track { background: var(--brand); }

 1/* 對比度 */
 2:root { --text: #1a202c; --bg: #fff; }
 3/* WCAG AA: 普通文字 4.5:1、大文字 3:1 */
 4
 5/* 字型放大時不破版 */
 6.container { max-width: 60ch; }  /* ch 跟字型同步 */
 7.text { font-size: 1rem; line-height: 1.6; }  /* rem 跟使用者設定同步 */
 8
 9/* prefers-reduced-motion */
10@media (prefers-reduced-motion: reduce) {
11  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
12}

1/* 觸控 hit target 最小 44×44 px (WCAG AAA) */
2button, a, [role="button"] {
3  min-height: 44px;
4  min-width: 44px;
5}
6
7/* 兩個 hit target 之間留 8px+ 間距、避免誤點 */
8.toolbar > * + * { margin-left: 8px; }

1<div class="dropdown" tabindex="0">
2  <span>選單</span>
3  <div class="menu">
4    <div class="item">選項 1</div>
5    <div class="item">選項 2</div>
6  </div>
7</div>

1<button aria-haspopup="menu" aria-expanded="false" aria-controls="menu1">
2  選單
3</button>
4<ul id="menu1" role="menu" hidden>
5  <li role="menuitem"><button>選項 1</button></li>
6  <li role="menuitem"><button>選項 2</button></li>
7</ul>

1button.addEventListener('click', () => {
2  document.querySelectorAll('.result').forEach(r => {
3    r.style.display = r.dataset.tag === currentFilter ? 'block' : 'none';
4  });
5});
6// screen reader 不知道結果變了

1<div class="results" aria-live="polite">
2  <p class="status">顯示 <span id="count">12</span> 筆結果（filter: <span id="filter">全部</span>）</p>
3</div>

1button.addEventListener('click', () => {
2  // ... filter logic
3  document.getElementById('count').textContent = visibleCount;
4  document.getElementById('filter').textContent = currentFilter;
5  // aria-live 自動朗讀
6});

1// resize 時把 filter 從 mobile drawer 移到 desktop sidebar
2mediaQuery.addEventListener('change', () => {
3  if (mediaQuery.matches) {
4    sidebar.appendChild(filter);
5  } else {
6    drawer.appendChild(filter);
7  }
8});
9// 如果 filter 內的某個 input 有 focus、reparent 後 focus 落到 body

 1mediaQuery.addEventListener('change', () => {
 2  const focused = document.activeElement;
 3  const wasInFilter = filter.contains(focused);
 4
 5  if (mediaQuery.matches) {
 6    sidebar.appendChild(filter);
 7  } else {
 8    drawer.appendChild(filter);
 9  }
10
11  if (wasInFilter) focused.focus();  // 還原 focus
12});

1const formHeight = form.getBoundingClientRect().height;
2document.documentElement.style.setProperty('--form-height', `${formHeight}px`);

1.scope { top: calc(var(--form-height) + var(--gap)); }

1// JS 直接設 inline style + important
2function showScope() {
3  scope.style.setProperty('display', 'block', 'important');
4}
5function hideScope() {
6  scope.style.setProperty('display', 'none', 'important');
7}

1function setScope(visible) {
2  scope.classList.toggle('is-visible', visible);
3}

1.scope { display: none; }
2.scope.is-visible { display: block; }

1@layer vendor {
2  @import url('vendor/pagefind.css');
3}
4
5/* 自家規則 unlayered → 自動贏所有 layered 規則 */
6.target { color: var(--brand); }

1:root { --gap: 16px; }
2.results { --gap: 16px; padding: var(--gap); }
3.scope { --gap: 16px; margin-top: var(--gap); }
4/* 三處定義、改一個地方漏改 */

1:root { --gap: 16px; }
2.results { padding: var(--gap); }
3.scope { margin-top: var(--gap); }

1document.documentElement.style.setProperty('--form-height', '...');
2// 而不是 form.style.setProperty(...) 在 form 上設

1<style>
2  .scope { ... }
3  .results { ... }
4  /* ... 50 行 */
5</style>
6<script>
7  function decorate() { ... }
8  /* ... 80 行 */
9</script>

1{{ $css := resources.Get "css/search.css" | minify | fingerprint }}
2<link rel="stylesheet" href="{{ $css.RelPermalink }}">
3
4{{ $js := resources.Get "js/search.js" | minify | fingerprint }}
5<script src="{{ $js.RelPermalink }}" defer></script>

1/* form 高度寫死、gap 寫死、scope 用 measured 值 */
2.scope {
3  top: calc(72px + 16px + var(--scope-measured));
4}

1.form { height: 72px; }  /* 強制固定高度 */
2.scope { top: calc(var(--form-h) + var(--gap)); }

1function recalc() {
2  const fH = form.getBoundingClientRect().height;
3  const gap = parseFloat(getComputedStyle(form).marginBottom);
4  document.documentElement.style.setProperty('--form-h', `${fH}px`);
5  document.documentElement.style.setProperty('--gap', `${gap}px`);
6}
7new ResizeObserver(recalc).observe(form);

1.scope { top: calc(var(--form-h) + var(--gap)); }

1input.style.setProperty('background', '#fff', 'important');
2input.style.setProperty('color', '#000', 'important');

1@layer vendor { @import 'pagefind.css'; }
2
3.pagefind-ui__search-input { background: var(--bg); color: var(--text); }

1window.addEventListener('resize', () => {
2  if (window.innerWidth >= 1400) {
3    sidebar.style.display = 'block';
4  } else {
5    sidebar.style.display = 'none';
6  }
7});

1.sidebar { display: none; }
2@media (min-width: 1400px) {
3  .sidebar { display: block; }
4}

1// 反例：post-filter on view layer
2const all = await pagefind.search(query);
3all.results.slice(start, start + 10).forEach(render);
4document.querySelectorAll('.result').forEach(el => {
5  el.hidden = !matches(el);  // view 層 filter
6});
7// 第二批全 hidden、使用者看到「load more 沒效果」

1# 反例：middleware 在 pagination 之後 filter
2@app.route("/posts")
3def posts():
4    page = Post.objects.paginate(page=1, per_page=10)
5    return [p for p in page.items if p.author == "author_x"]
6    # 漏掉沒在這頁的符合項

1# 反例：先 take 後 filter
2items = list(itertools.islice(stream(), 100))
3filtered = [x for x in items if matches(x)]
4# stream 後面可能還有符合的、但被 take 100 切斷了

1[shards] → [map output] → [reduce]
2                              ↓
3                         [filter]  ← 已是 reduce 後的結果

1-- 反例：在 stale view 上 filter
2SELECT * FROM posts_summary WHERE author_id = 42;
3-- view 可能是某個時點的 snapshot、漏掉之後寫入的 posts
4
5-- 對例：filter 推進原表
6SELECT * FROM posts WHERE author_id = 42;

 1async ({ page }) => {
 2  await page.goto('/search/?q=pre');
 3  await page.click('[data-scope="title"]');  // 選 title-only
 4
 5  // 載入第一批、量已掃 / 命中
 6  const before = {
 7    loaded: await page.$$eval('.result', els => els.length),
 8    visible: await page.$$eval('.result:not([hidden])', els => els.length),
 9  };
10
11  await page.click('button.load-more');
12  await page.waitForTimeout(500);
13
14  const after = {
15    loaded: await page.$$eval('.result', els => els.length),
16    visible: await page.$$eval('.result:not([hidden])', els => els.length),
17  };
18
19  // 層錯位徵兆：loaded 增加、visible 沒增加
20  return {
21    deltaLoaded: after.loaded - before.loaded,
22    deltaVisible: after.visible - before.visible,
23    isSilentGap: after.loaded > before.loaded && after.visible === before.visible,
24  };
25}

1// 用一個極少 match 的 query 觸發 B 策略
2await page.goto('/search/?q=very_rare_keyword');
3await page.click('[data-scope="title"]');
4const startTime = Date.now();
5await page.waitForSelector('.scan-status', { timeout: 10000 });
6// 應該在 5s 內顯示「已掃完、共命中 K 個」、不該無限續抓

1const statusVisible = await page.locator('.filter-status').textContent();
2// 應該明示 loading / partial / end / empty 之一、不只是 spinner

 1// pagefind 分批載入、view 層 post-filter
 2input.addEventListener('input', async () => {
 3  const results = await pagefind.search(input.value);
 4  results.results.slice(0, 10).forEach(render);
 5});
 6
 7document.querySelector('.scope-title').addEventListener('click', () => {
 8  document.querySelectorAll('.result').forEach(el => {
 9    const title = el.querySelector('.title').textContent;
10    el.hidden = !title.includes(query);
11  });
12});

1# Build 階段
2pagefind --site public --output-subdir _pagefind-all
3pagefind --site public --root-selector "article h1, article h2" --output-subdir _pagefind-title

 1const indexes = {
 2  all: await import('/_pagefind-all/pagefind.js'),
 3  title: await import('/_pagefind-title/pagefind.js'),
 4};
 5
 6input.addEventListener('input', async () => {
 7  const pf = currentScope === 'title' ? indexes.title : indexes.all;
 8  const results = await pf.search(input.value);
 9  // results 已是「該 scope 的全集」、無層錯位
10  results.results.slice(0, 10).forEach(render);
11});

1<div class="filter-status">
2  已掃 <strong>24</strong> / <strong>~150</strong> 筆 — 命中 <strong>3</strong>
3  <button>再掃一批</button>
4</div>

1// view 層 filter 保留、但 UI 顯示掃描範圍 + 提供續抓
2function updateStatus() {
3  const all = document.querySelectorAll('.result');
4  const visible = document.querySelectorAll('.result:not([hidden])');
5  document.querySelector('.scanned').textContent = all.length;
6  document.querySelector('.matched').textContent = visible.length;
7}

1@app.route("/posts")
2def list_posts():
3    page = request.args.get('page', 1)
4    posts = Post.objects.paginate(page=page, per_page=10)
5    if author := request.args.get('author'):
6        return [p for p in posts.items if p.author == author]
7    return posts.items

1@app.route("/posts")
2def list_posts():
3    query = Post.objects
4    if author := request.args.get('author'):
5        query = query.filter_by(author=author)  # 推進 ORM
6    page = request.args.get('page', 1)
7    return query.paginate(page=page, per_page=10).items

 1// ancestor chain
 2async () => {
 3  const el = document.querySelector('.target');
 4  let chain = []; let n = el;
 5  while (n && n !== document.body) {
 6    chain.push(`${n.tagName}.${n.className}`);
 7    n = n.parentElement;
 8  }
 9  return chain;
10}

1document.querySelector('.target');

1const root = document.querySelector('.pagefind-ui');
2root.querySelector('.target');  // 從 root 起

1function decorate(root) {
2  return root.querySelector('.target');
3}

1button.addEventListener('click', e => {
2  const card = e.target.closest('.result-card');
3  card.classList.add('expanded');
4});

1function decorate(root) {
2  const targets = root.querySelectorAll('.target:not([data-decorated])');
3  targets.forEach(el => {
4    // ... 處理
5    el.setAttribute('data-decorated', '');
6  });
7}

1const decorated = new WeakMap();
2function decorate(root) {
3  root.querySelectorAll('.target').forEach(el => {
4    if (decorated.has(el)) return;
5    // ... 處理
6    decorated.set(el, true);
7  });
8}

1.pagefind-ui {
2  display: grid;
3  grid-template-rows: auto auto;
4}
5.pagefind-ui__form { grid-row: 1; }
6.pagefind-ui__drawer { grid-row: 2; }

1async () => {
2  const drawer = document.querySelector('.pagefind-ui__drawer');
3  let chain = []; let n = drawer;
4  while (n && n !== document.body) { chain.push(`${n.tagName}.${n.className}`); n = n.parentElement; }
5  return chain;
6}
7// 返回：[DIV.pagefind-ui__drawer, FORM.pagefind-ui__form, DIV.pagefind-ui]
8// → drawer 是 form 的 child、不是 sibling
9// → grid-row 在 .pagefind-ui 上設、無法控制 form 的 child

1document.querySelectorAll('.title').forEach(el => el.classList.add('search-title'));
2// 命中 page header 的 .title、navbar 的 .title、結果卡的 .title — 全變色

1const root = document.querySelector('.pagefind-ui');
2root.querySelectorAll(':scope > .results > .result > .title').forEach(el => el.classList.add('search-title'));
3// 起點 = .pagefind-ui、範圍 = 確切三層、過濾 = 不需要（已精準）

 1<div class="search-page">           ← 自家 (邊界外、可控)
 2  <h1>Search</h1>                   ← 自家
 3  <div class="custom-filter">       ← 自家、客製 UI 放這裡
 4  </div>
 5  <div class="pagefind-ui">          ← Vendor root (邊界、入內就是禁區)
 6    <form class="pagefind-ui__form"> ← Pagefind 管
 7      <input ...>
 8      <div class="pagefind-ui__drawer">  ← Pagefind 管（重渲染時清空）
 9      </div>
10    </form>
11  </div>
12</div>

1const customEl = document.createElement('div');
2customEl.className = 'custom-filter';
3customEl.textContent = 'Filter: All / Title / Content';
4document.querySelector('.search-page').appendChild(customEl);
5// 注意：appendChild 到 .search-page、不是 .pagefind-ui

 1.search-page {
 2  display: grid;
 3  grid-template:
 4    "h1"
 5    "form"
 6    "custom-filter"
 7    "results";
 8}
 9.pagefind-ui { grid-area: form / form / results / results; }
10.custom-filter { grid-area: custom-filter; }

1const filter = document.querySelector('.pagefind-ui__filters');
2const target = document.querySelector('.sidebar');
3target.appendChild(filter);  // 整節點搬到 sidebar、不複製

1const filter = document.createElement('div');
2filter.textContent = 'Filter: ...';
3document.querySelector('.pagefind-ui__form').appendChild(filter);
4// → search 觸發 → form 重渲染 → filter 消失

1const filter = document.createElement('div');
2filter.className = 'custom-filter';
3filter.textContent = 'Filter: ...';
4document.querySelector('.search-page').appendChild(filter);

1.search-page { display: grid; grid-template-areas: "h1" "form" "filter" "results"; }
2.pagefind-ui { grid-area: form / form / results / results; }
3.custom-filter { grid-area: filter; }

1.pagefind-ui__form { background: blue !important; }
2.pagefind-ui__search-input { color: white !important; }
3.pagefind-ui__button { background: darkblue !important; }
4/* ... 8 條 important */

1:root {
2  --pagefind-ui-primary: #2c5282;
3  --pagefind-ui-text: #fff;
4  --pagefind-ui-background: #1a202c;
5}

1const original = document.querySelector('.pagefind-ui__filters');
2const clone = original.cloneNode(true);
3sidebar.appendChild(clone);
4// → 兩份、state 不同步、click 事件 listener 沒複製

1const filter = document.querySelector('.pagefind-ui__filters');
2sidebar.appendChild(filter);  // 整節點搬遷、event listener 跟著、state 唯一

 1frontend-with-playwright/
 2├── SKILL.md                                    # 本檔：六大原則速查 + 觸發路由
 3└── references/
 4    ├── dom-topology-first.md                   # 情境 1：寫 CSS 前用 playwright/DevTools 量真實 DOM、selector 設計
 5    ├── css-js-boundary.md                      # 情境 2：CSS-only vs JS-assisted、class toggle、layers、variable 單一位置、檔案拆分
 6    ├── playwright-in-loop.md                   # 情境 3：playwright 三個位置（假設 / 行為 / 互動驗證）+ 寫成 layout test
 7    ├── framework-coexistence.md                # 情境 4：custom UI 留 framework 邊界外、外部組件四層合作、JS 操作邊界辨識
 8    ├── reactive-performance.md                 # 情境 5：observer scope、polling→observer、頻率盤點、iteration / regex / reflow
 9    ├── accessibility-and-focus.md              # 情境 6：focus on DOM move、keyboard 三要素、aria-live、native HTML > ARIA
10    └── data-flow-and-filter-composition.md     # 情境 7：Filter × Source 層錯位 + 五策略 + 跨領域（前端 / 後端 / 演算法 / DB）

1async () => {
2  const el = document.querySelector('.target');
3  let chain = []; let n = el;
4  while (n && n !== document.body) {
5    chain.push(`${n.tagName}.${n.className}`);
6    n = n.parentElement;
7  }
8  return chain;
9}

1async () => {
2  const parent = document.querySelector('.pagefind-ui');
3  return Array.from(parent.children).map(c => `${c.tagName}.${c.className}`);
4}

1async () => ({
2  count: document.querySelectorAll('.result').length,
3  first: document.querySelector('.result')?.outerHTML.slice(0, 200),
4})

1async () => ({
2  form: document.querySelector('.pagefind-ui__form').getBoundingClientRect(),
3  scope: document.querySelector('.scope').getBoundingClientRect(),
4  results: document.querySelector('.results').getBoundingClientRect(),
5})

 1async () => {
 2  const el = document.querySelector('.target');
 3  const cs = getComputedStyle(el);
 4  return {
 5    display: cs.display,
 6    position: cs.position,
 7    gridRow: cs.gridRow,
 8    color: cs.color,
 9    zIndex: cs.zIndex,
10  };
11}

1async () => {
2  const el = document.querySelector('.target');
3  // CSSOM 沒提供標準 getMatchedCSSRules；用 computed style 加 inspect
4  return getComputedStyle(el).cssText;  // 全部 computed properties
5}

1async () => {
2  const input = document.querySelector('.search-input');
3  input.value = 'pre';
4  input.dispatchEvent(new Event('input', { bubbles: true }));
5  await new Promise(r => setTimeout(r, 1000));  // 等 debounce / async render
6  return Array.from(document.querySelectorAll('.result'))
7    .filter(el => getComputedStyle(el).display !== 'none')
8    .map(el => el.textContent.slice(0, 50));
9}

1async () => {
2  document.querySelector('.scope-toggle button[data-scope="title"]').click();
3  await new Promise(r => setTimeout(r, 500));
4  return {
5    activeScope: document.querySelector('.scope-toggle [aria-pressed="true"]')?.dataset.scope,
6    visibleResults: document.querySelectorAll('.result:not([hidden])').length,
7  };
8}

1await page.setViewportSize({ width: 375, height: 667 });
2const result = await page.evaluate(() => ({
3  layout: document.querySelector('.layout').getBoundingClientRect(),
4  sidebarVisible: getComputedStyle(document.querySelector('.sidebar')).display !== 'none',
5}));

 1import { test, expect } from '@playwright/test';
 2
 3test('search scope is between form and results', async ({ page }) => {
 4  await page.goto('/search/?q=pre');
 5  await page.waitForSelector('.result');
 6
 7  const formRect = await page.locator('.pagefind-ui__form').boundingBox();
 8  const scopeRect = await page.locator('.scope-toggle').boundingBox();
 9  const resultsRect = await page.locator('.results').boundingBox();
10
11  expect(scopeRect.y).toBeGreaterThan(formRect.y + formRect.height);
12  expect(resultsRect.y).toBeGreaterThan(scopeRect.y + scopeRect.height);
13});
14
15test('sidebar visible at 1400px+', async ({ page }) => {
16  await page.setViewportSize({ width: 1400, height: 800 });
17  await page.goto('/search/?q=pre');
18  await expect(page.locator('.sidebar')).toBeVisible();
19});
20
21test('sidebar hidden at < 1400px', async ({ page }) => {
22  await page.setViewportSize({ width: 1399, height: 800 });
23  await page.goto('/search/?q=pre');
24  await expect(page.locator('.sidebar')).toBeHidden();
25});

1# 任何方式起本地 server
2hugo server                                       # Hugo
3python3 -m http.server 8000 --directory public    # 純靜態
4npm run dev                                        # framework dev server

1npm i -D @playwright/test
2npx playwright install
3npx playwright test

 1// 1. 確認 ancestor chain
 2async () => {
 3  const el = document.querySelector('.target');
 4  let chain = []; let n = el;
 5  while (n) { chain.push(`${n.tagName}.${n.className}`); n = n.parentElement; }
 6  return chain;
 7}
 8// → 看到目標元素是 form 的 child、不是 .pagefind-ui 的直接 child
 9
10// 2. 確認 computed style 誰贏
11async () => getComputedStyle(document.querySelector('.target')).color
12// → "rgb(0,0,255)" — vendor 的藍色贏了
13
14// 3. 換方向：用 @layer 把 vendor 包起來

1test('layout golden path: form → scope → results', async ({ page }) => {
2  for (const width of [375, 768, 1024, 1400, 1920]) {
3    await page.setViewportSize({ width, height: 800 });
4    await page.goto('/search/?q=pre');
5    const form = await page.locator('.pagefind-ui__form').boundingBox();
6    const scope = await page.locator('.scope-toggle').boundingBox();
7    expect(scope.y, `at width=${width}`).toBeGreaterThanOrEqual(form.y + form.height);
8  }
9});

 1# Stash 修復、checkout 修前 commit
 2git stash && git checkout <pre-fix-commit>
 3
 4# Cherry-pick 測試 commit、build、跑
 5git cherry-pick <test-commit>
 6make site && npm test
 7# 預期：RED
 8
 9# 切回修後版本
10git checkout main && git stash pop
11npm test
12# 預期：GREEN

1// 監聽整個 page 任何變動
2new MutationObserver(cb).observe(document.body, {
3  childList: true,
4  subtree: true,
5  attributes: true,
6  characterData: true,
7});
8// 一次 react state 變動 → 100+ 個 callback

1const root = document.querySelector('.pagefind-ui__results-area');
2let timer;
3new MutationObserver(() => {
4  clearTimeout(timer);
5  timer = setTimeout(callback, 100);  // debounce 100ms
6}).observe(root, { childList: true });
7// 只監聽 results 直接子節點變動、debounce 100ms

1let count = 0;
2new MutationObserver(() => {
3  count++;
4  console.log('mutation', count);
5}).observe(...);
6
7// 預期：使用者打字 1 秒、觸發 10 次以下
8// 觀察：100+ 次 → 範圍過寬、加 debounce 或縮 root

1const timer = setInterval(() => {
2  const el = document.querySelector('.target');
3  if (el) {
4    decorate(el);
5    clearInterval(timer);
6  }
7}, 50);

 1function waitForElement(selector, root = document.body) {
 2  return new Promise(resolve => {
 3    const existing = root.querySelector(selector);
 4    if (existing) return resolve(existing);
 5
 6    const obs = new MutationObserver(() => {
 7      const el = root.querySelector(selector);
 8      if (el) {
 9        obs.disconnect();
10        resolve(el);
11      }
12    });
13    obs.observe(root, { childList: true, subtree: true });
14  });
15}

1const results = await pagefind.search(query);
2const filtered = results.results.filter(r => /complex|regex|here/i.test(r.excerpt));
3// 500 筆 × regex test = 500 次 regex 編譯與執行

1const re = /complex|regex|here/i;
2const filtered = results.results.filter(r => re.test(r.excerpt));
3// regex 只編譯一次、test 每次便宜

1console.time('filter');
2const filtered = results.filter(...);
3console.timeEnd('filter');
4// 觀察：> 16ms → 影響 60fps、要優化

1elements.forEach(el => {
2  const w = el.offsetWidth;       // read
3  el.style.width = `${w * 2}px`;  // write
4  const h = el.offsetHeight;      // read（強制 reflow）
5  el.style.height = `${h * 2}px`; // write
6});
7// 每次 read 觸發一次 reflow、N 個元素 = N 次 reflow

1const sizes = elements.map(el => ({
2  el, w: el.offsetWidth, h: el.offsetHeight,
3}));
4sizes.forEach(({ el, w, h }) => {
5  el.style.width = `${w * 2}px`;
6  el.style.height = `${h * 2}px`;
7});
8// 1 次 reflow、性能提升 N 倍

1<!-- 搜尋頁進來時、preload 第一個 chunk -->
2<link rel="preload" href="/_pagefind/pagefind-entry.json" as="fetch" crossorigin>
3<link rel="preload" href="/_pagefind/pagefind.js" as="script">
4
5<script type="module">
6  import('/_pagefind/pagefind.js').then(p => p.init());
7</script>

 1// 1. 列出所有 observer / listener
 2console.log({
 3  mutationObservers: window.observers,  // 自家紀錄
 4  resizeObservers: window.resizeObservers,
 5  inputListeners: '...',
 6});
 7
 8// 2. 加 console.count 在每個 callback
 9const decorateCount = (() => { let c = 0; return () => { console.count(`decorate ${++c}`); }; })();
10
11// 3. 操作頁面 1 分鐘、看 console
12// 4. 任何 callback 執行 > 100 次/分鐘 → 評估是否需要 debounce / 縮範圍

1input.addEventListener('input', () => {
2  // 每個鍵盤事件都重 query 整個 results、重排版
3  const results = expensiveQuery(input.value);
4  renderResults(results);
5});

1let timer;
2input.addEventListener('input', () => {
3  clearTimeout(timer);
4  timer = setTimeout(() => {
5    const results = expensiveQuery(input.value);
6    renderResults(results);
7  }, 200);  // debounce 200ms
8});

1const timer = setInterval(() => {
2  if (document.querySelector('.target')) {
3    decorate();
4    clearInterval(timer);
5  }
6}, 100);