The senior signal is not knowing every API; it is knowing which one exists for a problem so you do not install a package for something the browser does. This page is a map of the ones that come up in interviews and code reviews, grouped by the question they answer, with the 2026 support status where it matters.

Know

• Working with URLs and bytes: URL and URLSearchParams (parse, build, URL.canParse()/URL.parse() without try/catch), encodeURIComponent versus encodeURI, TextEncoder/TextDecoder, Uint8Array.toBase64()/fromHex() (ES2026), structuredClone for deep copies (Dates, Maps, cycles; not functions).
• Crypto: crypto.randomUUID() for ids, crypto.getRandomValues() for tokens, crypto.subtle for hashing (digest('SHA-256')), HMAC signatures (webhooks), AES-GCM encryption, key derivation (PBKDF2, HKDF); available in browsers, Node and edge runtimes, which is why h3 and nuxt-auth-utils build on it. Never hand-roll crypto; never do password hashing on the client.
• Files and blobs: Blob, File, FileReader (or blob.text()/arrayBuffer()/stream()), URL.createObjectURL() (revoke it), FormData for multipart uploads, <input type="file"> with accept/capture, drag-and-drop DataTransfer, the File System Access API (Chromium: showOpenFilePicker, write back to disk) versus the download fallback (<a download>), showSaveFilePicker.
• Navigation: the history API (pushState, replaceState, popstate) that routers use; the Navigation API (navigation.navigate(), navigate event with intercept(), navigation.entries()) in Chromium and Safari, the modern replacement Vue Router does not yet use; View Transitions API (document.startViewTransition, ::view-transition-* pseudo-elements, view-transition-name) for same-document and cross-document transitions, which Nuxt wires through experimental.viewTransition; Speculation Rules (prefetch/prerender with eagerness) for instant navigations; scroll-behavior, scrollIntoView({ block }), scrollend event.
• Page Lifecycle and bfcache: visibilitychange and document.visibilityState (pause work, send beacons), pageshow/pagehide with event.persisted for back/forward cache restores, freeze/resume (Chromium). bfcache restores a page instantly on Back and counts as a fast navigation for the vitals; it is blocked by unload listeners, Cache-Control: no-store on the HTML (relaxed in Chrome for some cases), open connections (WebSocket, IndexedDB transactions in flight in some browsers), and beforeunload in some cases; test it in DevTools → Application → Back/forward cache.
• Performance measurement: performance.now(), mark/measure (visible in the Performance panel), PerformanceObserver for largest-contentful-paint, layout-shift, event (INP), longtask/long-animation-frame (LoAF, with script attribution), resource and navigation timing, paint; the web-vitals library wraps these; performance.memory is deprecated in favour of measureUserAgentSpecificMemory() (cross-origin isolated pages).
• Scheduling: requestAnimationFrame (before paint), requestIdleCallback (when idle, with deadline), scheduler.postTask() with priorities and scheduler.yield() to break up long tasks, queueMicrotask, setTimeout; AbortSignal.timeout()/AbortSignal.any() to compose cancellation.
• Observers: IntersectionObserver (visibility, lazy loading, infinite scroll, rootMargin, threshold), ResizeObserver (element size; contentBoxSize/borderBoxSize), MutationObserver (DOM changes, batched as microtasks), PerformanceObserver (above), ReportingObserver (deprecations, interventions, CSP reports).
• User-facing capabilities: navigator.clipboard.writeText()/read() (permission-gated, user gesture), navigator.share() (Web Share, mobile-first), Notification + Web Push, Geolocation, Permissions API to check before asking, Screen Wake Lock, Vibration, Battery (limited), matchMedia() for preference and viewport queries in JS, Intl (see the JavaScript section).
• Communication and workers: postMessage with origin checks (always verify event.origin), MessageChannel, BroadcastChannel, SharedWorker, Web Locks, EventSource, WebSocket, WebTransport (QUIC-based, Chromium/Firefox), WebRTC for peer media and data.
• Components and compute: Custom Elements and Shadow DOM (defineCustomElement in Vue), <template>/<slot>, ElementInternals for form-associated elements; WebAssembly (WebAssembly.instantiateStreaming; how SQLite runs in the browser for Nuxt Content's client-side queries in this very app), WebGPU for compute and rendering, OffscreenCanvas.
• Security-adjacent APIs: Trusted Types (CSP-enforced DOM sink typing; Vue 3.5 supports it), the Sanitizer API (setHTML(), still maturing; verify), Permissions-Policy header controls feature availability, Credential Management and WebAuthn/passkeys (navigator.credentials) for phishing-resistant login.
• Feature detection: 'startViewTransition' in document, CSS.supports(), @supports, and Baseline as the vocabulary; polyfill only what is worth its bytes.

How it works

Instant back navigation: making a page bfcache-eligible and measuring it:

export default defineNuxtPlugin(() => {
  // ✗ window.addEventListener('unload', save)  -> blocks bfcache in every browser
  // ✓ pagehide fires on both real unloads and bfcache freezes
  window.addEventListener('pagehide', () => navigator.sendBeacon('/api/telemetry/leave', JSON.stringify({ path: location.pathname })))

  window.addEventListener('pageshow', (event) => {
    if (event.persisted) refreshNuxtData() // restored from bfcache: data may be stale, refresh quietly
  })

  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') pauseLiveUpdates()
    else resumeLiveUpdates()
  })
})

The Performance APIs behind the vitals, without a library, for a custom dashboard:

export function observePerformance(report: (entry: { type: string, value: number, detail?: string }) => void) {
  new PerformanceObserver((list) => {
    for (const e of list.getEntries()) report({ type: 'lcp', value: e.startTime, detail: (e as LargestContentfulPaint).element?.tagName })
  }).observe({ type: 'largest-contentful-paint', buffered: true })

  new PerformanceObserver((list) => {
    for (const e of list.getEntries() as PerformanceEntry[] & { hadRecentInput?: boolean, value?: number }[]) {
      if (!e.hadRecentInput) report({ type: 'layout-shift', value: e.value ?? 0 })
    }
  }).observe({ type: 'layout-shift', buffered: true })

  new PerformanceObserver((list) => {
    for (const e of list.getEntries()) report({ type: 'long-animation-frame', value: e.duration, detail: (e as any).scripts?.[0]?.sourceURL })
  }).observe({ type: 'long-animation-frame', buffered: true })
}

Web Crypto for a webhook signature check in a Nitro route (same API in browser, Node and edge):

export default defineEventHandler(async (event) => {
  const raw = await readRawBody(event, 'utf8') ?? ''
  const signature = getHeader(event, 'x-signature') ?? ''
  const key = await crypto.subtle.importKey('raw', new TextEncoder().encode(useRuntimeConfig(event).webhookSecret), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign'])
  const mac = new Uint8Array(await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(raw)))
  const expected = mac.toHex()
  if (expected.length !== signature.length || !timingSafeEqual(expected, signature)) throw createError({ status: 401, statusText: 'Bad signature' })
  return handleEvent(JSON.parse(raw))
})

View transitions and speculation, the two navigation upgrades that need no framework:

export async function swapContent(update: () => void) {
  if (!document.startViewTransition || matchMedia('(prefers-reduced-motion: reduce)').matches) return update()
  await document.startViewTransition(update).finished
}

<script setup lang="ts">
useHead({ script: [{ type: 'speculationrules', innerHTML: JSON.stringify({ prefetch: [{ where: { href_matches: '/study/*' }, eagerness: 'moderate' }] }) }] })
</script>

Exercise

Be able to say