---
name: frontend
description: 前端领域出题（框架无关）：浏览器渲染与性能、JS/TS 语言机制、工程化与构建、网络与安全、可访问性与监控。目标岗位是前端/Web/大前端/客户端 Web 方向时加载；React/Vue 细节交给对应 stack 包。
keywords: [前端, frontend, web前端, 前端开发, web developer, javascript, typescript, 浏览器, vite, webpack, http, 性能优化, 大前端, h5]
layer: domain
---

## 岗位职责与考察重点

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

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

## 主题

### 浏览器渲染流水线与首屏
- 阶梯：从 URL 输入到页面可见经过哪些阶段 → DOM/CSSOM 构建、渲染树、Layout/Paint/Composite 各自的触发条件与代价，script 为什么阻塞解析 → 首屏白屏 3 秒，怎么用 Performance 面板或 Lighthouse 把时间归到网络、解析、脚本执行、资源阻塞哪一段 → SSR、流式渲染、骨架屏、关键 CSS 内联各自解决哪段延迟，什么产品值得上 SSR
- 好题：一个电商活动页移动端首屏白屏 3 秒，你拿到的只有线上地址，按什么顺序定位？发现是一个 200KB 的第三方 SDK 同步加载阻塞了解析，你会怎么改、改完怎么证明有效？
- 危险信号：只会背"回流重绘"却说不出 Layout 和 Paint 的区别；说"用 SSR 就快了"但说不出 SSR 对 TTFB 和服务器成本的影响；没有任何测量工具的使用经验
- 期望信号：能区分 FCP/LCP/TTI/INP 并说出各自被什么影响；知道 defer/async/preload/prefetch 的差异；能用 Performance 面板读长任务与主线程阻塞；对 SSR 的收益与代价有真实判断

### 事件循环与异步模型
- 阶梯：宏任务与微任务的执行顺序 → Promise、async/await 的底层是微任务队列，requestAnimationFrame 与 requestIdleCallback 在帧里的位置 → 页面在某个操作后卡死 2 秒，怎么用 Performance 定位是长任务、同步布局、还是大量微任务饿死渲染 → 把大计算切片（时间分片、Web Worker、scheduler.yield）的取舍与工程侵入性
- 好题：一个表格页面在输入过滤关键字后卡顿明显，代码里是 input 事件里同步过滤两万条数据再 setState，你会怎么改？改成 Web Worker 和改成时间分片各有什么代价？
- 危险信号：能背出 setTimeout 与 Promise 的输出顺序题但说不出为什么这会影响页面卡顿；不知道微任务会阻塞渲染；把"加防抖"当所有卡顿的解药
- 期望信号：能画出一帧里 JS、样式计算、布局、绘制的顺序；知道 50ms 长任务阈值与 INP 的关系；有把重计算移出主线程的实践；理解 Worker 传输数据的序列化成本

### 作用域、闭包与 this
- 阶梯：闭包是什么、循环里 var 与 let 的经典差异 → 词法作用域、执行上下文、this 的四种绑定规则与箭头函数 → 闭包导致内存泄漏的真实场景（事件监听未解绑、定时器持有大对象、模块级缓存无上限）怎么用 Memory 面板找 → 模块化、函数式风格与可读性的平衡，什么时候该用类
- 好题：一个 SPA 在反复切换某两个路由后内存从 80MB 涨到 600MB，你怎么用 DevTools 抓到是哪些对象没释放？常见的几类根因分别怎么修？
- 危险信号：只会说"闭包就是函数里返回函数"；分不清内存泄漏和内存占用高；不知道 heap snapshot 怎么对比
- 期望信号：会用 heap snapshot 三次对比法找 detached DOM；提到 AbortController 集中解绑；知道 WeakMap/WeakRef 适用场景；能说出闭包捕获的是变量而不是值

### 原型、类与模块系统
- 阶梯：原型链查找过程、instanceof 与 Object.create → class 是语法糖但有哪些不同（暂时性死区、静态块、私有字段）→ ESM 与 CommonJS 混用时的坑（default 互操作、循环依赖、tree shaking 失效）→ 库的打包产物该出 ESM 还是 CJS 还是双份，条件导出怎么设计
- 好题：你们内部组件库被业务方反馈"引一个 Button 打进来 300KB"，你怀疑哪些原因？怎么验证 tree shaking 有没有生效？sideEffects 字段起什么作用？
- 危险信号：说不出 ESM 静态分析与 CJS 动态 require 的本质区别；不知道 package.json 的 exports 字段
- 期望信号：能用打包分析工具定位；知道副作用标记、Babel 转译成 CJS 会破坏摇树；理解循环依赖下 ESM 的 live binding 行为

### TypeScript 类型系统与工程实践
- 阶梯：interface 与 type 的差异、泛型基本用法 → 条件类型、映射类型、infer、协变逆变在函数参数上的表现 → 项目类型检查从 10 秒涨到 2 分钟怎么排查（深层递归类型、巨大联合、any 传染）→ 严格程度与迭代速度的平衡：strict 全开在老项目怎么渐进推进，什么时候允许 as/any
- 好题：给一个接口返回 `{ type: 'a', payload: A } | { type: 'b', payload: B }`，让你写一个根据 type 自动推导 payload 的事件处理函数签名，你会怎么写？为什么很多人写的版本在调用处 payload 会退化成联合？
- 危险信号：把 TS 当"带类型注释的 JS"，到处 any；不知道 unknown 和 any 的区别；说不出类型体操在业务里解决了什么真实问题
- 期望信号：能写可辨识联合与类型守卫；知道 satisfies 与 as const 的用途；有用 tsc --extendedDiagnostics 或 trace 查过类型性能；有从 JS 迁 TS 的渐进策略

### 构建工具与产物治理
- 阶梯：Vite 开发态为什么快、生产态为什么还是 Rollup 打包 → ESBuild/SWC/Rolldown 与 Babel/Terser 在编译与压缩两端的分工，代码分割的边界怎么定 → 打包产物 3MB 怎么治理：分析工具找大头、重复依赖、polyfill 过量、图片与字体、按路由分割、动态导入 → 微前端/Monorepo 场景下构建缓存、依赖版本统一、CI 构建时间的取舍
- 好题：你接手一个 Vite 项目，生产包 vendor chunk 有 2.4MB，先做什么？发现 lodash 和 lodash-es 同时存在、moment 带了全部 locale，各怎么处理？拆包拆得太碎会带来什么问题？
- 危险信号：只会说"配置一下 splitChunks"；不知道 browserslist 影响 polyfill 与语法降级；从没看过打包分析报告
- 期望信号：会用 rollup-plugin-visualizer 或 webpack-bundle-analyzer；提到 HTTP/2 下拆包粒度的变化；理解 modulepreload 与 chunk 加载瀑布；知道 CI 里构建缓存怎么做

### 状态管理与数据流（框架无关）
- 阶梯：为什么要把状态从组件里抽出来 → 单向数据流、不可变更新、派生状态与缓存的关系 → 页面上同一份数据在多处不一致（列表与详情、缓存与服务器）怎么定位与设计（服务器状态与客户端状态分开）→ 全局 store、URL 状态、服务端缓存库三者各管什么，过度全局化的代价
- 好题：一个后台系统的用户列表和用户详情弹窗经常显示不一致，代码里两处各自请求并各自存了一份数据，你会怎么重新划分状态归属？哪些状态应该放 URL 里？
- 危险信号：所有状态一律扔进全局 store；分不清服务器状态和 UI 状态；没意识到 URL 也是状态源
- 期望信号：区分 server state / client state / URL state；提到请求去重、缓存失效、乐观更新；能说出选择性订阅避免无关重渲染

### HTTP、缓存与网络优化
- 阶梯：强缓存与协商缓存、状态码 200/304/206 → HTTP/2 多路复用解决了什么、HTTP/3 又解决了什么，CDN 缓存键与 Vary → 用户报"发版后页面还是旧的"怎么定位（HTML 被 CDN 缓存、Service Worker 缓存、hash 没变）→ 缓存策略与发布回滚、灰度的配合，长缓存 + 内容哈希的边界情况
- 好题：发版后部分用户看到白屏，控制台报某 chunk 404，你能想到几种原因？怎么设计发布流程避免"HTML 新、JS 旧"或"HTML 旧、JS 新"？
- 危险信号：说不出 Cache-Control 各指令；认为"加时间戳参数"是缓存治理；不知道 HTML 不能强缓存的原因
- 期望信号：HTML no-cache + 静态资源 immutable 的组合；发布时保留旧版本资源；提到 SW 的更新策略与 skipWaiting 风险；知道 preconnect/dns-prefetch 的适用场景

### 跨域、鉴权与 Web 安全
- 阶梯：同源策略与 CORS 的简单请求/预检 → Cookie 属性（SameSite、HttpOnly、Secure）、token 存哪里、CSRF 的原理 → 线上出现 XSS：从富文本、URL 参数、第三方脚本哪条路进来的，怎么定位与止血 → CSP 上线的收益与业务改造成本，token 放 localStorage 与 Cookie 的取舍
- 好题：你的应用要接入一个第三方评论组件（iframe 或脚本），从安全角度你会设置哪些限制？如果对方脚本被投毒，你的页面哪些数据可能泄露、怎么把影响面缩到最小？
- 危险信号：认为"前端做了转义就没 XSS"；说 CSRF 时讲不出 SameSite 的作用；把 JWT 放 localStorage 却不知道 XSS 后果
- 期望信号：区分存储型/反射型/DOM 型 XSS；提到 CSP、SRI、sandbox iframe；能说出 SameSite=Lax 默认值带来的变化；对 token 存放有权衡而非教条

### 性能度量与线上监控
- 阶梯：Core Web Vitals 各指标含义 → 实验室数据与真实用户数据（RUM）的差异，PerformanceObserver、web-vitals 库怎么采集 → 线上 LCP P75 突然从 2.1s 涨到 3.5s，怎么按版本、地域、机型、页面下钻归因 → 采样率、上报时机（sendBeacon、visibilitychange）、监控 SDK 自身的性能开销
- 好题：你要从零给公司搭一套前端监控，报错、性能、行为三类数据各采什么字段、怎么上报、怎么防止监控 SDK 自己拖慢页面？错误堆栈是压缩后的，怎么还原？
- 危险信号：只知道 Lighthouse 跑分；不知道 source map 怎么在监控平台还原；上报没有采样也没有合并
- 期望信号：区分 lab 与 field 数据；知道 INP 取代 FID；提到 source map 上传与访问控制；有按维度下钻的经验

### 可访问性与国际化
- 阶梯：语义化标签、alt、label 的作用 → ARIA 的角色与状态、键盘可操作、焦点管理 → 自定义下拉/弹窗在读屏软件里不可用怎么修，焦点陷阱怎么做 → 无障碍改造的投入与合规要求（出海、政企项目）之间的取舍，国际化时文本长度、RTL、日期数字格式的坑
- 好题：你写了一个自定义 Modal 组件，从可访问性角度它至少要满足哪几条？出海产品做阿拉伯语 RTL 时布局上最容易出什么问题？
- 危险信号：认为可访问性就是"给图片加 alt"；用 div 做按钮却不加键盘事件与 role；不知道 Intl API
- 期望信号：焦点管理、Esc 关闭、aria-modal、背景 inert；提到 prefers-reduced-motion；国际化用 ICU 消息格式而不是字符串拼接

### CSS 布局与视觉稳定
- 阶梯：Flex 与 Grid 的适用场景、BFC → 层叠上下文、合成层与 GPU 加速的条件与代价 → 页面 CLS 高：图片没占位、字体切换、动态插入横幅，怎么定位与修 → CSS 方案选型（原子化、CSS Modules、CSS-in-JS 的运行时成本）在团队规模下的取舍
- 好题：一个图文流页面 CLS 0.4，你会从哪几类来源查？web 字体导致的闪烁有哪几种处理策略、各自的视觉代价是什么？
- 危险信号：说不出为什么 transform 动画比 top/left 便宜；把 will-change 到处加；不知道 aspect-ratio 与 font-display
- 期望信号：能用 Layout Shift 面板定位；提到容器查询、逻辑属性；对 CSS-in-JS 运行时开销与 SSR 兼容性有认识

### 跨端与 WebView 兼容
- 阶梯：移动端适配单位与视口、1px 问题 → WebView 与浏览器的差异（内核版本、缓存、JSBridge）→ 页面在某品牌 Android 低端机白屏但其他机型正常怎么排查（语法降级、API 不支持、内存杀）→ H5、小程序、原生、跨端框架的选型依据与维护成本
- 好题：一个 H5 页面在 iOS 正常、部分 Android 机型白屏且无报错上报，你怎么拿到现场？发现是低版本 WebView 不支持可选链，你会怎么设置 browserslist 与 polyfill 策略、代价是什么？
- 危险信号：不知道 browserslist 与降级的关系；说不出 JSBridge 的通信方式；把所有问题归结为"兼容性"而不做定位
- 期望信号：有远程调试（chrome://inspect、vConsole）经验；知道差异化打包（modern/legacy）；理解 WebView 缓存与离线包机制

## 好题 / 坏题对比

- 坏：说说浏览器的事件循环。
- 好：一个表格页在输入框里每敲一个字就同步过滤两万条数据并更新 DOM，用户感觉卡，你怎么用 Performance 面板证明卡在哪一段？改成 Worker 和改成时间分片分别解决什么、各有什么代价？

- 坏：介绍一下强缓存和协商缓存。
- 好：发版后部分用户白屏、控制台报 chunk 404，可能的原因有哪几类？你会怎么设计 HTML 与静态资源的缓存策略、发布保留策略，让"新 HTML 配旧 JS"和"旧 HTML 配新 JS"都不出问题？

- 坏：什么是 XSS 和 CSRF？
- 好：你的页面要嵌一个第三方评论脚本，从安全角度你会加哪些限制？如果对方脚本被投毒，页面里哪些数据会泄露、CSP 能挡住哪些、挡不住哪些？

## 项目结合钩子

- 简历出现"首屏优化 X%" → 追优化前后的指标名（LCP 还是 FCP）、测量工具与样本、最大的一项改动是什么、有没有回归
- 简历出现"打包体积减少 X%" → 追用什么工具分析、砍掉的最大头是什么、拆包粒度怎么定、上线后加载瀑布有没有变差
- 简历出现自研脚手架 / 构建配置 → 追为什么不用现成模板、解决了团队什么痛点、维护成本怎么控、迁移 Vite 或升级大版本时踩了什么
- 简历出现前端监控 / 埋点 → 追采集了哪些指标、采样率、source map 还原怎么做、监控 SDK 本身开销多少、发现过什么线上问题
- 简历出现微前端 → 追为什么需要（团队还是技术原因）、样式与全局变量隔离怎么做、公共依赖怎么共享、比 Monorepo 多解决了什么
- 简历出现 TypeScript 迁移 → 追渐进策略、any 占比怎么降、类型检查时长、最难的类型是什么
- 简历出现 H5 / WebView / 跨端 → 追兼容问题的定位手段、JSBridge 怎么设计、低端机的性能数据
- 简历出现组件库 / 设计系统 → 追按需加载与 tree shaking 怎么保证、主题定制方案、可访问性做到什么程度、版本升级怎么不 break 业务

## 出题原则

- 前端题从"用户可感知的现象"切入：白屏、卡顿、闪烁、内存涨、发版后旧页面，先问定位再问原理，不问名词解释。
- 性能与体积题必须要求给出测量手段与前后数字，"感觉快了"不算答案；追问的下一句永远是"你怎么证明"。
- 工程化题结合候选人项目规模：个人项目问打包产物分析与缓存策略，团队项目问构建提速、规范落地与多人协作下的依赖治理。
- 不考工具时效：不问"Vite 最新版本改了什么"，考的是构建原理与选型判断；框架特有考点（Hooks、响应式）交给 stack 包，这里只考框架无关的部分。