核心判断
- 前端八股不是题库目录，而是一套面试中反复考察的「基础概念 → 实现机制 → 工程应用」知识索引。
- 复习优先级应从高频基础概念开始，再进入框架、工程化与手写题；每个题目都要能落到一个可复用的概念卡片或实现卡片。
- 复杂手写题不只考记忆，还要能说明边界条件、测试用例和为什么这样实现。
这个主题要回答的问题
- 面试官通常借前端八股判断哪些底层能力：语义化、布局、类型系统、原型机制、异步、网络、浏览器安全还是工程化？
- 哪些题目只是需要快速回忆，哪些题目需要沉淀为可复用的实现机制卡片？
- 遇到手写题时，如何从「能写出来」推进到「能说明边界和测试」？
主题结构
- HTML 负责页面结构语义：重点不是标签背诵，而是能解释结构对可访问性、SEO 和维护性的影响。
- CSS 负责布局与渲染规则：盒模型、外边距、BFC、定位、对齐和响应式布局共同决定页面如何被排布。
- JavaScript 负责语言机制与运行时行为：类型判断、相等比较、值与引用、原型链、深拷贝和数组判断是高频基础。
- 框架与工程化负责把基础机制组织成项目能力：React 面试主线、Webpack 构建主线和项目设计问题应放在更大的工程语境中理解。
- 网络与浏览器原理负责解释运行环境：HTTP 状态码、虚拟 DOM、Diff、XSS 等问题连接了协议、渲染、安全和性能。
- 手写题负责检验抽象与边界意识：Promise、深比较、instanceof、new 等实现题都要补充测试思路。
相关概念 / 下层卡片
高频 20
HTML
CSS
- 盒模型决定元素尺寸计算，是布局问题的起点：盒模型宽度计算。
- margin 的折叠和负值会改变元素之间的空间关系：margin 规则。
- BFC 是隔离布局影响、处理浮动和 margin 折叠的重要机制：BFC 机制。
- float、flex 和响应式布局仍需补成独立卡片，用来覆盖传统布局、现代布局和多端适配。
- 定位问题应围绕包含块和定位上下文来回答：CSS 定位机制。
- 居中不是单个技巧，而是一组由布局上下文决定的对齐策略：CSS 对齐策略。
- 行高、继承和图文排版共同影响文本布局细节：图文样式规则。
JavaScript
- 类型判断要区分 typeof、instanceof、Object.prototype.toString 和特殊值边界：JS 类型判断。
- 相等比较考察隐式转换风险，实践中应优先使用严格相等：相等比较规则。
- 值类型与引用类型的差异解释了赋值、比较和函数传参的很多现象：值与引用机制。
- 深拷贝题的关键不是递归本身，而是循环引用、特殊对象和原型等边界：深拷贝实现。
- 数组判断、class 的原型本质和简易 jQuery 仍值得拆成可复用的机制卡片。
- 原型相关问题可优先接入已有卡片：原型链机制。
框架、工程化与渲染
- React 面试题应进入框架心智模型，而不是散落在基础题中：React 面试入口。
- Webpack 面试题应围绕构建流程、loader、plugin 和性能优化展开：Webpack 工程化入口。
- 虚拟 DOM 的重点是用 vnode 和 patch 支撑数据驱动视图：虚拟 DOM 的存在理由。
- Diff 算法要讲清 key 与同层比较的约束，不必深究 updateChildren 的全部细节：Diff 的核心约束。
- 项目设计题暂时保留为待补入口，后续可按「架构取舍、状态管理、性能、安全、协作」拆成 Map 或 Thing。
网络、浏览器与安全
手写题
暂时结论
- 这张 Map 目前应作为前端面试知识的总入口：已经有 Thing 的题目放进链接索引，尚未沉淀的高频题先保留为待拆主题。
- 下一步最值得补的卡片是：float 布局、flex 布局、响应式布局、数组判断、class 的原型本质、简易 jQuery、项目设计题的拆解框架。