frontend git:20260920.a4843f5A

Immutable. This exact content never changes and is served at /api/v1/blob/5ee57a0c7979c673.

---
name: frontend
description: 前端怎么面（框架无关）：浏览器渲染、JS/TS 机制、构建、HTTP 缓存、Web 安全。前端与全栈岗读。
keywords: [前端, frontend, web前端, 前端开发, web developer, javascript, typescript, 浏览器, vite, webpack, http, 性能优化, 大前端, h5, 全栈, fullstack, bff, next.js, ssr, graphql]
layer: domain
---

## 面试官在意什么

前端工程师（也叫 Web 前端、大前端、H5 开发、Frontend Engineer）的日常是把设计稿和接口变成用户可用、可维护、可度量的页面与应用：搭建工程脚手架与构建流水线、写业务组件与状态逻辑、对接接口并处理错误与鉴权、盯性能与线上报错、兼容各种浏览器和 WebView。真实面试里框架无关的部分占了一半以上：浏览器怎么把代码变成像素、JS 的异步与作用域到底怎么运转、打包产物为什么大、首屏为什么慢、请求为什么跨域失败、XSS 从哪进来。面试官最在意三件事：一是有没有从"用户可感知现象"倒推到原理的能力（白屏、卡顿、闪烁、内存涨），二是有没有量化习惯（性能优化必须说出测量手段与前后数字），三是工程判断力——为什么选这个构建工具、为什么这样拆包、这个规范在团队里怎么落地。

校招侧重语言与浏览器基础：事件循环、原型链、闭包、TS 类型系统、HTTP 缓存、跨域、手写 Promise/防抖等；社招侧重工程与线上问题：构建体积治理、首屏指标优化、监控体系、微前端或 Monorepo 的取舍、Web 安全事故复盘。一线大厂与外企近年更爱给一个具体页面或线上现象让候选人现场排查，纯"讲讲原型链"这类题正在减少，但作为筛选门槛依然存在。

怎么问才像这个方向的面试官：
- 前端题从"用户可感知的现象"切入：白屏、卡顿、闪烁、内存涨、发版后旧页面，先问定位再问原理，不问名词解释。
- 性能与体积题必须要求给出测量手段与前后数字，"感觉快了"不算答案；追问的下一句永远是"你怎么证明"。
- 工程化题结合候选人项目规模：个人项目问打包产物分析与缓存策略，团队项目问构建提速、规范落地与多人协作下的依赖治理。
- 不考工具时效：不问"Vite 最新版本改了什么"，考的是构建原理与选型判断；框架特有考点（Hooks、响应式）交给 stack 包，这里只考框架无关的部分。
- 全栈岗用一个跨端故障场景逼候选人选边深挖：先问"你先查前端还是后端、为什么"，再顺着他选的那一侧追到排查层；后端一侧的深挖用 backend 包，这里只管 BFF、渲染策略与契约。
- 2026 年框架层的分水岭是服务端组件与编译器：React 19 的 Server Components、Actions 与 React Compiler，Vue 3.5 的响应式重写与 Vapor 模式。这些在 react / vue 细节包里；这里只考框架无关的浏览器与语言机制，但会追候选人"什么该在服务端渲染、什么该在客户端"的判断。

## 项目 / 实习怎么深挖

简历上出现下面这类经历时从哪里切、追什么。追到候选人能说出机制、数字的来源与一次真实的故障或取舍才算实；只有框架名与结论、说不出自己那一段的，记为危险信号。通用的追问方法见 project-deep-dive。

- 简历出现"首屏优化 X%" → 追优化前后的指标名（LCP 还是 FCP）、测量工具与样本、最大的一项改动是什么、有没有回归
- 简历出现"打包体积减少 X%" → 追用什么工具分析、砍掉的最大头是什么、拆包粒度怎么定、上线后加载瀑布有没有变差
- 简历出现自研脚手架 / 构建配置 → 追为什么不用现成模板、解决了团队什么痛点、维护成本怎么控、迁移 Vite 或升级大版本时踩了什么
- 简历出现前端监控 / 埋点 → 追采集了哪些指标、采样率、source map 还原怎么做、监控 SDK 本身开销多少、发现过什么线上问题
- 简历出现微前端 → 追为什么需要（团队还是技术原因）、样式与全局变量隔离怎么做、公共依赖怎么共享、比 Monorepo 多解决了什么
- 简历出现 TypeScript 迁移 → 追渐进策略、any 占比怎么降、类型检查时长、最难的类型是什么
- 简历出现 H5 / WebView / 跨端 → 追兼容问题的定位手段、JSBridge 怎么设计、低端机的性能数据
- 简历出现组件库 / 设计系统 → 追按需加载与 tree shaking 怎么保证、主题定制方案、可访问性做到什么程度、版本升级怎么不 break 业务
- 简历出现 BFF / 中间层 → 追它聚合了几个下游、有没有超时熔断、最慢的接口是哪个、为什么不让前端直接调
- 简历出现 Next.js / Nuxt / Remix → 追哪些页面 SSR 哪些 CSR、hydration 报过什么错、部署在哪、服务端渲染的成本谁付
- 简历出现 GraphQL / monorepo / 共享类型 → 追为什么选它、N+1 怎么解决、共享了什么、一次改动影响面怎么控制

## 常见失守与危险信号

- 浏览器渲染流水线与首屏：只会背"回流重绘"却说不出 Layout 和 Paint 的区别；说"用 SSR 就快了"但说不出 SSR 对 TTFB 和服务器成本的影响；没有任何测量工具的使用经验
- 事件循环与异步模型：能背出 setTimeout 与 Promise 的输出顺序题但说不出为什么这会影响页面卡顿；不知道微任务会阻塞渲染；把"加防抖"当所有卡顿的解药
- 作用域、闭包与 this：只会说"闭包就是函数里返回函数"；分不清内存泄漏和内存占用高；不知道 heap snapshot 怎么对比
- 原型、类与模块系统：说不出 ESM 静态分析与 CJS 动态 require 的本质区别；不知道 package.json 的 exports 字段
- TypeScript 类型系统与工程实践：把 TS 当"带类型注释的 JS"，到处 any；不知道 unknown 和 any 的区别；说不出类型体操在业务里解决了什么真实问题
- 构建工具与产物治理：只会说"配置一下 splitChunks"；不知道 browserslist 影响 polyfill 与语法降级；从没看过打包分析报告
- HTTP、缓存与网络优化：说不出 Cache-Control 各指令；认为"加时间戳参数"是缓存治理；不知道 HTML 不能强缓存的原因
- 跨域、鉴权与 Web 安全：认为"前端做了转义就没 XSS"；说 CSRF 时讲不出 SameSite 的作用；把 JWT 放 localStorage 却不知道 XSS 后果

## 常考主题清单

只列名字、阶梯与答实的标志，作"问到哪一层算实"的参考；问哪些、问几道由这份 JD 与这份简历定，不是配额。

### 浏览器渲染流水线与首屏
- 阶梯：从 URL 输入到页面可见经过哪些阶段 → DOM/CSSOM 构建、渲染树、Layout/Paint/Composite 各自的触发条件与代价，script 为什么阻塞解析 → 首屏白屏 3 秒，怎么用 Performance 面板或 Lighthouse 把时间归到网络、解析、脚本执行、资源阻塞哪一段 → SSR、流式渲染、骨架屏、关键 CSS 内联各自解决哪段延迟，什么产品值得上 SSR
- 答实的标志：能区分 FCP/LCP/TTI/INP 并说出各自被什么影响；知道 defer/async/preload/prefetch 的差异；能用 Performance 面板读长任务与主线程阻塞；对 SSR 的收益与代价有真实判断

### 事件循环与异步模型
- 阶梯：宏任务与微任务的执行顺序 → Promise、async/await 的底层是微任务队列，requestAnimationFrame 与 requestIdleCallback 在帧里的位置 → 页面在某个操作后卡死 2 秒，怎么用 Performance 定位是长任务、同步布局、还是大量微任务饿死渲染 → 把大计算切片（时间分片、Web Worker、scheduler.yield）的取舍与工程侵入性
- 答实的标志：能画出一帧里 JS、样式计算、布局、绘制的顺序；知道 50ms 长任务阈值与 INP 的关系；有把重计算移出主线程的实践；理解 Worker 传输数据的序列化成本

### 作用域、闭包与 this
- 阶梯：闭包是什么、循环里 var 与 let 的经典差异 → 词法作用域、执行上下文、this 的四种绑定规则与箭头函数 → 闭包导致内存泄漏的真实场景（事件监听未解绑、定时器持有大对象、模块级缓存无上限）怎么用 Memory 面板找 → 模块化、函数式风格与可读性的平衡，什么时候该用类
- 答实的标志：会用 heap snapshot 三次对比法找 detached DOM；提到 AbortController 集中解绑；知道 WeakMap/WeakRef 适用场景；能说出闭包捕获的是变量而不是值

### 原型、类与模块系统
- 阶梯：原型链查找过程、instanceof 与 Object.create → class 是语法糖但有哪些不同（暂时性死区、静态块、私有字段）→ ESM 与 CommonJS 混用时的坑（default 互操作、循环依赖、tree shaking 失效）→ 库的打包产物该出 ESM 还是 CJS 还是双份，条件导出怎么设计
- 答实的标志：能用打包分析工具定位；知道副作用标记、Babel 转译成 CJS 会破坏摇树；理解循环依赖下 ESM 的 live binding 行为

### TypeScript 类型系统与工程实践
- 阶梯：interface 与 type 的差异、泛型基本用法 → 条件类型、映射类型、infer、协变逆变在函数参数上的表现 → 项目类型检查从 10 秒涨到 2 分钟怎么排查（深层递归类型、巨大联合、any 传染）→ 严格程度与迭代速度的平衡：strict 全开在老项目怎么渐进推进，什么时候允许 as/any
- 答实的标志：能写可辨识联合与类型守卫；知道 satisfies 与 as const 的用途；有用 tsc --extendedDiagnostics 或 trace 查过类型性能；有从 JS 迁 TS 的渐进策略

### 构建工具与产物治理
- 阶梯：Vite 开发态为什么快、生产态为什么还是 Rollup 打包 → ESBuild/SWC/Rolldown 与 Babel/Terser 在编译与压缩两端的分工，代码分割的边界怎么定 → 打包产物 3MB 怎么治理：分析工具找大头、重复依赖、polyfill 过量、图片与字体、按路由分割、动态导入 → 微前端/Monorepo 场景下构建缓存、依赖版本统一、CI 构建时间的取舍
- 答实的标志：会用 rollup-plugin-visualizer 或 webpack-bundle-analyzer；提到 HTTP/2 下拆包粒度的变化；理解 modulepreload 与 chunk 加载瀑布；知道 CI 里构建缓存怎么做

### HTTP、缓存与网络优化
- 阶梯：强缓存与协商缓存、状态码 200/304/206 → HTTP/2 多路复用解决了什么、HTTP/3 又解决了什么，CDN 缓存键与 Vary → 用户报"发版后页面还是旧的"怎么定位（HTML 被 CDN 缓存、Service Worker 缓存、hash 没变）→ 缓存策略与发布回滚、灰度的配合，长缓存 + 内容哈希的边界情况
- 答实的标志：HTML no-cache + 静态资源 immutable 的组合；发布时保留旧版本资源；提到 SW 的更新策略与 skipWaiting 风险；知道 preconnect/dns-prefetch 的适用场景

### 跨域、鉴权与 Web 安全
- 阶梯：同源策略与 CORS 的简单请求/预检 → Cookie 属性（SameSite、HttpOnly、Secure）、token 存哪里、CSRF 的原理 → 线上出现 XSS：从富文本、URL 参数、第三方脚本哪条路进来的，怎么定位与止血 → CSP 上线的收益与业务改造成本，token 放 localStorage 与 Cookie 的取舍
- 答实的标志：区分存储型/反射型/DOM 型 XSS；提到 CSP、SRI、sandbox iframe；能说出 SameSite=Lax 默认值带来的变化；对 token 存放有权衡而非教条