Bài này nói về hiệu năng frontend mức senior cho phỏng vấn: vòng đo trước, token và pref nằm ở đâu, cách tách và tree-shake bundle, và Core Web Vitals (LCP, INP, CLS) được chấm trên field thế nào. Dành cho engineer đã ship Vue 3 / Nuxt, giờ cần một quyết định dưới ràng buộc thật: network, JavaScript, main thread (luồng chính), layout, hoặc hydration, không phải một list cơ chế.

Đọc 9.1 trước (storage, vòng tối ưu, checklist review, case study). Người phỏng vấn xoáy Core Web Vitals trên field và “ràng buộc là gì” nhiều hơn trivia debounce. Rồi 9.2 cho code splitting, tree shaking, debounce khác throttle, ảnh và font, và định nghĩa vitals 2026. Nêu rõ metric, chỗ gãy bạn đã gặp, và cách chứng minh fix bằng trace. Không phải một lần chạy Lighthouse trên laptop.

Tóm tắt: Web Storage (localStorage, sessionStorage) là kho key/value cùng origin, JS đọc được. Cookie là chuỗi nhỏ trình duyệt gửi kèm request khớp. Memory là biến chết lúc refresh. Dung lượng, lifetime, và rủi ro XSS quyết định chỗ để, không phải thói quen.

Vì sao quan trọng: “Nhét JWT vào localStorage” là fail phỏng vấn và món quà XSS trên production. Cookie trông như cache lại đi theo mọi API call. Catalog 5 MB trong localStorage chặn main thread (luồng chính) mỗi lần đọc. Chi tiết auth nằm ở Best practices về authentication; topic này là byte nằm ở đâu.

1. Cách hoạt động: localStorage sống đến khi user hoặc origin xóa (~5–10 MB, không phải bảo đảm). sessionStorage chết cùng tab. Cả hai là API JS đồng bộ: JSON parse lớn chặn input (INP, Interaction to Next Paint).
2. Cookie khoảng 4 KB mỗi cái, theo domain/path, và gắn vào HTTP khớp. httpOnly giấu chúng khỏi JS (XSS không cướp được; giờ CSRF là việc của bạn). Chúng không phải cache.
3. Access token: memory, hoặc cookie session httpOnly. Pref chấp nhận mất (theme, locale): localStorage. Draft wizard theo tab: sessionStorage. Catalog offline lớn: IndexedDB, không phải Web Storage. Xem security 10.3 cho refresh rotation.

// Access token ở lại memory, không bao giờ Web Storage
let accessToken: string | null = null
export const tokenMemory = {
  get: () => accessToken,
  set: (t: string | null) => { accessToken = t },
}
// Refresh: Set-Cookie từ API (httpOnly, Secure, SameSite=Lax)
// Theme thì được trong localStorage; catalog 5 MB thì không
localStorage.setItem('theme', 'dark')
try {
  localStorage.setItem('catalog:v3', json) // QuotaExceededError trên Safari
} catch { /* LRU hoặc IndexedDB, đừng treo checkout */ }

Điều gì xảy ra: Access token không đụng kho JS đọc được, nên XSS cùng origin không exfiltrate được. Theme sống sau refresh. Ghi catalog quá nặng có thể throw QuotaExceededError; bắt nó để checkout không bị treo. Version key (catalog:v3), không thì một lần deploy phục vụ JSON cũ mãi.

Lỗi hay gặp

• Triệu chứng: session bị cướp sau một XSS. Nguyên nhân: access token trong localStorage. Cách xử lý: memory hoặc cookie httpOnly (security 10.3).
• Triệu chứng: checkout bị treo vì quota. Nguyên nhân: nhét catalog vào Web Storage. Cách xử lý: IndexedDB + LRU.
• Triệu chứng: “localStorage mã hóa” vẫn đổ session. Nguyên nhân: XSS cùng origin giải mã được. Cách xử lý: đừng cất token ở đó.
• Triệu chứng: các tab không share token memory. Nguyên nhân: RAM theo tab. Cách xử lý: BroadcastChannel hoặc lock + refresh. Đừng đồng bộ access token vào localStorage.

Tóm tắt: Tối ưu theo vòng: đo, nêu loại bottleneck (network, JavaScript, render, layout), sửa đúng loại đó, rồi kiểm chứng bằng cùng metric. Vue đã batch update. v-memo / useMemo dùng sớm là nhiễu đến khi profile hiện component nóng.

Vì sao quan trọng: “Mình debounce và lazy-load ảnh” là miss mặc định. Bạn không memo được API 400 ms hay PNG hero 2 MB. Người phỏng vấn muốn Core Web Vitals trên field (xem 9.2.5) và profile Performance máy tầm trung trước mọi cơ chế Vue.

1. Cách hoạt động: 1. Đo LCP / INP / CLS trên field (CrUX hoặc RUM) và một profile trên máy tầm trung. INP (Interaction to Next Paint) đã thay FID.
2. 2. Phân loại: network (TTFB, payload, waterfall), JavaScript (nặng theo route, dep chết), render (việc của component, hydration), layout (reflow vì media chưa size hoặc ép offsetHeight).
3. 3. Đổi một lever cho đúng loại: cache/CDN, tách/bỏ dep, virtualize list khổng lồ, chừa chỗ ảnh. 4. Đo lại cùng metric field.

// Đo trước, rồi phân loại. Đừng bắt đầu bằng memo.
performance.mark('search:start')
const res = await fetch(`/api/search?q=${q}`)
performance.mark('search:end')
performance.measure('search', 'search:start', 'search:end')
const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming
const ttfb = nav.responseStart - nav.requestStart
// Network: TTFB 400 ms → cache / BFF, không phải v-memo
// JS: main chunk 800 KB → tách chart, không debounce input
// Render: table 5k hàng → virtualize; layout: hero chưa size → width/height
console.log({ ttfb, search: performance.getEntriesByName('search')[0]?.duration })

Điều gì xảy ra: Mark bọc search. Nếu TTFB át, folklore debounce sẽ không giúp. Nếu main chunk 800 KB, tách chart. Nếu table 5k node DOM, virtualize. Mỗi loại một lever khác. Chứng minh bằng RUM trước/sau, không phải một Lighthouse 100.

Lỗi hay gặp

• Triệu chứng: bọc hết computed vẫn chậm. Nguyên nhân: ràng buộc là TTFB. Cách xử lý: đo, rồi cache.
• Triệu chứng: Lighthouse 100, user vẫn giận. Nguyên nhân: lab trên laptop. Cách xử lý: RUM field trên Android tầm trung.
• Triệu chứng: table 20 hàng bị “virtualized”. Nguyên nhân: cargo cult. Cách xử lý: profile; virtualize hàng nghìn, không phải vài chục.
• Triệu chứng: bỏ qua warning hydration, CLS nhảy. Nguyên nhân: Date.now() lúc render. Cách xử lý: markup ổn định; xem case study.

Tóm tắt: Review senior là checklist rủi ro ngắn, không phải lượt soi style. Linter đã lo thứ tự import. Dành phút cho authz, tiền, dependency mới, a11y, và public API.

Vì sao quan trọng: Thời gian review có hạn. Một v-html, thư viện date 200 KB trên route home, feature flag mặc định bật, hoặc check quyền chỉ ở UX sẽ lọt ra production. Thứ tự class Tailwind thì không.

1. Cách hoạt động: 1. Đọc ticket và đi hết flow user, gồm empty, error, unauthorized. Đừng chỉ đọc diff.
2. 2. Bảo mật: v-html / innerHTML / href javascript:; token trong storage; secret trong VITE_ hoặc log.
3. 3. a11y: control native vs div role="button" giả; focus trên dialog mới; name/role/value.
4. 4. Bundle: nặng dep mới và sideEffects; import theo route khác global. 5. API contract và flag (mặc định tắt, rollback có tên).

<script setup lang="ts">
import moment from 'moment' // CHẶN: ~200 KB trên route home
const html = inject('cmsHtml') as string
</script>
<template>
  <!-- CHẶN: XSS + không có cây a11y. Sanitize hoặc dùng slot. -->
  <div v-html="html" />
  <div role="button" @click="pay">Pay</div> <!-- CHẶN: không phải <button> -->
</template>
// Review: chạy flow pay. Flag mặc định? Ticket rollback? Delta lockfile?

Điều gì xảy ra: Ba issue chặn trong một PR “nhỏ”: thư viện date CJS quá nặng, HTML chưa sanitize, và button giả trên luồng tiền. Nit style có thể chờ. Lỗ auth và tiền không được để ticket follow-up.

Lỗi hay gặp

• Triệu chứng: nit che một v-html. Nguyên nhân: review style trước. Cách xử lý: list rủi ro trước, rồi mới soi tên.
• Triệu chứng: PR “nhỏ” thêm SDK cloud. Nguyên nhân: không xem nặng import. Cách xử lý: visualizer / sizebot trên PR.
• Triệu chứng: flag ship lên ở trạng thái bật. Nguyên nhân: ticket không ghi default/rollback. Cách xử lý: chặn đến khi nêu rõ.
• Triệu chứng: đổi chỉ lockfile bị bỏ qua. Nguyên nhân: “không có code app”. Cách xử lý: review version transitive mới.

Tóm tắt: Kể incident production theo Situation, Task, Action, Result. Nêu rõ ràng buộc, đổi một đòn bẩy, chứng minh bằng trace. Số bên dưới là placeholder: nói là bạn sẽ kiểm chứng, đừng trích blog.

Vì sao quan trọng: Người phỏng vấn bắt “mình đã virtualize” mà không đo, hoặc “LCP giảm vì một bài viết nói 3 MB → 900 KB”. Điểm cho thấy senior nằm ở cột kiểm chứng: long task, QPS Network, transfer size, log hydration, không phải FPS folklore.

1. Cách hoạt động (STAR 1, list): Situation: grid admin ~[N] hàng giật lúc scroll. Task: lấy lại INP. Action: virtualize (@tanstack/vue-virtual), flatten hàng, sort ngoài main thread. Result: long task lúc scroll xuống dưới 50 ms; ship dump a11y không virtualize.
2. STAR 2, refetch: GET trùng lúc focus tab. Action: TanStack Query / useAsyncData staleTime, debounce query, AbortController. Result: QPS server lúc search giảm [metric].
3. STAR 3, chunk quá nặng / hydration: Chunk main ~[size] vì chart và barrel. Action: tách theo route, defineAsyncComponent, bỏ barrel (xem 9.2.2). Hydration lệch (Date.now()) → <ClientOnly> + id ổn định. Result: LCP và CLS field dịch; xác nhận bằng trace, không phải số marketing đã gzip.

// Phác STAR 2: abort search đang chạy để “s” không ghi đè “sql”
let generation = 0
async function search(q: string, signal: AbortSignal) {
  const mine = ++generation
  const res = await fetch(`/api/search?q=${q}`, { signal })
  if (mine !== generation) return // response muộn không được thắng
  return res.json()
}
// Kiểm chứng: waterfall Network + QPS server, không phải “cảm giác mượt hơn”
// STAR 1 kiểm chứng: long task trên panel Performance lúc scroll + attribution INP

Điều gì xảy ra: Bộ đếm generation kèm AbortSignal bỏ response muộn. Đó là STAR refetch. STAR list virtualize DOM; STAR chunk tách JS. Mỗi cái cần trace khác. Số để [N] / [metric] đến khi bạn có số của mình.

Lỗi hay gặp

• Triệu chứng: list đã virtualize, find-in-page trống. Nguyên nhân: DOM offscreen. Cách xử lý: dump a11y / export không virtualize.
• Triệu chứng: đồng đội đổ “JS” cho LCP 4 s, trong khi đó là PNG 2 MB. Nguyên nhân: trace không có element LCP. Cách xử lý: chỉ Resource Timing.
• Triệu chứng: v-memo che một closure cũ. Nguyên nhân: memo sau store quá nặng. Cách xử lý: profile, rồi tách state.
• Triệu chứng: “console sạch trên máy mình”. Nguyên nhân: không có RUM field. Cách xử lý: log hydration trên staging + trace CLS.

Tóm tắt: Code splitting (tách code) chỉ load JS khi route hoặc widget cần. Route-level là mặc định. Component-level cho widget nặng hoặc hiếm. Tách vendor là runtime dùng chung, cache lâu. import() là primitive; prefetch thì maybe.

Vì sao quan trọng: Mỗi chunk thêm là một request và một UI loading bạn phải thiết kế. Không tách editor 400 KB trên mọi trang là miss thường gặp. Tách button 2 KB là phí. Prefetch cả admin trên landing marketing đốt bandwidth.

1. Cách hoạt động: Tách route: Vue Router () => import(), Nuxt pages/ (auto), segment Next app/. Lần vào đầu chịu waterfall; lần sau trúng cache nếu hash ổn định.
2. Tách component: defineAsyncComponent / React.lazy + Suspense cho chart, editor, admin. Skeleton chừa chiều cao để CLS không nhảy. Timeout để chunk treo không thành màn trống.
3. Tách vendor: chunk vue+pinia ổn định, sống qua các lần deploy app. Prefetch route kế có khả năng sau idle (rel=prefetch / router.onReady). Lùi prefetch khi saveData. Xem tree shaking cho barrel phá lần tách.

<script setup lang="ts">
const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  delay: 150,
  timeout: 15_000,
})
</script>
<template>
  <Suspense>
    <HeavyChart />
    <template #fallback>
      <div class="chart-slot" aria-busy="true" /> <!-- chừa chiều cao, không phải spinner nhảy -->
    </template>
  </Suspense>
</template>
// routes: component: () => import('@/pages/Dashboard.vue')

Điều gì xảy ra: Chart không nằm trong JS đầu của dashboard. Sau 150 ms một slot chừa chiều cao hiện ra (aria-busy). Timeout 15 s fail rõ. Import trang này vào main sẽ phá auto-split của Nuxt.

Lỗi hay gặp

• Triệu chứng: landing marketing tải JS admin. Nguyên nhân: import tĩnh / prefetch sớm. Cách xử lý: tách route + chỉ prefetch lúc idle.
• Triệu chứng: spinner làm nhảy trang (CLS). Nguyên nhân: không chừa chiều cao. Cách xử lý: skeleton có aspect-ratio.
• Triệu chứng: chunk treo, app trống. Nguyên nhân: không timeout. Cách xử lý: timeout + UI lỗi.
• Triệu chứng: Nuxt vẫn đưa trang vào main. Nguyên nhân: import module trang từ layout. Cách xử lý: để file router chịu trách nhiệm.

Tóm tắt: Tree shaking là bundler bỏ export ESM không dùng sau phân tích tĩnh. Cần import tĩnh kèm cờ sideEffects khai đúng. CJS, import(variable) động, và barrel đầy re-export thường không shake được.

Vì sao quan trọng: import debounce from 'lodash' thường kéo theo một graph CJS lớn. Một icon từ index của design system có thể kéo cả nghìn SVG. sideEffects: false trên thư viện Vue mà CSS load như side effect làm mất style trên production.

1. Cách hoạt động: Rollup/Vite đọc ESM. Named export không dùng bị bỏ nếu file được đánh dấu không có side effect. import debounce from 'lodash-es/debounce' là leaf. import { debounce } from 'lodash' (CJS) thì thường không.
2. package.json "sideEffects": false nghĩa là “bạn được bỏ file này nếu không import gì từ nó”. CSS và SFC Vue là side effect: hãy liệt kê ("**/*.css", "**/*.vue").
3. Ưu tiên native (toSorted, structuredClone) rồi helper ESM leaf. Plugin Vue app.use hết mọi thứ thì không shake được: hãy tách. Xác nhận bằng visualizer; fail CI nếu package cấm lọt vào main.

// Import named ESM, không phải barrel CJS
import debounce from 'lodash-es/debounce'
// native trước, khi baseline cho phép
const rows = list.toSorted((a, b) => a.name.localeCompare(b.name))

// package.json của thư viện Vue: giữ CSS / SFC là side effect
// {
//   "sideEffects": ["**/*.css", "**/*.vue"]
// }
// sideEffects: false ở đây sẽ làm mất style trên production

Điều gì xảy ra: Một hàm debounce tới từ leaf ESM. toSorted thêm 0 byte. Nếu thư viện Vue này gán sideEffects: false toàn cục, CSS production sẽ biến mất. Barrel index re-export icon vẫn kéo cả thế giới.

Lỗi hay gặp

• Triệu chứng: lodash vẫn trong bundle sau một hàm. Nguyên nhân: barrel CJS. Cách xử lý: leaf lodash-es hoặc native.
• Triệu chứng: production không có CSS. Nguyên nhân: sideEffects: false trên file import style. Cách xử lý: glob CSS/SFC.
• Triệu chứng: một icon, 1 MB. Nguyên nhân: re-export index. Cách xử lý: import SVG/component leaf.
• Triệu chứng: visualizer sạch local, quá nặng trên CI. Nguyên nhân: NODE_ENV / alias khác. Cách xử lý: so production build.

Tóm tắt: Debounce chờ khoảng lặng, rồi chạy một lần (search, hết resize). Throttle lấy mẫu đều trong một luồng (scroll, kéo). Không cái nào thay abort việc đang bay. Live-coding helper nằm ở các mục Q&A debounce và throttle.

Vì sao quan trọng: Debounce giá trị input làm ô bị trễ. Response “s” chậm hơn có thể ghi đè “sql” nếu bạn không abort. Throttle không trailing thì bỏ vị trí scroll cuối. Cả hai phải hủy lúc unmount.

1. Cách hoạt động: Debounce: mỗi event reset timer. Sau 200–400 ms lặng, một call chạy. Trailing = chạy ở cuối (search). Leading = chạy ngay, rồi bỏ qua (khóa double-submit).
2. Throttle: tối đa một call mỗi window. Để bám visual, window là requestAnimationFrame. Trailing để state cuối đúng.
3. Search: giữ input live, debounce request, abort request đang bay (AbortController / VueUse onCleanup). Đừng search lúc IME composition (isComposing). Vẫn rate-limit server.

import { watchDebounced } from '@vueuse/core'
watchDebounced(
  query,
  async (q, _prev, onCleanup) => {
    const ac = new AbortController()
    onCleanup(() => ac.abort())
    if (!q) { results.value = []; return }
    results.value = await searchCatalog(q, { signal: ac.signal })
  },
  { debounce: 300 },
)
// Input vẫn live. Request chờ 300 ms trailing, rồi abort lúc gõ lần sau.

Điều gì xảy ra: Gõ “sql” reset timer ba lần. Một request chạy sau 300 ms lặng. Cleanup abort call đang bay để “s” không thắng. Bản thân input không bị debounce. Phần implement timer nằm ở Q&A live-coding debounce.

Lỗi hay gặp

• Triệu chứng: ô bị trễ. Nguyên nhân: debounce v-model. Cách xử lý: giá trị live, debounce request.
• Triệu chứng: “s” ghi đè “sql”. Nguyên nhân: không abort. Cách xử lý: AbortController / onCleanup.
• Triệu chứng: scroll spy kẹt sớm một section. Nguyên nhân: throttle không trailing. Cách xử lý: trailing hoặc rAF.
• Triệu chứng: search thừa lúc gõ CJK. Nguyên nhân: bỏ qua isComposing. Cách xử lý: skip đến compositionend.

Tóm tắt: Size mọi ảnh (width/height hoặc aspect-ratio) để CLS bằng không. Ảnh LCP là priority (fetchpriority="high", NuxtImg preload, Next priority), không bao giờ loading="lazy". Font: subset, preload một family, font-display: optional hoặc swap gần.

Vì sao quan trọng: Media chưa size và font swap muộn là CLS hay gặp. Lazy-load hero làm trễ LCP (Largest Contentful Paint). Preload ba file font cướp băng thông của LCP. PNG local trong /public bỏ qua image optimizer.

1. Cách hoạt động: Hero: <img> thật (hoặc <NuxtImg> / next/image) có width/height, format hiện đại (AVIF/WebP + fallback), srcset / sizes, fetchpriority="high". Dưới fold: loading="lazy" + decoding="async".
2. Font: subset (unicode-range), preload một family body, font-display: optional (không swap muộn; mạng chậm có thể giữ font hệ) hoặc swap với fallback khớp metric.
3. CDN / Nuxt Image / Next Image cần domain trong allow-list. UGC có max dimension. Banner cookie không chừa chiều cao là CLS sản phẩm, không phải bất ngờ. Xem Core Web Vitals.

<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="630"
  format="webp"
  densities="1x 2x"
  sizes="100vw"
  preload
  alt="Product hero"
/>
<!-- Đừng loading="lazy" hero đó. Dưới fold: lazy + decoding="async". -->
@font-face {
  font-family: InterVar;
  src: url("/fonts/inter-subset.woff2") format("woff2");
  font-display: optional;
  unicode-range: U+0000-00FF;
}

Điều gì xảy ra: Hero đã size, preload, và là ảnh thật, nên LCP paint được. Font body được subset và optional, nên file muộn không đẩy layout. Lazy dành cho thumbnail dưới fold, không bao giờ hero này.

Lỗi hay gặp

• Triệu chứng: LCP 4 s, JS trông ổn. Nguyên nhân: hero lazy hoặc PNG 2 MB. Cách xử lý: priority + nén / NuxtImg.
• Triệu chứng: CLS lúc paint đầu. Nguyên nhân: ảnh chưa size hoặc font swap muộn. Cách xử lý: width/height + optional.
• Triệu chứng: hero là background-image CSS. Nguyên nhân: không có element LCP. Cách xử lý: <img> thật.
• Triệu chứng: ảnh prod 404. Nguyên nhân: thiếu remotePatterns / allow-list domain. Cách xử lý: check preview.

Tóm tắt: Core Web Vitals trên field năm 2026 là LCP (Largest Contentful Paint, tốt ≤ 2,5 s), INP (Interaction to Next Paint, tốt ≤ 200 ms), và CLS (Cumulative Layout Shift, tốt ≤ 0,1). INP đã thay FID. Debug field trước, rồi reproduce trên lab, rồi đổi một đòn bẩy.

Vì sao quan trọng: Lab chỉ là desktop giả làm điện thoại. Field gồm Android tầm trung, 4G, extension, banner consent, và flag A/B. Lighthouse 100 mà p75 INP xấu nghĩa là bạn tối ưu nhầm thứ. FID chỉ đo độ trễ của tương tác đầu.

1. Cách hoạt động: LCP = lúc hero lớn nhất (ảnh hoặc chữ) paint. Kém > 4,0 s. Nguyên nhân điển hình: TTFB chậm, hero lazy/chưa tối ưu, font trễ.
2. INP = độ trễ tương tác tệ nhất (gần như) xuyên suốt lượt thăm. Kém > 500 ms. Tách: input delay, processing, presentation. Long tasks (> 50 ms) và hydration nằm ở đây.
3. CLS = layout shift bất ngờ. Kém > 0,25. Media chưa size, font muộn, banner bị nhét vào, swap hydration. Playbook: p75 field (28 ngày, mobile) → attribution → CPU 4× + 4G chậm → một đòn bẩy sau flag.

import { onCLS, onINP, onLCP } from 'web-vitals'
function send(metric: { name: string; value: number; id: string }) {
  navigator.sendBeacon('/rum', JSON.stringify(metric))
}
onLCP(send, { reportAllChanges: false }) // tốt ≤ 2500 ms
onINP(send, { reportAllChanges: false }) // tốt ≤ 200 ms; đã thay FID
onCLS(send) // tốt ≤ 0.1
// attribution: true trong web-vitals v4+ trỏ tới element / event
// Lab (Lighthouse) để reproduce. p75 field trên route mới là điểm.

Điều gì xảy ra: Snippet gửi LCP, INP, và CLS tới RUM của bạn. Ngưỡng là chuẩn field năm 2026. Attribution (khi bật) nêu rõ element LCP, target INP, và node CLS, nên bạn không phải đoán. Lab là cách reproduce sau khi field báo bạn fail.

Lỗi hay gặp

• Triệu chứng: Lighthouse 100, p75 đang đỏ. Nguyên nhân: lab trên laptop. Cách xử lý: RUM field, 28 ngày, mobile.
• Triệu chứng: vẫn nhắc FID. Nguyên nhân: cheat sheet cũ. Cách xử lý: INP đã thay FID; đo xuyên suốt lượt thăm.
• Triệu chứng: preload sáu font, LCP tệ hơn. Nguyên nhân: tranh băng thông. Cách xử lý: preload ảnh LCP + một family.
• Triệu chứng: “trang im nên INP ổn”. Nguyên nhân: một click nặng. Cách xử lý: Event Timing / LoAF trên Pay.