前端面试复习Frontend Interview Review
105 道问答用嘴答一遍，再把 15 道手写题和组件题写一遍。Answer all 105 questions out loud, then write the 15 hand-written and component problems.
下周有面试，要的是「说得出」加「当场写得出」。An interview next week: you need to say it, and to write it on the spot.
这条计划的全程The whole route
背Review
背：HTML 与 CSSReview: HTML and CSS
你在这You are here13 道。开场最常问的一批，答错的代价是面试官对后面的问题降低期待。13 questions. The batch most often asked first, and getting them wrong lowers what the interviewer expects from the rest.
过过一遍 0 / 13 · 其中标了「会」的 0 道。自评过一次就算过了这一档 —— 不用把每道都标成「会」才往下走。0 / 13 reviewed, 0 of them marked confident. One rating is enough to clear this stage — you do not have to reach confident on every question first.
覆盖方向：Topics covered: HTMLHTMLCSSCSS
- 块级元素 vs 行内元素Block element vs Inline element
- 事件冒泡 vs 事件捕获Event bubbling vs Event capturing
- meta 标签有什么用What is the importance of the meta tag?
看这一档全部 13 条View all 13 items
- 块级元素 vs 行内元素Block element vs Inline element
- 事件冒泡 vs 事件捕获Event bubbling vs Event capturing
- meta 标签有什么用What is the importance of the meta tag?
- 什么是语义化标签What are Semantic Elements?
- 无障碍、可用性、包容性Could you explain accessibility, usability, and inclusion? Give some examples of each one in terms of web design.
- 什么是盒模型What is the Box Model
- margin vs paddingMargin vs Padding
- Flexbox vs GridFlexbox vs Grid
- CSS 选择器有哪些类型What are the different types of CSS selectors?
- 有几种方式引入 CSSHow many ways to import CSS in your project
- 什么是 SCSSWhat is SCSS
- CSS 预处理器的优缺点What is a CSS preprocessor? What are the advantages and disadvantages, if any, to using them over plain CSS?
- 什么是响应式设计，怎么做What is responsive web design and how to achieve this
背Review
背：JavaScript 与 TypeScriptReview: JavaScript and TypeScript
44 道，是题库里最大的一块：引擎、类型、函数与作用域、this、事件循环，加 6 道 TypeScript 深度。44 questions, the largest block: the engine, types, functions and scope, this, the event loop, plus six on TypeScript in depth.
过过一遍 0 / 44 · 其中标了「会」的 0 道。自评过一次就算过了这一档 —— 不用把每道都标成「会」才往下走。0 / 44 reviewed, 0 of them marked confident. One rating is enough to clear this stage — you do not have to reach confident on every question first.
覆盖方向：Topics covered: JavaScriptJavaScriptTypeScript 深度TypeScript deep dive
44 格，一格一个真实条目 —— 鼠标停上去或用键盘走过去会读出它的标题。44 squares, one per real item — hover or tab to one and it reads out its title.
背Review
背：React 与生态Review: React and its ecosystem
36 道：React 是什么、组件怎么通信、Hooks、性能、Redux。36 questions: what React is, how components communicate, Hooks, performance, Redux.
过过一遍 0 / 36 · 其中标了「会」的 0 道。自评过一次就算过了这一档 —— 不用把每道都标成「会」才往下走。0 / 36 reviewed, 0 of them marked confident. One rating is enough to clear this stage — you do not have to reach confident on every question first.
覆盖方向：Topics covered: React 与生态React & ecosystem
36 格，一格一个真实条目 —— 鼠标停上去或用键盘走过去会读出它的标题。36 squares, one per real item — hover or tab to one and it reads out its title.
背Review
背：Node、数据库、网络与安全Review: Node, databases, networking and security
12 道。前端面试也会问 —— 尤其是事件循环、状态码和 XSS。12 questions. Front-end interviews ask these too, especially the event loop, status codes and XSS.
过过一遍 0 / 12 · 其中标了「会」的 0 道。自评过一次就算过了这一档 —— 不用把每道都标成「会」才往下走。0 / 12 reviewed, 0 of them marked confident. One rating is enough to clear this stage — you do not have to reach confident on every question first.
覆盖方向：Topics covered: Node / ExpressNode / Express数据库Databases网络与安全Web & security
- Node.js 的事件循环是怎么工作的How does the event loop work in Node.js
- 请求 - 响应周期是怎样的Explain the request & response cycle
- 查询参数 vs 路径参数Query parameters vs Path parameters
- 什么是 CRUDWhat is CRUD
- 关系型数据库 vs 非关系型数据库Relational database vs Non-relational database
- 主键 vs 外键Primary key vs Foreign key
- 什么是 CORS，怎么解决 CORS 错误What is CORS and how to solve the CORS error
- HTTPS vs HTTPHTTPS vs HTTP
- 什么是 JWTWhat is JWT
- session vs cookiesessions vs cookies
- 常见的 HTTP 状态码Give some HTTP response status codes
- 测试有哪几种What are the different kinds of tests
学Learn
学：手写题与组件题的讲解Learn: the walkthroughs
8 节。先读讲解再写，比对着答案抄一遍有用得多。Eight lessons. Reading the walkthrough before writing beats copying an answer.
- 16 道题逐题对照The 16 problems, compared one by one
- 缺口一 · Dropdown、Tabs、星级评分Gap 1 · dropdown, tabs and star rating
- 缺口二 · useRef 操作 DOM，与写一个自定义 hookGap 2 · using useRef on the DOM, and writing a custom hook
- 缺口三 · 同一个 Todo 换成 Redux ToolkitGap 3 · the same Todo app, moved to Redux Toolkit
- 缺口四 · Kanban 看板：一次改两个数组Gap 4 · a Kanban board: changing two arrays in one update
- 计时两兄弟：debounce 与 throttleTwo timing helpers: debounce and throttle
- 数据与函数：deepClone、flatten、curryData and functions: deepClone, flatten, curry
- 异步与结构：Promise.all、EventEmitter、LRUAsync and structure: Promise.all, EventEmitter, LRU
写Code
写：手写题Code: implement it yourself
debounce、throttle、deepClone、flatten、curry、Promise.all、EventEmitter、LRU。八道都能在浏览器里跑测试。debounce, throttle, deepClone, flatten, curry, Promise.all, EventEmitter, LRU. All eight run their tests in the browser.
- 手写 debounce（带 cancel）Write debounce yourself (with cancel)
- 手写 throttle（leading + trailing）Write throttle yourself (leading and trailing)
- 手写 deepClone（防循环）Write deepClone yourself (handling cycles)
- 手写 flatten（depth 语义对齐原生）Write flatten yourself (depth behaves like the built-in)
- 手写 curry（部分应用可复用）Write curry yourself (reusable partial application)
- 手写 Promise.all + allSettledWrite Promise.all and allSettled yourself
- 手写 EventEmitter（on/off/once/emit）Write EventEmitter yourself (on / off / once / emit)
- 手写 LRUCache（用 Map 的插入序）Write LRUCache yourself (using Map insertion order)
写Code
写：组件与状态管理题Code: components and state management
Tabs、星级、Dropdown、自定义 hook、媒体播放器、看板、Redux Toolkit。现场最常出的组件题。Tabs, star rating, dropdown, a custom hook, a media player, a Kanban board, Redux Toolkit. The component questions asked most often.
- Tabs 组件（只用一个 state）Tabs component (one piece of state only)
- 星级评分（hover 预览 + 受控双模式）Star rating (hover preview, controlled and uncontrolled)
- Dropdown：点外面要关掉Dropdown: close it on an outside click
- 写一个自定义 hook：useLocalStorageWrite a custom hook: useLocalStorage
- 播放器（useRef 操作 DOM）Media player (touching the DOM with useRef)
- Kanban 看板：一次改两个数组Kanban board: changing two arrays at once
- Redux Toolkit 版 TodoTodo with Redux Toolkit
正在读这台浏览器里的进度…Reading your progress from this browser…
计划里每一格的完成状态都是已有进度的一个视图 —— 以前自己刷过的八股、做过的练习一条都不会白做，跟着计划做完的 也照样在 课程 里打勾。 换计划、不跟计划都不动任何记录。Every square here is a view of progress you already have. Questions you rated and exercises you solved before picking a plan all count, and anything you finish inside a plan is still ticked in the courses. Changing plans or stopping never touches a record.