---
name: frontend
description: 前端领域出题（框架无关）：浏览器渲染、JS 语言机制、工程化、性能优化方法论。目标岗位是前端/Web/客户端 Web 方向时加载；框架细节交给对应 stack 包。
keywords: [前端, frontend, web, javascript, typescript, 浏览器, webpack, vite]
layer: domain
---

## 出题原则

- 前端题从"用户可感知的现象"切入：白屏、卡顿、闪烁，问归因与修复，不问名词解释。
- 工程化题结合项目规模：个人项目问打包产物分析，团队项目问构建提速与规范落地。
- 性能题必须要求给出测量手段，"感觉快了"不算答案。

## 高频主题与深度阶梯（入门 → 原理 → 场景排查 → 权衡）

- 渲染链路：首屏发生了什么 → 重排重绘与合成层 → 长列表卡顿定位（Performance 面板看什么）→ SSR/CSR/流式的选型
- JS 机制：事件循环宏微任务 → 闭包与内存泄漏 → 一次真实的内存泄漏排查 → TS 类型收窄的工程价值
- 网络与缓存：强缓存协商缓存 → HTTP/2 多路复用解决什么 → 静态资源缓存策略设计 → CDN 回源与灰度的矛盾
- 工程化：模块化演进 → Tree-shaking 生效条件 → 构建慢的定位路径 → monorepo 拆分的代价
- 状态与数据流：为什么需要状态管理 → 单向数据流的约束 → 跨组件通信方案对比 → 服务端状态与客户端状态分治

## 好题 / 坏题对比

- 坏：谈谈你对前端性能优化的理解。
- 好：首屏 LCP 从 4s 要压到 2s，你按什么顺序排查？每一步用什么工具拿数据？
- 坏：什么是事件循环？
- 好：一段 setTimeout(fn, 0) 里的 DOM 更新为什么可能在 Promise.then 的读取之后才可见？画出执行顺序。

## 项目结合钩子

- 项目提到"优化" → 必追优化前后的指标数字与测量工具。
- 项目有构建配置 → 追一次构建产物体积异常或依赖冲突的排查。

## 期望信号提示

- 好回答：现象 → 归因 → 工具验证 → 方案取舍，四段俱全。
- 危险信号：性能答案只有"懒加载/压缩"清单、说不出任何测量数据。