Bài này nói về Browser API mức senior cho phỏng vấn Vue: IndexedDB, worker, service worker, Intersection Observer, một nhóm API hiện đại ngắn, và sync session đa tab. Dành cho engineer đã ship UI, giờ cần đặt việc và data sao cho main thread (luồng chính) vẫn tương tác được.

Đọc 4.1–4.3 trước (data nằm ở đâu, CPU chạy ở đâu, proxy mạng cache thế nào). Người phỏng vấn hỏi version upgrade, chi phí postMessage, và cache poisoning nhiều hơn snippet indexedDB.open. Sau đó đọc 4.4–4.6 về observer, API nền tảng mới hơn, và logout giữa các tab. Với mỗi topic, nêu rõ chi phí, chỗ hỏng, và cách bạn chứng minh phần sửa.

Tóm tắt: IndexedDB là database có cấu trúc, bất đồng bộ, theo quota origin của browser. Nó lưu bản ghi lớn hoặc có index (bản nháp, catalog, outbox). Không phải localStorage phóng to.

Vì sao quan trọng: PWA cho sales đi field phải chạy được dưới tầng hầm, rồi mới sync. Editor tự lưu tài liệu rất lớn. localStorage đồng bộ, chỉ chuỗi, khoảng 5MB. Parse JSON 4MB trên main thread (luồng chính) làm treo tab. Quota, version 12 gặp tab v11, và hai tab cùng server bất đồng mới là câu hỏi thật.

1. Cách hoạt động: Data nằm trong DB theo origin, gồm object store và index. Đọc và ghi chạy trong transaction. Đổi schema xảy ra ở onupgradeneeded khi bạn tăng version.
2. Chọn store theo việc: IndexedDB cho dữ liệu megabyte và cần index; localStorage cho cờ sync nhỏ; Cache API cho HTTP response; cookie khi server phải thấy giá trị.
3. Năm 2026 mình không tự viết IDB. Dùng Dexie (hoặc tương tự) cho schema, live query, và transaction. IDB trần chỉ là wrapper nhỏ bạn chịu trách nhiệm hết, không phải huy hiệu senior.
4. IDB bất đồng bộ nhưng không miễn phí. Scan lớn trên main thread vẫn giật. Đọc nặng thì đưa vào worker. Đừng chặn first paint: hiện shell, hydrate từ IDB, rồi mới network.
5. Khi tab A mở v13, các tab khác nhận versionchange và phải đóng, nếu không upgrade bị chặn (onblocked). Instance Dexie giữ lâu phải lắng nghe và reload.

import Dexie, { type Table } from 'dexie'

class AppDB extends Dexie {
  drafts!: Table<{ id: string; body: string; updatedAt: number }>
  constructor() {
    super('app')
    this.version(1).stores({ drafts: 'id, updatedAt' })
  }
}
const db = new AppDB()

db.on('versionchange', () => {
  db.close()
  location.reload() // tab khác đã upgrade schema
})

await db.drafts.put({ id: 'doc-1', body, updatedAt: Date.now() })

Điều gì xảy ra: Dexie đặt tên store và index. put là một transaction. Nếu tab khác tăng version, versionchange đóng kết nối này rồi reload để upgrade không bị chặn. Không có listener đó, tab mới kẹt ở onblocked và user tưởng app bị treo.

Lỗi hay gặp

• Triệu chứng: tab treo lúc mở. Nguyên nhân: parse JSON localStorage 4MB trên main thread. Cách xử lý: IndexedDB + hydrate sau first paint.
• Triệu chứng: deploy v12 treo. Nguyên nhân: tab v11 không đóng. Cách xử lý: versionchange → db.close() + reload.
• Triệu chứng: onupgradeneeded xóa data production. Nguyên nhân: deleteObjectStore trong migration. Cách xử lý: migration chỉ thêm và test từ vN−1.
• Triệu chứng: Dexie liveQuery leak sau khi rời trang. Nguyên nhân: không unsubscribe. Cách xử lý: stop trong onUnmounted / onScopeDispose.

Tóm tắt: Web worker là thread chạy nền và không có DOM. Bạn gửi data bằng postMessage (structured clone, hoặc transfer một ArrayBuffer). Dùng cho CPU mà nếu để trên main thread sẽ thành long task (tác vụ chạy > 50 ms).

Vì sao quan trọng: Parse JSON 8MB, CSV, hoặc resize ảnh làm đơ input. Đồng nghiệp bật worker cho sort 3ms, mà chi phí clone còn lớn hơn phần việc. Người phỏng vấn muốn khi nào worker mới đáng dùng, transferable vs structured clone, SharedWorker, và Comlink.

1. Cách hoạt động: new Worker(url, { type: 'module' }) mở một thread. postMessage copy payload (structured clone), trừ khi bạn transfer một ArrayBuffer, lúc đó bản phía gửi bị zero.
2. Worker không có DOM và không có instance Vue. Hãy gửi DTO. Function, prototype class, và Vue proxy không clone được: toRaw trước.
3. Hãy profile trước. Nếu việc chỉ ~5ms, cứ giữ trên main thread. Đo long task và tổng thời lượng (clone + worker + clone về).
4. Vite: new URL('./parse.ts', import.meta.url) hoặc ?worker. Làm đúng chuyện bundler, nếu không bạn ship 404 trên production. Terminate lúc unmount.
5. Comlink là RPC trên postMessage. DX tốt cho module quá nặng; cái giá là API gọi qua lại nhiều và transfer bị giấu. postMessage trần cho một việc / một kết quả.

// parse.worker.ts
self.onmessage = (e: MessageEvent<{ text: string }>) => {
  const rows = JSON.parse(e.data.text) as unknown[]
  self.postMessage({ count: rows.length }) // logs: { count: 20000 }
}

const worker = new Worker(new URL('./parse.worker.ts', import.meta.url), {
  type: 'module',
})
worker.onmessage = (e: MessageEvent<{ count: number }>) => {
  total.value = e.data.count
}
worker.postMessage({ text: rawJson })
onScopeDispose(() => worker.terminate())

Điều gì xảy ra: Parse 20k hàng chạy ngoài main thread, nên input vẫn paint được. Kết quả là DTO nhỏ (count), không phải Vue proxy. terminate lúc dispose scope tránh leak thread sau khi đổi route. Gửi rawJson vẫn clone chuỗi: với ArrayBuffer đã decode, hãy transfer.

Lỗi hay gặp

• Triệu chứng: postMessage(vueState) throw. Nguyên nhân: Proxy không structured-clone được. Cách xử lý: toRaw + DTO.
• Triệu chứng: lần render sau đọc buffer rỗng. Nguyên nhân: bạn đã transfer ArrayBuffer và byteLength là 0. Cách xử lý: đừng đọc bản bên gửi.
• Triệu chứng: production 404 file worker. Nguyên nhân: sai Vite ?worker / new URL. Cách xử lý: công thức bundler trong bản prod.
• Triệu chứng: 40 worker trên dashboard. Nguyên nhân: một worker mỗi widget. Cách xử lý: pool dùng chung; terminate lúc unmount.

Tóm tắt: Service worker là proxy mạng có cache. Nó chặn fetch, precache asset đã hash, và giữ shell offline. Offline là quyết định sản phẩm, không phải bảng strategy.

Vì sao quan trọng: SW sống lâu hơn tab và có thể phục vụ JS cũ nói chuyện với API mới, hoặc cache HTML 200 từ captive portal. skipWaiting giữa form khiến hai tab chạy hai bundle. Người phỏng vấn muốn cache poisoning, UX update, Workbox vs fetch handler tự viết: không phải checklist PWA.

1. Cách hoạt động: Vòng đời là install → waiting → activate. Worker đang chờ không control page cho đến skipWaiting + clients.claim(), hoặc user reload.
2. Cache asset tĩnh đã hash theo Cache First (Workbox precache). GET API chỉ khi product hiểu policy. Không bao giờ cache API mutation.
3. Stale-while-revalidate hợp news feed. Network First hợp số dư. GET /api/me theo URL là cách rò user sai.
4. Revision index.html (hoặc CDN no-cache trên document) để user nhận bundle hash mới. Cache document mãi là cách kẹt app cũ mà không hay.
5. Workbox là thứ mình ship. Tự viết là cách quên ignoreVary, range request, và opaque response. Tắt SW trong Vite dev, không thì nó đánh nhau với HMR.

// Đăng ký, rồi hỏi user trước skipWaiting.
navigator.serviceWorker.addEventListener('controllerchange', () => {
  // SW mới đang control page này: reload một lần
})

async function promptUpdate(reg: ServiceWorkerRegistration) {
  const waiting = reg.waiting
  if (!waiting) return
  showBanner('A new version is ready', () => {
    waiting.postMessage({ type: 'SKIP_WAITING' })
  })
}

reg.addEventListener('updatefound', () => promptUpdate(reg))

Điều gì xảy ra: Worker mới install rồi chờ. Banner là UX sản phẩm: user xong form, rồi skip waiting. controllerchange reload để mọi tab chạy một bundle. skipWaiting() ngay trong install bỏ qua bước hỏi đó, và là cách làm hỏng POST đang gửi.

Lỗi hay gặp

• Triệu chứng: user không bao giờ nhận bundle mới. Nguyên nhân: index.html cache mãi. Cách xử lý: revision document hoặc CDN no-cache.
• Triệu chứng: hai tab, hai bundle, form lưu dở. Nguyên nhân: skipWaiting + clients.claim() trong install. Cách xử lý: banner + reload.
• Triệu chứng: /api/me hiện user trước. Nguyên nhân: GET cache theo URL. Cách xử lý: Network First hoặc no-store cho auth.
• Triệu chứng: Vite HMR gãy local. Nguyên nhân: SW đăng ký lúc development. Cách xử lý: chỉ đăng ký ở bản production.

Tóm tắt: Intersection Observer cho biết khi target cắt root + margin + threshold. Đó là API cho ảnh lazy, sentinel của list vô hạn, analytics impression, và prefetch route, không phải listener scroll.

Vì sao quan trọng: Handler scroll trên window để toggle class sẽ giật layout. IO bất đồng bộ và được gộp. Nó không phải virtualization: bạn vẫn mount 10k node Vue và chỉ lazy ảnh. Ai unobserve mới là câu hỏi leak.

1. Cách hoạt động: Bạn observe target so với root (viewport nếu null). rootMargin nới hoặc thu root. threshold là tỉ lệ nhìn thấy để callback chạy.
2. Dùng cho ảnh lazy, sentinel cuối list, viewability, và prefetch (rootMargin: '200px'). Hãy đặt trần prefetch: bạn sẽ fetch link user không bao giờ mở.
3. Luôn unobserve sau khi ảnh load, hoặc disconnect() lúc unmount. Node còn được observe là retainer.
4. div cuộn được phải truyền làm root, không thì IO trông như “hỏng”. SSR: observe trong onMounted; giữ width/height trên ảnh cho CLS.
5. Khi list lớn, dùng thư viện virtualization (TanStack Virtual, vue-virtual-scroller). Một mình IO không unmount hàng.

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
const el = ref<HTMLElement | null>(null)
const show = ref(false)
onMounted(() => {
  const io = new IntersectionObserver(([e]) => {
    if (!e?.isIntersecting) return
    show.value = true
    io.unobserve(e.target) // dừng khi đã hiện
  }, { rootMargin: '200px' })
  if (el.value) io.observe(el.value)
  onUnmounted(() => io.disconnect())
})
</script>
<template>
  <img v-if="show" :src="src" width="400" height="300" alt="" />
  <div v-else ref="el" class="ph" />
</template>

Điều gì xảy ra: Placeholder được observe với margin 200px, nên ảnh bắt đầu load ngay trước khi vào màn hình. Khi đã intersect, unobserve bỏ retainer. width/height giữ chỗ layout để CLS (Cumulative Layout Shift) thấp. Đây là lazy-load, không phải virtualizer 10k hàng.

Lỗi hay gặp

• Triệu chứng: heap phình khi bạn scroll. Nguyên nhân: không bao giờ unobserve. Cách xử lý: unobserve lúc load; disconnect lúc unmount.
• Triệu chứng: IO không bao giờ chạy trong modal. Nguyên nhân: root: null trong khi scroller là div bên trong. Cách xử lý: truyền element đó làm root.
• Triệu chứng: 50k hàng vẫn giật. Nguyên nhân: v-for hết, IO chỉ trên ảnh. Cách xử lý: virtualize list.
• Triệu chứng: ảnh LCP đến muộn. Nguyên nhân: lazy-load hero. Cách xử lý: eager + width/height cho ảnh LCP.

Tóm tắt: Coi API nền tảng hiện đại là capability + quyền + vòng đời. Những cái xuất hiện khi phỏng vấn Vue senior là ResizeObserver, structuredClone, BroadcastChannel, View Transitions, và scheduler.yield: mỗi cái có một vết sẹo, không phải hello-world.

Vì sao quan trọng: Clipboard write thường chạy trong click và fail trong watch khi không có user activation. ResizeObserver lặp khi bạn ghi style làm resize node đang observe. scheduler.yield là cách chia long task (tác vụ chạy > 50 ms) mà không cần worker. Bật đại View Transitions trong Vue Router là lời hứa virtual DOM chưa chắc giữ được.

1. Cách hoạt động: ResizeObserver báo khi box của element đổi. Ưu tiên hơn window resize cho chart theo container. Nếu CSS container query làm được, hãy dùng CSS.
2. structuredClone copy Date/Map (xem JavaScript 1.2.4). toRaw trước trên Vue proxy. Topic này không lặp bảng clone đó.

3. BroadcastChannel là bus cùng origin giữa các tab. Logout đa tab nằm ở

   • 4.6. Ở đây: nó tồn tại, không phải server push, mọi script trên origin đều nghe được.
4. scheduler.yield() (nơi được hỗ trợ) trả promise nhường browser để input kịp paint. Fallback: setTimeout(0) / scheduler.postTask. Kiểm tra support trước khi hứa thắng INP.
5. View Transitions: progressive enhancement, không phải nền của design system. Support do Chromium dẫn.

const box = ref<HTMLElement | null>(null)
onMounted(() => {
  const ro = new ResizeObserver((entries) => {
    const { width } = entries[0]!.contentRect
    chart.value?.resize(width) // đừng set height lên box ở đây
  })
  if (box.value) ro.observe(box.value)
  onUnmounted(() => ro.disconnect())
})

async function parseAll(chunks: string[]) {
  for (const chunk of chunks) {
    consume(chunk)
    if ('scheduler' in window && 'yield' in scheduler) await scheduler.yield()
    else await new Promise((r) => setTimeout(r, 0))
  }
}

Điều gì xảy ra: Observer đo một box riêng rồi resize chart. Ghi height ngược lên box sẽ lặp (ResizeObserver loop completed with undelivered notifications). scheduler.yield (hoặc setTimeout(0)) nhường renderer giữa các chunk để parse dài không thành một long task 200ms.

Lỗi hay gặp

• Triệu chứng: clipboard reject trong watch. Nguyên nhân: không có user activation tức thời. Cách xử lý: copy trong click handler; hiện state fail.
• Triệu chứng: ResizeObserver loop completed with undelivered notifications. Nguyên nhân: bạn ghi style làm resize node đang observe. Cách xử lý: observe el bên trong; ghi trên rAF.
• Triệu chứng: View Transitions nháy trong Vue Router. Nguyên nhân: VDOM và platform cùng morph một cây. Cách xử lý: giữ Vue <Transition>; coi VT là tùy chọn.
• Triệu chứng: geolocation chạy ở app chính, fail trong embed. Nguyên nhân: Permissions-Policy. Cách xử lý: allow trên iframe, hoặc đừng hứa.

Tóm tắt: BroadcastChannel là bus tin nhắn cùng origin giữa tab, window, và dedicated worker. Dùng để báo mọi tab rằng session đã kết thúc. Event storage cũ trên localStorage là họ hàng yếu hơn, XSS đọc được.

Vì sao quan trọng: User logout ở tab A; tab B vẫn hiện dashboard và tiếp tục PATCH với user đó. Hoặc login ở A phải refresh B. Đây là thiết kế session đa tab. Cookie không emit cho JavaScript khi chúng đổi, nên bạn vẫn cần bus cho state Pinia / Vue Query in-memory.

1. Cách hoạt động: new BroadcastChannel('session') rồi postMessage({ type: 'session:end' }). Mọi tab trên origin đã subscribe đều nhận. Nó không fire sang browser, thiết bị, hay profile khác.
2. Lúc logout: broadcast session:end, xóa state in-memory, abort request đang bay, về login. Auth tốt nhất vẫn là cookie httpOnly kèm invalidation phía server.
3. Event storage chỉ chạy ở tab khác, và chỉ khi giá trị đổi. Nó không chạy ở tab vừa ghi. Đừng JSON.parse(null) khi removeItem.
4. Tên channel không phải bí mật. Mọi script trên origin đều nghe được. Đừng broadcast token hoặc object user: hãy gửi “refetch /me” hoặc “session ended”.
5. Một composable mức app useSessionBus(). Channel theo component mà không đóng sẽ leak. Đóng channel mức app lúc teardown là đủ.

const bus = new BroadcastChannel('session')

export function useSessionBus() {
  function endSession() {
    userStore.clear()
    queryClient.clear()
    bus.postMessage({ type: 'session:end' })
    router.push('/login')
  }
  function onMessage(e: MessageEvent<{ type: string }>) {
    if (e.data.type === 'session:end') {
      inflight.abort()
      userStore.clear()
      router.push('/login')
    }
  }
  bus.addEventListener('message', onMessage)
  onScopeDispose(() => bus.removeEventListener('message', onMessage))
  return { endSession }
}

Điều gì xảy ra: Logout ở tab này xóa memory, báo mọi tab khác, và đưa về login. Tab kia abort PATCH đang bay để không ghi với user cũ. Channel mang một type, không phải token. Listener được gỡ theo scope nên test hoặc mount lần hai không xử lý kép.

Lỗi hay gặp

• Triệu chứng: tab B vẫn PATCH sau khi A logout. Nguyên nhân: không có bus, hoặc bạn chỉ xóa cookie. Cách xử lý: broadcast session:end và abort request đang bay.
• Triệu chứng: handler storage không chạy ở tab vừa logout. Nguyên nhân: event không fire ở tab ghi. Cách xử lý: tự xử lý nhánh local.
• Triệu chứng: JSON.parse throw lúc logout. Nguyên nhân: event.newValue === null khi removeItem. Cách xử lý: check null trước khi parse.
• Triệu chứng: bạn broadcast object user. Nguyên nhân: coi channel như ống riêng. Cách xử lý: gửi type; refetch /me.