前端面试八股 · 99 问 + 16 道 codingFrontend interview preparation · 99 questions + 16 coding problems
一份作者做过的前端面试题整理，按 HTML / CSS / JavaScript / React / Node / 数据库 / 网络分好组，每道题给「一句话答案 + 展开 + 会被追问什么」。最后一节把 16 道 coding 题逐题对照本站已有的练习，指出哪些已经写过、哪些是缺口。A set of frontend interview questions the author went through, grouped by HTML / CSS / JavaScript / React / Node / databases / networking. Every question gets a one-sentence answer, a longer explanation, and the follow-up questions to expect. The last part compares the 16 coding problems one by one against the exercises already on this site, and points out which ones are already written up and which ones are gaps.
八股考的是「你有没有想过为什么」。同一道题，说出结论是及格，说出取舍和边界才是好答案 —— 所以每道题都写了「会追问什么」，那才是真正拉开差距的地方。coding 题考的东西和另外两门的真题高度重合，所以这里只补真正的缺口，不重复出题。These questions test whether you have thought about why, not only what. On any single question, stating the conclusion is a pass; naming the trade-offs and the edge cases is a good answer. That is why every question also lists what the interviewer will ask next — that is where answers really differ. The coding problems overlap heavily with the real tasks in the other two exams, so this course only fills the real gaps instead of repeating problems.
| 真实项目里的任务Task in the real project | DrillLab 讲到哪Where DrillLab covers it | 有测试Tested |
|---|---|---|
| HTML 5 题（#269、#380 ~ #385） | 块级/行内、事件冒泡与捕获、meta、语义化、无障碍 | 无No |
| CSS 8 题（#270 ~ #275、#383、#384） | 盒模型、margin/padding、Flex vs Grid、选择器与优先级、SCSS、预处理器、响应式 | 无No |
| JavaScript 38 题（#276 ~ #312、#386、#387） | 引擎与类型、函数与作用域、this 与 OOP、异步与事件循环、DOM 与工具链，共 5 节 | 无No |
| React 与生态 36 题（#319 ~ #356） | 虚拟 DOM 与 diff、组件与通信、Hooks、性能与 React 18、Redux 与 TypeScript，共 5 节 | 无No |
| Node / Express 4 题（#313 ~ #316） | Node 事件循环、请求响应周期、参数选择、CRUD 与幂等 | 无No |
| 数据库 2 题（#317、#318） | 关系型 vs 非关系型选型、主键与外键及删除行为 | 无No |
| 网络、安全与测试 6 题（#357 ~ #362） | CORS、HTTPS、JWT、session vs cookie、状态码、测试金字塔 | 无No |
| Coding 16 题（#363 ~ #378） | 逐题对照现有练习，9 道已被覆盖，7 道作为缺口补进来（参考解法在本机跑过测试） | 有Yes |
13 道题。这两块最容易被轻视 —— 前端面试第一轮几乎必问，而且问的都是「你平时到底有没有想过为什么」。盒模型、Flex 与 Grid 的分工、事件冒泡与捕获、语义化标签、无障碍。13 questions. These two areas are the easiest to underestimate. The first round of a frontend interview almost always covers them, and the questions all check whether you have ever asked why. The box model, the division of work between Flex and Grid, event bubbling and capturing, semantic tags, and accessibility.
22 道题。这一组是 JS 面试的地基：值怎么存、类型怎么转、变量怎么提升、闭包到底是什么。闭包、hoisting、== vs === 这三道几乎每场都问。22 questions. This group is the base of every JavaScript interview: how values are stored, how types convert, how variables are hoisted, and what a closure actually is. The questions on closure, hoisting, and == vs === come up in almost every interview.
16 道题。事件循环那道是 JS 面试最能分层次的题 —— 说得出宏任务微任务的执行顺序就上一个档。this 与 call/apply/bind 是老题但仍必问，DOM 事件委托会连到 React 的合成事件。16 questions. The event loop question separates candidates more than any other JavaScript question: if you can state the order in which macrotasks and microtasks run, you move up a level. this with call/apply/bind is an old question that is still always asked, and DOM event delegation connects to React synthetic events.
18 道题。虚拟 DOM 与 diff、reconciliation 这几道是「你到底懂不懂 React 在干什么」的分水岭；props vs state、受控 vs 非受控、状态提升三道直接对应 Q1 那道真题里写过的代码。18 questions. The questions on the virtual DOM, diffing and reconciliation are the dividing line for whether you understand what React is doing; props vs state, controlled vs uncontrolled, and lifting state up map directly onto the code written for the real Q1 task.
18 道题。useMemo / useCallback / React.memo 三兄弟的区别几乎每场必问，而且要答得出「什么时候不该用」；Redux 那四道是问 Redux 项目经验的固定套路。18 questions. The difference between useMemo, useCallback and React.memo is asked in almost every interview, and a full answer has to include when not to use them; the four Redux questions are the standard set asked of anyone who lists Redux experience.
12 道题。全栈岗和前端岗都会问到这一层：Node 的事件循环、请求响应流程、REST 的 CRUD 映射、关系型 vs 文档型、以及 HTTPS / JWT / CORS / session 这四道安全常客。CORS 那道几乎人人都遇到过，但很多人说不清它到底是谁在拦。12 questions. Both full-stack and frontend roles ask about this layer: the Node event loop, the request and response flow, how CRUD maps onto REST, relational vs document databases, and the four regular security questions on HTTPS / JWT / CORS / session. Almost everyone has run into the CORS one, but many cannot say clearly which side is doing the blocking.
16 道 coding 题逐题对照本站已有的练习：9 道已经被 Q1、Q2、五道变式题和两套模拟考覆盖，7 道是真缺口。缺口题的参考解法都在本机跑过测试（24 / 24 加 8 / 8）。The 16 coding problems compared one by one against the exercises already on this site: 9 are already covered by Q1, Q2, the five variant tasks and the two mock exams, and 7 are real gaps. The reference solutions for the gap problems were all run against tests on a local machine (24 / 24 plus 8 / 8).
Phone screen 的主菜：现场手写 debounce、Promise.all、EventEmitter 这类工具函数。8 道题全部带浏览器沙箱，参考解法 40 / 40 实测。DrillLab 自出，不在原题库里。The main item in a phone screen: writing utility functions such as debounce, Promise.all and EventEmitter on the spot. All 8 problems come with a browser sandbox, and the reference solutions passed 40 / 40 in a real run. Written by DrillLab; these are not in the original question bank.
6 道题。senior 面试的 TS 深水区：utility types 不止会用还要会手写，再加泛型约束、判别联合与 unknown / any / never。这 6 道全部是 DrillLab 自出，不在原题库里。6 questions. The harder TypeScript topics that senior interviews go into: you have to write utility types yourself, not only use them, plus generic constraints, discriminated unions, and unknown / any / never. All 6 were written by DrillLab and are not in the original question bank.