概念题

本文件按题型收录 概念题 相关前端面试题索引。 共收录 1645 道题（基础 741 / 进阶 574 / 深入 301 / 架构 29）。 每道题都附带完整参考答案与评分维度，点击链接可查看原文。

基础题（741 道）

JavaScript（19 道）

• FB-01-CO-B-001 JavaScript 有哪些数据类型？如何区分原始类型和引用类型？
• FB-01-CO-B-002 什么是变量提升？let、const、var 的区别？
• FB-01-CO-B-003 解释一下闭包，并举一个实际应用场景。
• FB-01-CO-B-004 箭头函数和普通函数的区别？
• FB-01-CO-B-005 解释 this 的指向规则。
• FB-01-CO-B-006 map、filter、reduce 的区别是什么？
• FB-01-CO-B-007 null 和 undefined 的区别？
• FB-01-CO-B-008 什么是深拷贝和浅拷贝？如何实现？
• FB-01-CO-B-009 解释事件委托（Event Delegation）。
• FB-01-CO-B-010 什么是原型和原型链？
• FB-01-CO-B-011 解构赋值是什么？有哪些常见用法？
• FB-01-CO-B-012 模板字符串有什么特性？什么是标签模板？
• FB-01-CO-B-013 默认参数、剩余参数与展开运算符有什么区别和联系？
• FB-01-CO-B-014 正则表达式中常用元字符有哪些？如何写一个简单的手机号校验？
• FB-01-CO-B-015 JavaScript 中如何捕获和处理异常？finally 在 return 前后会如何执行？
• FB-01-CO-B-016 严格模式下 this 的指向有哪些不同？
• FB-01-CO-B-017 JavaScript 有哪些数据类型？如何区分原始类型和引用类型？
• FB-01-CO-B-018 Promise 的三种状态是什么？.then 和 .catch 如何链式调用？
• FB-01-CO-B-019 Set、Map、WeakMap、WeakSet 在垃圾回收上有什么差异？

TypeScript（16 道）

• FB-02-CO-B-001 TypeScript 与 JavaScript 的关系是什么？为什么要使用 TypeScript？
• FB-02-CO-B-002 TypeScript 有哪些基础类型？
• FB-02-CO-B-003 什么是类型注解（Type Annotation）和类型推断（Type Inference）？
• FB-02-CO-B-004 Interface 的作用是什么？如何定义可选属性和只读属性？
• FB-02-CO-B-005 Type Alias（类型别名）是什么？
• FB-02-CO-B-006 Interface 与 Type Alias 有什么区别？
• FB-02-CO-B-007 Union Types 和 Intersection Types 有什么区别？
• FB-02-CO-B-008 Enum 枚举类型有什么特点？
• FB-02-CO-B-009 Tuple 元组类型是什么？与数组有什么区别？
• FB-02-CO-B-010 Type Assertion（类型断言）是什么？与类型转换有什么区别？
• FB-02-CO-B-011 TypeScript 和 JavaScript 有什么关系？它的核心优势是什么？
• FB-02-CO-B-012 TypeScript 中的类型推断是什么？什么情况下需要显式注解？
• FB-02-CO-B-013 any、unknown、never 有什么区别？
• FB-02-CO-B-014 interface 与 type 有什么异同？
• FB-02-CO-B-015 可选属性 ? 与 undefined 在类型上有什么区别？
• FB-02-CO-B-016 TypeScript 中 enum 与 const enum 有什么区别？

Browser（22 道）

• FB-03-CO-B-001 从输入 URL 到页面首次渲染，浏览器经历了哪些主要阶段？
• FB-03-CO-B-002 DOM 树和 CSSOM 树分别是什么？浏览器如何构建它们？
• FB-03-CO-B-003 什么是重排（Reflow）、重绘（Repaint）和合成（Composite）？
• FB-03-CO-B-004 CSS 哪些属性的修改会触发重排、重绘或仅触发合成？
• FB-03-CO-B-005 事件传播的三个阶段是什么？它们的执行顺序如何？
• FB-03-CO-B-006 什么是事件委托？它适合哪些场景？
• FB-03-CO-B-007 浏览器事件循环中的宏任务和微任务有什么区别？
• FB-03-CO-B-008 Cookie、localStorage、sessionStorage 有何区别？
• FB-03-CO-B-009 什么是同源策略（Same-Origin Policy）？它限制了什么？
• FB-03-CO-B-010 简述 CORS 的工作原理，什么是简单请求和预检请求？
• FB-03-CO-B-011 XSS 和 CSRF 是什么？浏览器端分别如何防御？
• FB-03-CO-B-012 Web Worker 是什么？它适合做什么、不适合做什么？
• FB-03-CO-B-013 requestAnimationFrame 和 setTimeout 做动画有什么区别？
• FB-03-CO-B-014 浏览器主要有哪些进程？各自职责是什么？
• FB-03-CO-B-015 浏览器有哪些主要进程？各自负责什么？
• FB-03-CO-B-016 什么是重排（Reflow）和重绘（Repaint）？如何减少？
• FB-03-CO-B-017 解释事件捕获、冒泡和事件委托。
• FB-03-CO-B-018 Intersection Observer 的原理与典型使用场景
• FB-03-CO-B-019 DOMContentLoaded 与 load 事件的区别
• FB-03-CO-B-020 事件捕获、冒泡和事件委托的区别
• FB-03-CO-B-021 同源策略是什么？跨域有哪些解决方案？
• FB-03-CO-B-022 什么是 Paint Holding 与 First Paint？

计算机网络（18 道）

• FB-04-CO-B-001 OSI 七层模型与 TCP/IP 四层模型分别是什么？它们之间如何对应？
• FB-04-CO-B-002 HTTP 与 HTTPS 有什么区别？为什么现在主流网站都使用 HTTPS？
• FB-04-CO-B-003 TCP 与 UDP 有什么区别？各自适合什么场景？
• FB-04-CO-B-004 TCP 三次握手的过程是什么？为什么需要三次？
• FB-04-CO-B-005 TCP 四次挥手的过程是什么？为什么需要四次？
• FB-04-CO-B-006 DNS 解析流程是怎样的？浏览器如何把一个域名解析成 IP？
• FB-04-CO-B-007 浏览器缓存中的强缓存和协商缓存有什么区别？
• FB-04-CO-B-008 Cookie、Session、Token、JWT 有什么区别？各自如何工作？
• FB-04-CO-B-009 什么是 CORS？为什么会有预检请求（Preflight）？
• FB-04-CO-B-010 常见的 HTTP 状态码有哪些？分别代表什么意思？
• FB-04-CO-B-011 RESTful API 设计的基本原则是什么？
• FB-04-CO-B-012 WebSocket 与 HTTP 轮询有什么区别？它解决了什么问题？
• FB-04-CO-B-013 详细描述 TCP 三次握手和四次挥手的过程。
• FB-04-CO-B-014 HTTP/1.1、HTTP/2、HTTP/3 各有什么特点？
• FB-04-CO-B-015 什么是 DNS？DNS 解析过程是怎样的？
• FB-04-CO-B-016 IP 地址、子网掩码和默认网关分别是什么？
• FB-04-CO-B-017 常见 HTTP 方法的语义与幂等性
• FB-04-CO-B-018 URL 的组成结构及各部分作用

Web 安全（9 道）

• FB-05-CO-B-001 什么是 XSS？它有哪些常见类型？
• FB-05-CO-B-002 什么是 CSRF？如何防御？
• FB-05-CO-B-003 Cookie 的 HttpOnly、Secure、SameSite 属性分别有什么作用？
• FB-05-CO-B-004 HTTPS 为什么比 HTTP 更安全？TLS 握手过程是怎样的？
• FB-05-CO-B-005 什么是 CORS？为什么会出现 CORS 错误？
• FB-05-CO-B-006 什么是 CSP？它如何帮助防御 XSS？
• FB-05-CO-B-007 输入验证在前端应遵循哪些原则？
• FB-05-CO-B-008 HTTPS 证书过期或域名不匹配会发生什么？
• FB-05-CO-B-009 Referrer-Policy 有哪些常见取值？对隐私有什么影响？

HTML/CSS（19 道）

• FB-06-CO-B-001 什么是语义化 HTML？为什么要使用语义化标签？
• FB-06-CO-B-002 标准盒模型和 IE 盒模型有什么区别？
• FB-06-CO-B-003 CSS 选择器有哪些类型？优先级如何计算？
• FB-06-CO-B-004 display 的常见属性值有哪些？block/inline/inline-block 有什么区别？
• FB-06-CO-B-005 什么是 CSS 继承？哪些属性会继承？
• FB-06-CO-B-006 position 有哪些值？它们之间有什么区别？
• FB-06-CO-B-007 什么是 Flexbox？常用属性有哪些？
• FB-06-CO-B-008 什么是 CSS Grid？和 Flexbox 有什么区别？
• FB-06-CO-B-009 什么是媒体查询？请写一个响应式断点示例。
• FB-06-CO-B-010 什么是外边距折叠（margin collapse）？常见场景有哪些？
• FB-06-CO-B-011 什么是 BFC？如何创建 BFC？
• FB-06-CO-B-012 什么是 CSS 变量（自定义属性）？如何使用？
• FB-06-CO-B-013 transition 和 animation 有什么区别？
• FB-06-CO-B-014 什么是语义化 HTML？为什么要语义化？
• FB-06-CO-B-015 解释 BEM 命名规范，并说明其优缺点。
• FB-06-CO-B-016 什么是 CSS 优先级？如何计算？
• FB-06-CO-B-017 DOCTYPE 的作用是什么？省略它会发生什么？
• FB-06-CO-B-018 HTML5 新增了哪些结构化标签？
• FB-06-CO-B-019 meta viewport 有哪些常见属性及作用？

可访问性（a11y）（16 道）

• FB-07-CO-B-001 什么是语义化 HTML？它对可访问性有什么价值？
• FB-07-CO-B-002 图片的 alt 属性应该怎么写？哪些情况可以留空？
• FB-07-CO-B-003 如何为表单控件提供可访问的标签？
• FB-07-CO-B-004 键盘导航的基础原则是什么？tabindex 如何使用？
• FB-07-CO-B-005 颜色对比度对可访问性有什么要求？如何检测？
• FB-07-CO-B-006 为什么 placeholder 不能替代 label？
• FB-07-CO-B-007 如何为表单错误提示提供无障碍支持？
• FB-07-CO-B-008 什么是 Web 无障碍（a11y）？为什么要关注它？
• FB-07-CO-B-009 解释 WCAG 的 POUR 四项原则。
• FB-07-CO-B-010 语义化 HTML 对无障碍有什么作用？
• FB-07-CO-B-011 图片的 alt 属性应该如何填写？
• FB-07-CO-B-012 为什么不应该只用颜色传达信息？
• FB-07-CO-B-013 WCAG 的 POUR 四项原则是什么？
• FB-07-CO-B-014 如何正确使用 heading 层级？
• FB-07-CO-B-015 什么是焦点顺序（focus order）？
• FB-07-CO-B-016 可访问性对 SEO 和用户体验有什么双重价值？

数据结构与算法（10 道）

• FB-08-CO-B-001 什么是时间复杂度和空间复杂度？请列出常见的 Big O 表示法。
• FB-08-CO-B-002 数组和链表有什么区别？各自适合什么场景？
• FB-08-CO-B-003 栈和队列有什么区别？JavaScript 中如何实现？
• FB-08-CO-B-004 什么是哈希表？JavaScript 中如何实现？
• FB-08-CO-B-005 二叉树的基本概念是什么？有哪些遍历方式？
• FB-08-CO-B-006 什么是递归？递归三要素是什么？
• FB-08-CO-B-007 常见排序算法有哪些？比较它们的时间复杂度和稳定性。
• FB-08-CO-B-008 什么是递归？如何防止栈溢出？
• FB-08-CO-B-009 分治法的基本思想与经典案例
• FB-08-CO-B-010 如何理解前缀和与差分数组？

设计模式（13 道）

• FB-09-CO-B-001 什么是单例模式？请举一个前端应用场景。
• FB-09-CO-B-002 工厂模式的作用是什么？与直接使用 new 创建对象有何区别？
• FB-09-CO-B-003 观察者模式与发布订阅模式有什么区别？
• FB-09-CO-B-004 策略模式主要解决什么问题？
• FB-09-CO-B-005 什么是模块模式？它如何实现私有变量？
• FB-09-CO-B-006 MVC、MVP、MVVM 三者有什么区别？
• FB-09-CO-B-007 什么是代理模式？举一个前端应用场景。
• FB-09-CO-B-008 什么是装饰器模式？它有什么优势？
• FB-09-CO-B-009 什么是 SOLID 原则？
• FB-09-CO-B-010 单例模式有什么优缺点？
• FB-09-CO-B-011 单例模式在前端有哪些应用场景？
• FB-09-CO-B-012 工厂模式解决了什么问题？
• FB-09-CO-B-013 工厂方法模式与简单工厂有什么区别？

构建工具（19 道）

• FB-10-CO-B-001 常见前端构建工具 Webpack、Vite、Rollup 有什么区别？
• FB-10-CO-B-002 什么是 Loader 和 Plugin？它们有什么区别？
• FB-10-CO-B-003 什么是 Tree Shaking？什么条件下能生效？
• FB-10-CO-B-004 什么是 HMR？在开发环境中有什么好处？
• FB-10-CO-B-005 什么是 Source Map？生产环境应该如何配置？
• FB-10-CO-B-006 Babel 的作用是什么？preset 和 plugin 有什么区别？
• FB-10-CO-B-007 什么是 Polyfill？前端项目中常见的 Polyfill 方案有哪些？
• FB-10-CO-B-008 前端构建中如何使用环境变量？
• FB-10-CO-B-009 什么是代码分割（Code Splitting）？有什么好处？
• FB-10-CO-B-010 构建工具中静态资源（图片、字体、CSS）通常如何处理？
• FB-10-CO-B-011 Webpack 的 resolve 配置中 alias、extensions、modules 有什么作用？
• FB-10-CO-B-012 Vite 中 .env 环境文件的加载顺序和规则是什么？
• FB-10-CO-B-013 什么是 Browserslist？它在构建工具中起什么作用？
• FB-10-CO-B-014 构建产物中的 hash、chunkhash、contenthash 有什么区别？
• FB-10-CO-B-015 package.json 中的 main、module、exports、browser 字段有什么区别？
• FB-10-CO-B-016 PostCSS 在前端构建中的作用是什么？常见插件有哪些？
• FB-10-CO-B-017 构建产物文件名中的 hash 有什么作用？contenthash、chunkhash、hash 有什么区别？
• FB-10-CO-B-018 什么是构建工具的 dev server？Vite 和 Webpack dev server 有什么区别？
• FB-10-CO-B-019 什么是 Module Federation？它解决了什么问题？

Monorepo（21 道）

• FB-11-CO-B-001 什么是 Monorepo？它与 Multirepo 有什么区别？
• FB-11-CO-B-002 npm / yarn / pnpm 的 workspace 分别是什么？如何启用？
• FB-11-CO-B-003 什么是 workspace protocol（workspace:）？它的作用是什么？
• FB-11-CO-B-004 Monorepo 中的 internal package（内部包）是什么？如何被其他包引用？
• FB-11-CO-B-005 什么是依赖提升（hoisting）？它在 workspace 中有什么优缺点？
• FB-11-CO-B-006 lockfile 在 Monorepo 中有什么作用？常见有哪些 lockfile？
• FB-11-CO-B-007 Monorepo 中常见的代码共享方式有哪些？
• FB-11-CO-B-008 Monorepo 中 root package.json 的作用是什么？
• FB-11-CO-B-009 什么是 package.json 中的 exports 字段？在 Monorepo 中有什么用？
• FB-11-CO-B-010 Monorepo 中常见的目录结构有哪些约定？
• FB-11-CO-B-011 什么是 workspace 的 nohoist 配置？什么时候用？
• FB-11-CO-B-012 Monorepo 中如何运行单个包的脚本？
• FB-11-CO-B-013 什么是 peer dependencies？在 Monorepo 中如何管理？
• FB-11-CO-B-014 pnpm-workspace.yaml 中的 packages glob 如何匹配子包？
• FB-11-CO-B-015 .npmrc 在 Monorepo 中通常用于配置哪些行为？
• FB-11-CO-B-017 package.json 中的 packageManager 字段有什么用？
• FB-11-CO-B-019 Monorepo 中 workspace 子包的 bin 命令是如何被使用的？
• FB-11-CO-B-020 什么是 pnpm 的 workspace-concurrency？如何配置？
• FB-11-CO-B-021 什么是 Monorepo 中的 changeset？有什么作用？
• FB-11-CO-B-022 什么是 pnpm 的 catalog 依赖版本管理？
• FB-11-CO-B-023 什么是 Monorepo 中 package 的 public API 边界？

CI/CD（13 道）

• FB-12-CO-B-001 什么是 CI/CD？持续集成、持续交付和持续部署有什么区别？
• FB-12-CO-B-006 自动化测试在 CI/CD 中的作用是什么？常见的测试分层有哪些？
• FB-12-CO-B-008 什么是构建产物（Artifact）管理？为什么重要？
• FB-12-CO-B-010 什么是 Trunk-Based Development？它与 Git Flow 有什么区别？
• FB-12-CO-B-012 什么是部署预览环境（Preview Environment）？它如何提升协作效率？
• FB-12-CO-B-015 语义化版本（SemVer）在前端发布中如何应用？
• FB-12-CO-B-017 CI/CD 中的 Stage 和 Job 有什么区别？
• FB-12-CO-B-019 什么是蓝绿部署？前端应用需要注意什么？
• FB-12-CO-B-021 CI/CD 中的回滚（Rollback）有哪些常见方式？
• FB-12-CO-B-023 什么是不可变基础设施（Immutable Infrastructure）？
• FB-12-CO-B-024 什么是 CI/CD 中的 artifact？为什么需要它？
• FB-12-CO-B-025 什么是 CI 中的 fail-fast 策略？
• FB-12-CO-B-026 什么是 deployment preview？

代码质量与测试（23 道）

• FB-13-CO-B-001 ESLint 和 Prettier 有什么区别？能否只用一个？
• FB-13-CO-B-002 Husky 和 lint-staged 在代码提交前分别做了什么？
• FB-13-CO-B-003 单元测试、集成测试、端到端测试有什么区别？
• FB-13-CO-B-004 什么是代码覆盖率？常用指标有哪些？
• FB-13-CO-B-005 Mock 在前端测试中的作用是什么？有哪些常见方式？
• FB-13-CO-B-006 什么是 TDD？它的基本流程是什么？
• FB-13-CO-B-007 什么是测试金字塔？它给前端测试什么指导？
• FB-13-CO-B-008 什么是 Snapshot Testing？适用于什么场景？
• FB-13-CO-B-009 什么是单元测试？为什么要写单元测试？
• FB-13-CO-B-010 Prettier 的 singleQuote、trailingComma 等配置有什么用？
• FB-13-CO-B-011 git commit message 规范有什么意义？常用格式是什么？
• FB-13-CO-B-012 什么是 lint 错误和 warning？提交时能否允许 warning？
• FB-13-CO-B-013 什么是测试替身（Test Double）？SUT 是什么？
• FB-13-CO-B-014 如何理解断言（Assertion）在测试中的作用？
• FB-13-CO-B-015 什么是回归测试（Regression Testing）？
• FB-13-CO-B-016 什么是 CI？前端为什么要在 CI 中跑测试？
• FB-13-CO-B-017 .gitignore 与 .eslintignore 的作用和区别是什么？
• FB-13-CO-B-018 为什么测试文件常用 tests 或 *.test.ts 命名？
• FB-13-CO-B-019 什么是测试环境（test environment）？为什么需要配置它？
• FB-13-CO-B-020 什么是测试用例（test case）？一条好的测试用例有哪些特征？
• FB-13-CO-B-021 ESLint 和 Prettier 有什么区别？
• FB-13-CO-B-022 什么是 Husky 和 lint-staged？
• FB-13-CO-B-023 什么是测试金字塔？

设计系统与组件库（23 道）

• FB-14-CO-B-001 什么是 Design Token？它解决了什么问题？
• FB-14-CO-B-002 原子设计（Atomic Design）的五个层级是什么？
• FB-14-CO-B-003 什么是受控组件（Controlled）和非受控组件（Uncontrolled）？
• FB-14-CO-B-004 组件库 API 命名应该遵循哪些约定？
• FB-14-CO-B-005 组件库中为什么要关注可访问性（a11y）？基础做法有哪些？
• FB-14-CO-B-006 主题切换在前端有哪些实现方式？
• FB-14-CO-B-007 组合（Composition）与配置（Configuration）式组件有什么区别？
• FB-14-CO-B-008 BEM 命名规范是什么？在组件库 CSS 架构中如何应用？
• FB-14-CO-B-009 Storybook 在组件库开发中的主要作用是什么？
• FB-14-CO-B-010 组件库版本号为什么要遵循语义化版本（SemVer）？
• FB-14-CO-B-011 什么是组件库的图标系统（Icon System）？有哪些常见方案？
• FB-14-CO-B-012 组件库中的 Slot/插槽机制有什么作用？
• FB-14-CO-B-013 如何理解组件的 Props 透传（Props Spreading）？
• FB-14-CO-B-014 什么是 CSS 自定义属性（CSS Variables）？在组件库中如何使用？
• FB-14-CO-B-015 组件库文档应该包含哪些核心内容？
• FB-14-CO-B-016 什么是 Polymorphic Component（多态组件）？
• FB-14-CO-B-017 组件库中如何处理浏览器兼容性问题？
• FB-14-CO-B-018 什么是 Tree Shaking？组件库如何支持它？
• FB-14-CO-B-019 什么是组件库中的 spacing scale？
• FB-14-CO-B-020 什么是 Container Queries？
• FB-14-CO-B-021 组件库中为什么要避免 magic number？
• FB-14-CO-B-022 什么是 CSS 的 layer (@layer) ？
• FB-14-CO-B-023 组件库中如何处理 focus 状态？

React（21 道）

• FB-15-CO-B-001 什么是 JSX？它和 HTML 有什么区别？
• FB-15-CO-B-002 React 组件是什么？函数组件和类组件有什么区别？
• FB-15-CO-B-003 props 和 state 有什么区别？
• FB-15-CO-B-004 什么是 React 的单向数据流？
• FB-15-CO-B-006 React 组件的生命周期有哪些？函数组件中如何模拟？
• FB-15-CO-B-007 React 中的 key 有什么作用？为什么列表渲染不建议用 index？
• FB-15-CO-B-008 受控组件和非受控组件有什么区别？
• FB-15-CO-B-031 什么是 React 的 Strict Mode？它会在开发环境下做什么？
• FB-15-CO-B-032 React 的事件处理有什么特点？
• FB-15-CO-B-033 React 中渲染列表时有什么要求？
• FB-15-CO-B-034 什么是 React Fragment？它解决了什么问题？
• FB-15-CO-B-035 React 中有哪些条件渲染方式？
• FB-15-CO-B-037 React Portal 的作用是什么？
• FB-15-CO-B-038 React 中的 children prop 是什么？
• FB-15-CO-B-039 React 中的 SyntheticEvent 和 NativeEvent 有什么区别？
• FB-15-CO-B-040 什么是 React 的 Batch Update？
• FB-15-CO-B-041 React 中 useLayoutEffect 和 useEffect 有什么区别？
• FB-15-CO-B-042 什么是 React 的 controlled input 的注意事项？
• FB-15-CO-B-043 React 中如何实现组件懒加载？
• FB-15-CO-B-044 什么是 React 的 key prop 的最佳实践？
• FB-15-CO-B-045 React 中 context 的 Provider 嵌套过多怎么办？

Vue（16 道）

• FB-16-CO-B-001 Vue 2 和 Vue 3 有哪些核心区别？
• FB-16-CO-B-002 Options API 和 Composition API 有什么区别？
• FB-16-CO-B-003 v-model 的原理是什么？常见的修饰符有哪些？
• FB-16-CO-B-004 v-if 和 v-show 有什么区别？
• FB-16-CO-B-005 v-for 中的 key 有什么作用？为什么不推荐用 index？
• FB-16-CO-B-006 computed、methods 和 watch 有什么区别？
• FB-16-CO-B-007 Vue 组件间通信有哪些方式？
• FB-16-CO-B-008 Vue 中如何实现受控组件？
• FB-16-CO-B-009 Vue 3 中常用的内置指令有哪些？
• FB-16-CO-B-010 Vue 中 v-bind 和 v-on 的简写是什么？
• FB-16-CO-B-011 Vue 中的 computed setter 是什么？
• FB-16-CO-B-012 Vue 中的 watch 的 deep 和 immediate 选项作用？
• FB-16-CO-B-013 Vue 中的组件 name 有什么用？
• FB-16-CO-B-014 Vue 中 $emit 和 defineEmits 的区别？
• FB-16-CO-B-015 Vue 3 中的 Suspense 是什么？
• FB-16-CO-B-016 Vue 中的 mixin 有什么优缺点？

跨端技术（20 道）

• FB-17-CO-B-001 什么是跨端开发？与原生开发相比有哪些优缺点？
• FB-17-CO-B-002 常见的跨端方案可以分为哪几类？各有什么代表技术？
• FB-17-CO-B-003 小程序的运行机制是什么？为什么会有逻辑层和渲染层分离？
• FB-17-CO-B-004 小程序的页面生命周期有哪些？App 生命周期呢？
• FB-17-CO-B-005 React Native 的基本原理是什么？JS 和 Native 如何通信？
• FB-17-CO-B-006 Flutter 的基本原理是什么？它和 React Native 有什么区别？
• FB-17-CO-B-007 Electron 的主进程和渲染进程有什么区别？
• FB-17-CO-B-031 小程序中父子组件和兄弟组件如何通信？
• FB-17-CO-B-032 Taro 中 React/Vue 组件生命周期如何映射到小程序？
• FB-17-CO-B-033 React Native 中内置组件和原生模块有什么关系？
• FB-17-CO-B-034 Flutter 中 StatelessWidget 和 StatefulWidget 有什么区别？
• FB-17-CO-B-035 UniApp 中如何处理平台差异？
• FB-17-CO-B-036 Electron 的 preload 脚本有什么作用？
• FB-17-CO-B-037 微信小程序的分包加载和独立分包有什么区别？
• FB-17-CO-B-038 跨端开发中处理平台差异有哪些常见思路？
• FB-17-CO-B-039 小程序的 rpx 和 px 有什么区别？
• FB-17-CO-B-040 React Native 的 Flexbox 布局和 Web 有什么不同？
• FB-17-CO-B-041 Flutter 中的 Widget、Element、RenderObject 有什么关系？
• FB-17-CO-B-042 Electron 中主进程和渲染进程如何通信？
• FB-17-CO-B-043 什么是小程序的 setData？为什么要避免频繁调用？

AI 工程化（22 道）

• FB-18-CO-B-001 什么是 LLM？前端为什么需要 AI 工程化？
• FB-18-CO-B-002 Prompt Engineering 的基本原则有哪些？
• FB-18-CO-B-003 什么是 Function Calling？前端场景有什么用？
• FB-18-CO-B-004 流式输出和一次性输出有什么区别？前端如何处理？
• FB-18-CO-B-005 Embedding 是什么？有什么用？
• FB-18-CO-B-006 什么是 RAG？它解决了 LLM 的什么问题？
• FB-18-CO-B-007 Agent 和 LLM 有什么区别？
• FB-18-CO-B-008 前端 AI SDK 有哪些？请简述 OpenAI SDK 或 Vercel AI SDK 的基本用法。
• FB-18-CO-B-009 什么是 Token？为什么前端需要关注 Token 消耗？
• FB-18-CO-B-010 大模型的 temperature 和 top_p 是什么？有什么区别？
• FB-18-CO-B-011 什么是上下文窗口（Context Window）？对前端开发有什么影响？
• FB-18-CO-B-012 什么是 LLM 的"幻觉"？前端如何降低幻觉影响？
• FB-18-CO-B-013 System Prompt、User Prompt、Assistant Prompt 有什么区别？
• FB-18-CO-B-033 什么是 Token？前端工程师为什么要关注 Token 消耗？
• FB-18-CO-B-034 什么是 Prompt Engineering？有哪些常用的 Prompt 模式？
• FB-18-CO-B-035 RAG 是什么？它的核心流程是怎样的？
• FB-18-CO-B-036 前端如何优雅地展示 LLM 的流式输出？
• FB-18-CO-B-037 Function Calling 是什么？前端在其中扮演什么角色？
• FB-18-CO-B-038 什么是 LLM 的 System Prompt？
• FB-18-CO-B-039 什么是 Few-shot Prompting？
• FB-18-CO-B-040 什么是 Embedding 和向量检索？
• FB-18-CO-B-041 什么是 AI Agent 的 ReAct 模式？

Node.js / BFF（21 道）

• FB-19-CO-B-001 Node.js 的事件循环是什么？它和浏览器事件循环有什么区别？
• FB-19-CO-B-002 CommonJS 和 ES Module 有什么区别？Node.js 中如何混用？
• FB-19-CO-B-003 Buffer 是什么？它有哪些典型使用场景？
• FB-19-CO-B-004 Node.js 的 Stream 有哪些类型？各适用于什么场景？
• FB-19-CO-B-005 Promise、async/await 和回调函数有什么区别？Node.js 中如何处理异步错误？
• FB-19-CO-B-006 NestJS 的核心概念有哪些？依赖注入（DI）有什么好处？
• FB-19-CO-B-007 JWT 鉴权的原理是什么？它有什么优缺点？
• FB-19-CO-B-008 什么是 BFF（Backend for Frontend）？为什么需要它？
• FB-19-CO-B-031 package.json 中 dependencies、devDependencies、peerDependencies 有什么区别？
• FB-19-CO-B-032 Express / Koa 中间件的工作机制是什么？next() 起什么作用？
• FB-19-CO-B-033 Node.js 中如何处理未捕获的异常，避免进程崩溃？
• FB-19-CO-B-034 Cookie 与 Session 的区别是什么？Node.js 中如何设置 Cookie？
• FB-19-CO-B-035 什么是 CORS？如何在 Node.js 服务端配置跨域？
• FB-19-CO-B-036 常见的 HTTP 状态码有哪些？分别代表什么含义？
• FB-19-CO-B-037 Node.js 中如何管理不同环境的配置与敏感信息？
• FB-19-CO-B-038 什么是 BFF？它解决了什么问题？
• FB-19-CO-B-039 Node.js 中的 process.nextTick 和 setImmediate 有什么区别？
• FB-19-CO-B-040 什么是 Node.js 中的 EventEmitter？
• FB-19-CO-B-041 Node.js 中如何读取环境变量？
• FB-19-CO-B-042 Node.js 中的 path 模块常用方法有哪些？
• FB-19-CO-B-043 Node.js 中 fs 模块的 readFile 和 createReadStream 有什么区别？

Git 工作流与变更管理（24 道）

• FB-20-CO-B-001 请简述 Git 中工作区、暂存区和本地仓库的关系
• FB-20-CO-B-002 Git 中 branch 是什么？如何创建和切换分支？
• FB-20-CO-B-003 merge 和 rebase 有什么区别？
• FB-20-CO-B-004 git stash 是什么？有哪些常见用法？
• FB-20-CO-B-005 git cherry-pick 是什么？
• FB-20-CO-B-006 git reset 的 --soft、--mixed、--hard 有什么区别？
• FB-20-CO-B-007 git revert 和 git reset 有什么区别？
• FB-20-CO-B-008 .gitignore 的工作原理和规则有哪些？
• FB-20-CO-B-032 git log 有哪些常用参数？
• FB-20-CO-B-033 Git 中轻量标签和附注标签有什么区别？
• FB-20-CO-B-034 git remote 和 git clone 分别是做什么的？
• FB-20-CO-B-035 git diff 有哪些常见用法？
• FB-20-CO-B-036 git fetch 和 git pull 有什么区别？
• FB-20-CO-B-037 git status 输出中的文件状态有哪些？
• FB-20-CO-B-038 git config 的作用域有哪些？
• FB-20-CO-B-039 什么是 detached HEAD？如何进入和退出？
• FB-20-CO-B-040 什么是 Conventional Commits？为什么要用它？
• FB-20-CO-B-041 Code Review 应该关注哪些方面？
• FB-20-CO-B-042 语义化版本 SemVer 中 MAJOR、MINOR、PATCH 分别代表什么？
• FB-20-CO-B-043 git tag 和 git branch 有什么区别？
• FB-20-CO-B-044 git commit --amend 的注意事项？
• FB-20-CO-B-045 git remote prune origin 是什么？
• FB-20-CO-B-046 git clean 的作用？
• FB-20-CO-B-047 git archive 是什么？

开发者体验与工程效能（13 道）

• FB-21-CO-B-001 什么是开发者体验（DX），它和用户体验（UX）有什么关系？
• FB-21-CO-B-003 Monorepo 和 Multirepo 在开发者体验上有什么差异？
• FB-21-CO-B-004 ESLint 和 Prettier 的分工是什么？为什么要在项目里同时配置？
• FB-21-CO-B-007 本地开发环境不一致会带来哪些问题？如何初步解决？
• FB-21-CO-B-008 什么是内部开发者文档？好的文档站点应该具备哪些特征？
• FB-21-CO-B-031 什么是开发者反馈循环？为什么短反馈循环对 DX 重要？
• FB-21-CO-B-033 语义化版本控制（SemVer）如何影响开发者体验？
• FB-21-CO-B-035 什么是“约定优于配置”？在前端工程中有哪些典型例子？
• FB-21-CO-B-037 什么是开发者门户（Developer Portal）？它和文档站点有什么区别？
• FB-21-CO-B-066 什么是构建产物可复现性？为什么对 DX 重要？
• FB-21-CO-B-068 什么是可观测性（Observability）？它包含哪些核心维度？
• FB-21-CO-B-070 什么是技术债？它与开发者体验有什么关系？
• FB-21-CO-B-071 Cypress 组件测试的执行模型与在 CI 中的耗时度量方法

部署与 SRE（13 道）

• FB-22-CO-B-001 什么是 CI/CD？前端 CI/CD 流水线通常包含哪些阶段？
• FB-22-CO-B-002 滚动部署、蓝绿部署、金丝雀部署、红黑部署有什么区别？
• FB-22-CO-B-003 CDN 是什么？在前端部署中起什么作用？
• FB-22-CO-B-004 HTTP 缓存与 CDN 缓存有什么区别？如何刷新缓存？
• FB-22-CO-B-006 HTTPS/TLS 是什么？为什么前端部署必须使用 HTTPS？
• FB-22-CO-B-007 DNS 解析流程是什么？它和前端部署有什么关系？
• FB-22-CO-B-008 灰度发布和 A/B 测试有什么区别？
• FB-22-CO-B-009 什么是 SLA/SLO/SLI？前端如何设定和保障服务等级？
• FB-22-CO-B-010 什么是负载均衡？前端如何利用？
• FB-22-CO-B-011 什么是反向代理？
• FB-22-CO-B-012 什么是容器化部署？
• FB-22-CO-B-013 什么是自动扩缩容？
• FB-22-CO-B-014 什么是服务发现？

包管理与供应链安全（17 道）

• FB-23-CO-B-001 npm、yarn 与 pnpm 的核心区别是什么？
• FB-23-CO-B-002 dependencies、devDependencies 与 peerDependencies 有什么区别？
• FB-23-CO-B-003 SemVer 版本号规则是什么？^、~、* 分别代表什么？
• FB-23-CO-B-004 什么是 lockfile？为什么需要它？
• FB-23-CO-B-005 执行 npm install 后，node_modules 里发生了什么？
• FB-23-CO-B-006 peerDependencies 的作用是什么？什么情况下应该使用？
• FB-23-CO-B-007 什么是幽灵依赖（phantom dependencies）？它有什么危害？
• FB-23-CO-B-008 npm audit 是什么？如何用它做依赖安全审计？
• FB-23-CO-B-009 content-addressable store 中版本号与内容哈希如何协同定位依赖？
• FB-23-CO-B-010 npm 的语义化版本规范是什么？
• FB-23-CO-B-011 什么是幽灵依赖？如何避免？
• FB-23-CO-B-012 lockfile 是否应该提交到版本控制？为什么？
• FB-23-CO-B-013 什么是 npm registry？
• FB-23-CO-B-014 什么是 scope 包？
• FB-23-CO-B-015 npm 的 scripts 中 pre/post 钩子是什么？
• FB-23-CO-B-016 什么是 bundledDependencies？
• FB-23-CO-B-017 什么是 optionalDependencies？

前端运维与监控（5 道）

• FB-24-CO-B-001 什么是前端可观测性？它与传统“看日志”有什么区别？
• FB-24-CO-B-002 Core Web Vitals 包含哪些指标？各自的目标阈值是多少？
• FB-24-CO-B-003 前端错误监控要关注哪些指标和错误类型？
• FB-24-CO-B-004 RUM 监控与 Synthetic 监控有什么区别？
• FB-24-CO-B-005 前端埋点有哪些类型？设计埋点方案时要注意什么？

系统架构设计（15 道）

• FB-25-CO-B-001 MVC、MVVM、MVP、MVI 四种架构模式有什么区别？分别对应哪些前端框架？
• FB-25-CO-B-002 什么是 BFF（Backend for Frontend）？它解决了什么问题？
• FB-25-CO-B-004 前端应用拆分有哪些常见策略？
• FB-25-CO-B-005 技术选型的一般流程和关键维度有哪些？
• FB-25-CO-B-006 什么是 ADR（Architecture Decision Record）？为什么要写 ADR？
• FB-25-CO-B-007 可维护性、可扩展性、可测试性在架构中分别指什么？
• FB-25-CO-B-008 什么是事件驱动架构？前端有哪些典型应用场景？
• FB-25-CO-B-009 分层架构是什么？前端项目常见的分层方式有哪些？
• FB-25-CO-B-010 什么是接口契约？前端如何利用契约进行协作与 Mock？
• FB-25-CO-B-011 什么是依赖注入（DI）和控制反转（IoC）？前端有哪些应用？
• FB-25-CO-B-012 什么是防腐层（Anti-Corruption Layer）？前端为什么需要它？
• FB-25-CO-B-013 API 版本管理有哪些常见策略？前端应如何配合？
• FB-25-CO-B-014 集中式状态管理与局部状态管理各适用于什么场景？
• FB-25-CO-B-016 什么是渐进式增强与优雅降级？前端如何实践？
• FB-25-CO-B-017 什么是 BFF（Backend for Frontend）

微前端（11 道）

• FB-26-CO-B-001 什么是微前端？它主要解决哪些问题？
• FB-26-CO-B-002 微前端和传统的巨石应用相比有哪些优劣？
• FB-26-CO-B-003 常见的微前端实现方案有哪些？各有什么特点？
• FB-26-CO-B-004 qiankun 中子应用需要暴露哪些生命周期？registerMicroApps 和 start 做了什么？
• FB-26-CO-B-005 single-spa 是什么？它和 qiankun 的关系是什么？
• FB-26-CO-B-006 微前端场景下基座应用和子应用的路由如何协调？
• FB-26-CO-B-007 微前端中样式隔离有哪些常见方案？
• FB-26-CO-B-008 微前端中公共依赖共享有哪些思路？
• FB-26-CO-B-009 什么是微前端，它解决了什么问题
• FB-26-CO-B-010 single-spa 与 Qiankun 的关系
• FB-26-CO-B-011 微前端的四种基本集成方式

性能工程（11 道）

• FB-27-CO-B-001 什么是 RAIL 模型？它如何指导前端性能优化？
• FB-27-CO-B-002 什么是 Core Web Vitals？LCP、INP、CLS 分别衡量什么？
• FB-27-CO-B-003 FCP、TTFB、LCP、TBT 有什么区别？它们分别在性能漏斗的哪个阶段？
• FB-27-CO-B-004 重排（Reflow）和重绘（Repaint）有什么区别？如何减少它们？
• FB-27-CO-B-005 什么是懒加载（Lazy Loading）？图片懒加载有哪些实现方式？
• FB-27-CO-B-006 什么是代码分割（Code Splitting）？前端有哪些实现方式？
• FB-27-CO-B-007 HTTP 缓存策略有哪些？强缓存和协商缓存的区别是什么？
• FB-27-CO-B-008 图片资源优化有哪些常用手段？
• FB-27-CO-B-009 浏览器渲染管线的关键阶段
• FB-27-CO-B-010 什么是重排与重绘
• FB-27-CO-B-011 懒加载与预加载的区别

质量保障（10 道）

• FB-28-CO-B-001 什么是测试金字塔？前端如何应用？
• FB-28-CO-B-002 单元测试、集成测试、E2E 测试有什么区别？
• FB-28-CO-B-003 Jest 与 Vitest 有什么核心区别？
• FB-28-CO-B-004 好的单元测试应具备哪些特征？
• FB-28-CO-B-005 代码评审应该关注哪些方面？
• FB-28-CO-B-006 ESLint 与 Prettier 的定位有什么不同？
• FB-28-CO-B-007 TypeScript 如何提升前端代码质量？
• FB-28-CO-B-008 测试覆盖率有哪些指标？如何正确看待覆盖率？
• FB-28-CO-B-009 前端质量保障的核心维度
• FB-28-CO-B-010 前端代码评审中应关注的安全点

数据与状态管理（14 道）

• FB-29-CO-B-001 什么是客户端状态和服务端状态？它们有什么区别？
• FB-29-CO-B-002 全局状态和局部状态有什么区别？如何选择作用域？
• FB-29-CO-B-003 Redux 的核心概念有哪些？简述它的数据流
• FB-29-CO-B-004 Pinia 和 Vuex 有什么区别？为什么 Vue 3 推荐 Pinia？
• FB-29-CO-B-005 Zustand 和 Redux 相比有什么优势和劣势？
• FB-29-CO-B-006 React Query / TanStack Query 主要解决什么问题？
• FB-29-CO-B-007 SWR 是什么？它和 React Query 有什么区别？
• FB-29-CO-B-008 表单状态为什么要单独管理？受控与非受控表单如何选择？
• FB-29-CO-B-009 Redux、Zustand、React Query 分别解决什么问题？可以互相替代吗？
• FB-29-CO-B-010 什么是乐观更新？实现时需要注意什么？
• FB-29-CO-B-011 前端状态管理要解决什么问题
• FB-29-CO-B-012 useState 与 useReducer 如何选择
• FB-29-CO-B-013 什么是单向数据流
• FB-29-CO-B-014 什么是状态提升（Lifting State Up）

可观测性（11 道）

• FB-30-CO-B-001 可观测性的三大支柱是什么？它们之间有什么关系？
• FB-30-CO-B-002 日志、指标、链路分别适合解决什么问题？
• FB-30-CO-B-003 前端常见的错误类型有哪些？分别如何捕获？
• FB-30-CO-B-004 Sentry 在前端错误监控中的基本工作原理是什么？
• FB-30-CO-B-006 日志级别通常有哪些？前端如何选择？
• FB-30-CO-B-008 什么是健康检查（Health Check）？前端可以怎么做？
• FB-30-CO-B-009 前端错误监控应该怎么做？
• FB-30-CO-B-010 什么是 SLO、SLA、Error Budget？
• FB-30-CO-B-011 可观测性的三大支柱
• FB-30-CO-B-012 什么是 FID 与 INP
• FB-30-CO-B-013 什么是前端埋点

安全架构（14 道）

• FB-31-CO-B-001 XSS 有哪几种类型？前端分别如何防御？
• FB-31-CO-B-002 CSRF 的攻击原理是什么？前端如何配合防御？
• FB-31-CO-B-003 CSP 的作用是什么？如何在前端项目中落地？
• FB-31-CO-B-004 HTTPS/TLS 在前端安全中起到什么作用？
• FB-31-CO-B-005 前端敏感数据存储有哪些风险？localStorage、sessionStorage、Cookie 该如何选择？
• FB-31-CO-B-006 CORS 预检请求的作用是什么？前端如何正确配置？
• FB-31-CO-B-007 什么是点击劫持？前端有哪些防御手段？
• FB-31-CO-B-008 为什么输入校验不能替代输出编码？
• FB-31-CO-B-009 什么是威胁建模？前端为什么需要威胁建模？
• FB-31-CO-B-010 解释 STRIDE 模型。
• FB-31-CO-B-011 CSP 能解决什么问题？给出一个基本配置示例。
• FB-31-CO-B-012 前端常见安全威胁有哪些
• FB-31-CO-B-013 Cookie 的 SameSite 属性
• FB-31-CO-B-014 HTTPS 与混合内容安全

实时与协同（11 道）

• FB-32-CO-B-001 WebSocket、SSE、长轮询分别适用于什么场景？
• FB-32-CO-B-002 WebRTC 的核心概念是什么？
• FB-32-CO-B-003 实时系统中为什么要做心跳和重连？
• FB-32-CO-B-004 如何保证实时消息的顺序和可靠性？
• FB-32-CO-B-005 实时系统中的房间/频道模型如何设计？
• FB-32-CO-B-006 Presence（在线状态）在实时系统中如何实现？
• FB-32-CO-B-007 实时应用有哪些常见的性能优化手段？
• FB-32-CO-B-008 实时系统中如何处理用户离线？
• FB-32-CO-B-009 WebSocket 与 HTTP 长轮询的区别
• FB-32-CO-B-010 什么是 Socket.IO，它解决了什么问题
• FB-32-CO-B-011 什么是长连接

国际化（14 道）

• FB-33-CO-B-001 i18n 与 l10n 有什么区别？
• FB-33-CO-B-002 locale 标识应该如何选择与管理？
• FB-33-CO-B-003 翻译文件应该如何组织？
• FB-33-CO-B-004 如何处理复数、性别、占位符等复杂文案？
• FB-33-CO-B-005 日期、时间、数字、货币格式化要注意什么？
• FB-33-CO-B-006 RTL（从右到左）布局如何支持？
• FB-33-CO-B-007 如何动态加载语言包？
• FB-33-CO-B-008 国际化测试应该覆盖哪些方面？
• FB-33-CO-B-009 前端 i18n 有哪些核心问题需要解决？
• FB-33-CO-B-010 如何处理 RTL 布局？
• FB-33-CO-B-011 前端国际化的核心问题有哪些
• FB-33-CO-B-012 什么是伪本地化（Pseudolocalization）
• FB-33-CO-B-013 Intl API 在前端的使用
• FB-33-CO-B-014 Locale 与 Language Tag 的区别

可视化与图形（10 道）

• FB-34-CO-B-001 Canvas、SVG、WebGL、WebGPU 有什么区别？如何选择？
• FB-34-CO-B-002 矢量图形与栅格图形有何区别？SVG 和 Canvas 分别适合什么场景？
• FB-34-CO-B-003 D3.js 的核心思想是什么？为什么它被称为“数据驱动文档”？
• FB-34-CO-B-004 ECharts、AntV、Highcharts 等高层图表库与 D3.js 的本质区别是什么？
• FB-34-CO-B-006 响应式图表设计的基本原则有哪些？
• FB-34-CO-B-007 图表可访问性需要关注哪些方面？
• FB-34-CO-B-008 什么是 WebGL？前端什么时候需要它？
• FB-34-CO-B-009 SVG、Canvas、WebGL 的适用场景
• FB-34-CO-B-010 什么是图表的可访问性
• FB-34-CO-B-011 可视化图表的基本元素

Serverless/Edge（13 道）

• FB-35-CO-B-001 什么是 Serverless/FaaS？它解决了什么问题？
• FB-35-CO-B-002 Edge Computing 与传统 CDN 有什么区别？
• FB-35-CO-B-003 Serverless 中的冷启动与热启动是什么？
• FB-35-CO-B-004 Serverless 中的事件驱动与触发器有哪些？
• FB-35-CO-B-005 Serverless 函数为什么要尽量无状态？
• FB-35-CO-B-006 Serverless 有哪些优势和劣势？
• FB-35-CO-B-007 Serverless 本地开发与调试有哪些方式？
• FB-35-CO-B-008 常见的 Serverless/Edge 平台有哪些？各有什么特点？
• FB-35-CO-B-009 什么是 Serverless？它的优缺点是什么？
• FB-35-CO-B-010 什么是冷启动？如何缓解？
• FB-35-CO-B-011 什么是 Serverless，它解决了什么问题
• FB-35-CO-B-012 什么是 Jamstack
• FB-35-CO-B-013 什么是 FaaS

前端数据工程（14 道）

• FB-36-CO-B-001 前端埋点与数据采集有哪些方式？
• FB-36-CO-B-002 数据清洗与格式化在前端数据工程中的作用是什么？
• FB-36-CO-B-003 前端 ETL/ELT 是什么？有什么区别？
• FB-36-CO-B-004 数据管道与消息队列在前端数据工程中的作用是什么？
• FB-36-CO-B-005 实时处理与批量处理有什么区别？
• FB-36-CO-B-006 数据质量校验有哪些方法？
• FB-36-CO-B-007 数据隐私与匿名化在前端如何处理？
• FB-36-CO-B-008 数据驱动决策在前端团队如何落地？
• FB-36-CO-B-009 埋点有哪些类型？各举一个前端例子。
• FB-36-CO-B-010 AB 实验为什么要随机分流？
• FB-36-CO-B-011 什么是北极星指标？
• FB-36-CO-B-012 前端数据工程要解决什么问题
• FB-36-CO-B-013 前端常见的数据格式与序列化
• FB-36-CO-B-014 什么是数据管道

业务洞察（10 道）

• FB-37-CO-B-001 B2B、B2C、平台型与 SaaS 商业模式有何区别？前端关注点有何不同？
• FB-37-CO-B-002 价值链分析对前端团队有什么意义？
• FB-37-CO-B-003 什么是产品生命周期？前端工作在不同阶段有何不同？
• FB-37-CO-B-004 GMV、ARPU、LTV、CAC 分别是什么？前端如何影响它们？
• FB-37-CO-B-005 互联网产品常见的变现模式有哪些？前端分别需要注意什么？
• FB-37-CO-B-006 AARRR 增长漏斗各阶段含义是什么？前端在哪些环节可以发挥作用？
• FB-37-CO-B-007 什么是 ROI？如何用 ROI 思维评估一个前端需求？
• FB-37-CO-B-008 技术与业务对齐有哪些常见方法？
• FB-37-CO-B-009 什么是北极星指标？前端工作如何选择支撑指标？
• FB-37-CO-B-010 什么是用户生命周期价值（LTV）？前端如何提升 LTV？

团队领导力（5 道）

• FB-38-CO-B-002 人才梯队建设中 T 型、π 型、伞型人才模型的区别
• FB-38-CO-B-007 内在激励与外在激励的区别及适用场景
• FB-38-CO-B-008 技术团队管理者的核心职责是什么？
• FB-38-CO-B-009 如何设定前端团队的 OKR？
• FB-38-CO-B-010 什么是“仆人式领导”（Servant Leadership）？前端负责人如何实践？

技术战略（9 道）

• FB-39-CO-B-001 什么是技术愿景与技术使命？它们对团队有什么作用？
• FB-39-CO-B-002 技术路线图和产品路线图有什么区别与联系？
• FB-39-CO-B-003 技术选型时需要考虑哪些核心维度？
• FB-39-CO-B-004 什么是技术债？它一定是有害的吗？
• FB-39-CO-B-005 平台化/中台化与前中后台的关系是什么？
• FB-39-CO-B-006 研发投入通常可以如何分类？
• FB-39-CO-B-007 开源战略对企业有什么价值？
• FB-39-CO-B-008 技术风险主要包括哪些类型？
• FB-39-CO-B-009 平台化与中台化的区别是什么？前端何时应该做中台？

沟通表达（2 道）

• FB-40-CO-B-001 什么是结构化表达？请用金字塔原理说明
• FB-40-CO-B-002 如何向非技术人员解释技术方案？

项目管理（10 道）

• FB-41-CO-B-001 什么是项目章程？前端项目立项时通常包含哪些关键内容？
• FB-41-CO-B-002 项目范围管理中的 WBS 是什么？前端项目如何做任务分解？
• FB-41-CO-B-003 进度管理中的关键路径是什么？简述如何识别前端项目的关键路径。
• FB-41-CO-B-004 项目质量管理中“预防胜于检查”是什么意思？前端如何落地？
• FB-41-CO-B-005 什么是项目里程碑？举一个前端研发项目的里程碑例子。
• FB-41-CO-B-006 Scrum 中的 Sprint 是什么？前端团队一个 Sprint 通常怎么安排？
• FB-41-CO-B-007 Kanban 和 Scrum 的主要区别是什么？
• FB-41-CO-B-008 项目风险是什么？前端项目中常见的三类风险有哪些？
• FB-41-CO-B-009 Scrum 中的三个角色是什么？
• FB-41-CO-B-010 什么是 OKR？

招聘（8 道）

• FB-42-CO-B-001 什么是人才画像？前端岗位的人才画像通常包含哪些维度？
• FB-42-CO-B-002 一份好的前端 JD 应该包含哪些要素？
• FB-42-CO-B-003 简历筛选时应该关注哪些核心信号？
• FB-42-CO-B-004 什么是结构化面试？它与传统面试有什么区别？
• FB-42-CO-B-006 技术面、行为面、文化面分别考察什么？
• FB-42-CO-B-008 招聘效率度量常用哪些指标？
• FB-42-CO-B-009 什么是人才画像？
• FB-42-CO-B-010 绩效反馈的 SBI 模型是什么？

技术品牌与布道（12 道）

• FB-43-CO-B-001 什么是技术品牌？它对企业或技术团队有什么价值？
• FB-43-CO-B-002 技术影响力与技术品牌有什么区别和联系？
• FB-43-CO-B-003 技术布道师（Developer Advocate / Evangelist）的主要职责是什么？
• FB-43-CO-B-004 内部技术分享有哪些常见形式？各自适合什么场景？
• FB-43-CO-B-005 如何选择既有个人价值又有读者价值的技术博客主题？
• FB-43-CO-B-006 技术演讲和日常项目汇报有什么本质区别？
• FB-43-CO-B-007 参与或运营技术社区对个人技术品牌有什么帮助？
• FB-43-CO-B-008 什么是技术雇主品牌？前端团队如何影响它？
• FB-43-CO-B-009 如何衡量技术品牌影响力？
• FB-43-CO-B-010 如何制定前端团队的技术内容输出计划？
• FB-43-CO-B-011 如何鼓励不擅长写作的工程师参与技术内容创作？
• FB-43-CO-B-012 技术演讲前，你会做哪些准备？

技术治理与合规（14 道）

• FB-44-CO-B-001 什么是技术治理？它和日常技术管理有什么区别？
• FB-44-CO-B-002 前端技术规范与标准通常包含哪些类型？
• FB-44-CO-B-003 什么是代码治理？前端代码治理通常包含哪些手段？
• FB-44-CO-B-004 什么是技术债？请对技术债进行分类。
• FB-44-CO-B-005 架构评审的目的是什么？一般在哪些节点进行？
• FB-44-CO-B-006 前端安全合规需要关注哪些常见法规或标准？
• FB-44-CO-B-007 数据治理中前端需要承担哪些责任？
• FB-44-CO-B-008 什么是开源合规？前端使用开源库时应注意什么？
• FB-44-CO-B-009 什么是技术治理？
• FB-44-CO-B-010 技术债是否可以完全消除？
• FB-44-CO-B-011 技术标准制定应该由谁主导？
• FB-44-CO-B-012 什么是技术治理？它与技术管理的区别是什么？
• FB-44-CO-B-013 前端技术治理通常包括哪些方面？
• FB-44-CO-B-014 什么是技术委员会？它在前端治理中起什么作用？

小程序（12 道）

• FB-45-CO-B-001 什么是小程序？它与 H5 / WebView 应用有什么区别？
• FB-45-CO-B-002 微信小程序的项目结构和主要文件类型有哪些？
• FB-45-CO-B-003 小程序的 MVVM 数据绑定原理是什么？
• FB-45-CO-B-004 小程序页面生命周期有哪些？执行顺序是什么？
• FB-45-CO-B-005 小程序路由跳转方式有哪些？各有什么区别？
• FB-45-CO-B-006 小程序自定义组件的基本结构和生命周期是什么？
• FB-45-CO-B-007 小程序中 rpx 是什么？与 px / rem 有什么区别？
• FB-45-CO-B-008 小程序用户登录和获取用户信息的流程是怎样的？
• FB-45-CO-B-009 微信小程序的登录流程是怎样的？前端如何配合后端完成登录？
• FB-45-CO-B-010 微信小程序的授权机制有哪些变化？如何做好用户授权？
• FB-45-CO-B-011 微信小程序分包加载的作用和实现方式是什么？
• FB-45-CO-B-012 微信小程序的 storage 和 Web Storage 有什么区别？

鸿蒙 ArkTS / HarmonyOS（9 道）

• FB-46-CO-B-001 HarmonyOS 的系统架构是怎样的？它相比传统移动操作系统有哪些核心特性？
• FB-46-CO-B-002 ArkTS 是什么？它与 TypeScript 有什么关系和区别？
• FB-46-CO-B-003 什么是 Ability？HarmonyOS 中的 Ability 有哪些分类？
• FB-46-CO-B-004 什么是 ArkUI？它的声明式 UI 有什么特点？
• FB-46-CO-B-005 Stage 模型与 FA 模型有什么区别？为什么推荐 Stage 模型？
• FB-46-CO-B-006 请简述鸿蒙应用（UIAbility）的生命周期。
• FB-46-CO-B-007 鸿蒙应用的包结构是怎样的？HAP、HSP、HAR 分别是什么？
• FB-46-CO-B-008 鸿蒙的权限管理有哪些类型？如何声明和申请权限？
• FB-46-CO-B-009 鸿蒙的原生能力如何调用？如何与前端 ArkTS 交互？

Flutter（11 道）

• FB-47-CO-B-001 Dart 的 null safety 是什么？?、!、late 分别怎么用？
• FB-47-CO-B-002 StatelessWidget 和 StatefulWidget 有什么区别？
• FB-47-CO-B-003 Flutter 中 Key 的作用是什么？什么时候需要用 Key？
• FB-47-CO-B-004 Hot Reload 和 Hot Restart 有什么区别？
• FB-47-CO-B-005 StatefulWidget 中 setState 做了什么？使用时有何注意？
• FB-47-CO-B-007 pubspec.yaml 在 Flutter 项目中的作用是什么？
• FB-47-CO-B-008 请简述 Flutter 的 Widget Tree、Element Tree 和 Render Tree 之间的关系。
• FB-47-CO-B-009 Flutter 中的路由管理有哪些方式？
• FB-47-CO-B-010 Flutter 如何实现异步编程？Future 和 Stream 有什么区别？
• FB-47-CO-B-011 Flutter 中如何处理网络请求？
• FB-47-CO-B-012 Flutter 中如何加载本地资源图片？

Electron（10 道）

• FB-48-CO-B-001 Electron 主进程与渲染进程有什么区别？
• FB-48-CO-B-002 Electron 应用的启动流程是怎样的？
• FB-48-CO-B-003 BrowserWindow 有哪些常用配置项？
• FB-48-CO-B-004 preload 脚本是什么？为什么要使用它？
• FB-48-CO-B-005 contextIsolation 和 nodeIntegration 各有什么作用？
• FB-48-CO-B-007 Electron 中如何调试主进程和渲染进程？
• FB-48-CO-B-008 Menu、Tray 和 Notification 的基本用法是什么？
• FB-48-CO-B-009 Electron 应用如何做自动更新？
• FB-48-CO-B-010 Electron 如何打包和分发应用？
• FB-48-CO-B-011 Electron 应用如何调用系统原生能力？

WebAssembly（10 道）

• FB-49-CO-B-001 什么是 WebAssembly？它和 JavaScript 的关系是什么？
• FB-49-CO-B-002 WebAssembly 有哪些核心特点？
• FB-49-CO-B-003 WASM 的编译流程是怎样的？WAT 和 WASM 是什么关系？
• FB-49-CO-B-004 如何在浏览器中加载和实例化一个 WASM 模块？
• FB-49-CO-B-005 WASM 模块实例中的 exports 和 imports 是什么？
• FB-49-CO-B-006 WebAssembly 支持哪些基本数据类型？
• FB-49-CO-B-007 WebAssembly 的编译工具链有哪些？
• FB-49-CO-B-008 WebAssembly 适合哪些场景？不适合哪些场景？
• FB-49-CO-B-009 WebAssembly 的执行性能为什么比 JavaScript 高？
• FB-49-CO-B-010 WebAssembly 如何调用 JavaScript 函数？

WebGPU / 图形学（10 道）

• FB-50-CO-B-001 WebGPU 与 WebGL 的核心区别是什么？
• FB-50-CO-B-002 简述 WebGPU 的渲染管线主要阶段。
• FB-50-CO-B-003 GPUAdapter、GPUDevice 和 GPUQueue 之间是什么关系？
• FB-50-CO-B-004 WebGPU 中 Buffer 有哪些主要用途和 Usage 标志？
• FB-50-CO-B-005 GPUTexture 与 GPUSampler 有什么区别？
• FB-50-CO-B-006 Bind Group 在 WebGPU 中起什么作用？
• FB-50-CO-B-008 Three.js / Babylon.js 与 WebGPU 是什么关系？
• FB-50-CO-B-009 WebGPU 中如何实现一个基本的三角形渲染？
• FB-50-CO-B-010 WebGPU 的 BindGroup 是什么？有什么作用？
• FB-50-CO-B-011 WebGPU 如何实现通用计算（GPGPU）？

多媒体（Multimedia）（11 道）

• FB-51-CO-B-001 视频编码和封装有什么区别？
• FB-51-CO-B-002 HLS 和 DASH 流媒体协议的基本原理是什么？
• FB-51-CO-B-003 如何使用 getUserMedia 获取摄像头和麦克风？
• FB-51-CO-B-004 Canvas 上绘制视频帧的基本步骤是什么？
• FB-51-CO-B-005 Web Audio API 中的 AudioContext 是什么？
• FB-51-CO-B-007 字幕文件 WebVTT 和 SRT 有什么区别？
• FB-51-CO-B-008 多媒体内容的无障碍访问需要注意什么？
• FB-51-CO-B-009 浏览器如何捕获屏幕或摄像头？
• FB-51-CO-B-010 Canvas 如何实现视频帧处理？
• FB-51-CO-B-011 什么是 Web Audio API？它有哪些应用场景？
• FB-51-CO-B-012 HLS 和 DASH 两种流媒体协议有什么区别？

低代码（8 道）

• FB-52-CO-B-001 低代码（Low-Code）和无代码（No-Code）有什么区别？
• FB-52-CO-B-002 什么是搭建协议（Schema）？它在低代码平台中起什么作用？
• FB-52-CO-B-003 低代码平台的组件物料一般由哪些部分组成？
• FB-52-CO-B-004 属性面板（Setter）在低代码平台中的作用是什么？
• FB-52-CO-B-005 低代码平台中的数据绑定有哪些常见方式？
• FB-52-CO-B-006 低代码平台如何处理数据绑定和表达式？
• FB-52-CO-B-007 低代码平台如何设计权限系统？
• FB-52-CO-B-008 低代码平台如何导出代码或集成到现有项目？

计算机基础（18 道）

• FB-53-CO-B-001 什么是时间复杂度和空间复杂度？如何分析？
• FB-53-CO-B-002 数组和链表有什么区别？
• FB-53-CO-B-003 栈和队列有什么区别？前端有哪些应用？
• FB-53-CO-B-004 哈希表的工作原理是什么？如何解决冲突？
• FB-53-CO-B-005 二叉树有哪些遍历方式？
• FB-53-CO-B-006 常见排序算法有哪些？各自特点是什么？
• FB-53-CO-B-007 二分查找的适用条件和实现要点是什么？
• FB-53-CO-B-008 递归和迭代有什么区别？如何防止递归问题？
• FB-53-CO-B-009 排序算法有哪些？各自的时间复杂度是多少？
• FB-53-CO-B-010 深拷贝和浅拷贝有什么区别？前端如何实现？
• FB-53-CO-B-011 什么是闭包？有什么应用和注意事项？
• FB-53-CO-B-012 什么是事件循环（Event Loop）？宏任务和微任务有什么区别？
• FB-53-CO-B-013 什么是原型链？JavaScript 的继承如何实现？
• FB-53-CO-B-014 什么是防抖（debounce）和节流（throttle）？
• FB-53-CO-B-015 什么是递归？递归和迭代的区别是什么？
• FB-53-CO-B-016 什么是二分查找？时间复杂度是多少？
• FB-53-CO-B-017 什么是进程和线程？前端中如何理解？
• FB-53-CO-B-018 解释一下浏览器的事件委托（Event Delegation）。

简历与面试技巧（3 道）

• FB-55-CO-B-001 一份合格的前端简历应该包含哪些核心模块？
• FB-55-CO-B-005 面试前应该做哪些准备？
• FB-55-CO-B-007 面试中的基本礼仪有哪些？

行业特化（8 道）

• FB-56-CO-B-001 互联网行业与传统行业的技术差异是什么？
• FB-56-CO-B-002 toB 与 toC 产品在前端层面的核心差异是什么？
• FB-56-CO-B-003 电商行业前端需要重点关注哪些技术场景？
• FB-56-CO-B-004 金融行业前端为何特别重视安全与合规？
• FB-56-CO-B-005 游戏行业前端技术栈有哪些典型特点？
• FB-56-CO-B-006 企业服务行业（SaaS）前端的核心价值是什么？
• FB-56-CO-B-007 低代码/无代码平台主要解决什么问题？
• FB-56-CO-B-008 AI 工程化浪潮对前端岗位带来了哪些影响？

进阶题（574 道）

JavaScript（17 道）

• FB-01-CO-A-001 解释 Promise 的链式调用原理。
• FB-01-CO-A-002 for...of 和 for...in 的区别？
• FB-01-CO-A-003 解释 Object.defineProperty 和 Proxy 的区别。
• FB-01-CO-A-004 解释 Symbol 的用途。
• FB-01-CO-A-005 Map、Set、WeakMap、WeakSet 的区别和使用场景是什么？
• FB-01-CO-A-006 ES6 class 继承的原理是什么？与 ES5 寄生组合式继承如何对应？
• FB-01-CO-A-007 new 操作符在执行时具体做了哪些事？
• FB-01-CO-A-008 CommonJS 和 ES Module 在循环依赖时的行为有什么不同？
• FB-01-CO-A-009 如何理解 this 的绑定规则？优先级是怎样的？
• FB-01-CO-A-010 原型链是什么？proto、prototype、constructor 的关系？
• FB-01-CO-A-011 解释一下 JavaScript 的垃圾回收机制，常见内存泄漏有哪些？
• FB-01-CO-A-012 Object.is 与 === 有什么区别？
• FB-01-CO-A-013 ArrayBuffer、SharedArrayBuffer 和 Atomics 各是什么？
• FB-01-CO-A-014 什么是尾调用优化？JavaScript 中有什么限制？
• FB-01-CO-A-015 Symbol.iterator 与 Generator 的关系是什么？
• FB-01-CO-A-016 eval、Function 构造函数和 new Function 有什么安全风险？
• FB-01-CO-A-017 import.meta 和动态 import 有什么作用？

TypeScript（22 道）

• FB-02-CO-A-001 什么是泛型约束（Generic Constraints）？
• FB-02-CO-A-002 TypeScript 中有哪些内置的类型保护（Type Guards）？
• FB-02-CO-A-003 什么是 Mapped Types（映射类型）？
• FB-02-CO-A-004 什么是 Conditional Types（条件类型）？
• FB-02-CO-A-005 TypeScript 有哪些常用内置工具类型？
• FB-02-CO-A-006 Index Signatures（索引签名）是什么？
• FB-02-CO-A-007 Function Overloads（函数重载）是什么？
• FB-02-CO-A-008 keyof 和 typeof 操作符在类型上下文中有什么作用？
• FB-02-CO-A-009 TypeScript 类的访问修饰符有哪些？
• FB-02-CO-A-010 TypeScript 的模块解析策略有哪些？
• FB-02-CO-A-011 解释 keyof、typeof、in、as 在类型系统中的作用。
• FB-02-CO-A-012 解释 discriminated union（可辨识联合），并说明其优势。
• FB-02-CO-A-013 如何处理第三方库没有类型声明的问题？
• FB-02-CO-A-014 函数重载的使用场景和实现方式是什么？
• FB-02-CO-A-015 索引签名与 Record 类型有什么区别？
• FB-02-CO-A-016 什么是模板字面量类型？举一个实际例子。
• FB-02-CO-A-017 什么是声明合并与模块增强？
• FB-02-CO-A-018 枚举 Enum 有哪些缺陷？可以用什么替代？
• FB-02-CO-A-019 字面量类型与联合类型如何结合使用？
• FB-02-CO-A-020 TypeScript 中的类型保护（Type Guards）有哪些？
• FB-02-CO-A-021 泛型默认值如何与条件类型结合使用？
• FB-02-CO-A-022 TypeScript 中类型断言 as 与尖括号语法有什么区别？

Browser（19 道）

• FB-03-CO-A-001 浏览器的合成层（Compositing Layer）是什么？如何触发？
• FB-03-CO-A-002 Service Worker 的生命周期是怎样的？如何注册和激活？
• FB-03-CO-A-003 HTTP 强缓存和协商缓存的判断流程是怎样的？
• FB-03-CO-A-004 浏览器如何处理跨域图片、脚本和 iframe 的访问限制？
• FB-03-CO-A-005 浏览器资源加载的优先级是如何确定的？
• FB-03-CO-A-006 渲染进程内部有哪些主要线程？它们如何协作？
• FB-03-CO-A-007 什么是布局抖动（Layout Thrashing）？如何避免？
• FB-03-CO-A-008 解释合成层（Compositing Layer）和硬件加速。
• FB-03-CO-A-009 浏览器的同源策略是什么？跨域有哪些解决方案？
• FB-03-CO-A-010 什么是 Web Worker？它的作用和使用限制？
• FB-03-CO-A-011 什么是 Back-Forward Cache（bfcache）？
• FB-03-CO-A-012 CSS 的 content-visibility 属性有什么作用？
• FB-03-CO-A-013 requestIdleCallback 与 requestAnimationFrame 的区别
• FB-03-CO-A-014 浏览器标签页之间有哪些通信方式？
• FB-03-CO-A-015 浏览器存储方案对比：Cookie、localStorage、sessionStorage、IndexedDB
• FB-03-CO-A-016 什么是关键渲染路径（CRP）？如何优化？
• FB-03-CO-A-017 浏览器资源加载优先级是如何确定的？
• FB-03-CO-A-018 浏览器的主要进程与线程模型是什么？
• FB-03-CO-A-019 Chrome Lighthouse 性能评分机制是怎样的？

计算机网络（22 道）

• FB-04-CO-A-001 HTTP/1.1 与 HTTP/2 的核心区别是什么？HTTP/2 的多路复用如何解决队头阻塞？
• FB-04-CO-A-002 HTTPS 的 TLS 握手过程是什么？
• FB-04-CO-A-003 CDN 的基本原理是什么？如何为项目选择合适的 CDN？
• FB-04-CO-A-004 DNS 有哪些常见记录类型？TTL 对解析有什么影响？
• FB-04-CO-A-005 HTTP Keep-Alive 与 TCP 连接池在前端工程中的作用是什么？
• FB-04-CO-A-006 Cache-Control、ETag 与 Last-Modified 是如何协作的？
• FB-04-CO-A-009 JWT 如何安全使用？有哪些常见攻击与防御手段？
• FB-04-CO-A-010 HTTP/3 与 QUIC 有什么优势？它解决了 HTTP/2 的哪些问题？
• FB-04-CO-A-011 GraphQL 与 RESTful 相比有什么特点？适合什么场景？
• FB-04-CO-A-012 TCP 的可靠传输、流量控制和拥塞控制分别是怎么实现的？
• FB-04-CO-A-013 DNS 安全有哪些威胁？DNS over HTTPS（DoH）有什么作用？
• FB-04-CO-A-014 HTTP 常见状态码有哪些？分别代表什么？
• FB-04-CO-A-015 什么是队头阻塞？HTTP/2 和 HTTP/3 分别是如何解决的？
• FB-04-CO-A-016 RESTful API 设计有哪些原则？
• FB-04-CO-A-017 什么是 GraphQL？它和 REST 各有什么优缺点？
• FB-04-CO-A-018 TCP 粘包与拆包问题是如何产生的？如何解决？
• FB-04-CO-A-019 长连接与短连接的区别及适用场景
• FB-04-CO-A-020 正向代理、反向代理和透明代理有什么区别？
• FB-04-CO-A-021 If-None-Match 与 If-Modified-Since 有什么区别？
• FB-04-CO-A-022 WebSocket 握手过程及帧格式关键字段
• FB-04-CO-A-023 同源策略具体限制了哪些资源的访问？
• FB-04-CO-A-024 DNS 负载均衡与 GSLB 的基本思想

Web 安全（10 道）

• FB-05-CO-A-001 什么是会话固定攻击？如何防御？
• FB-05-CO-A-002 X-Frame-Options 与 CSP frame-ancestors 如何防御点击劫持？
• FB-05-CO-A-003 什么是 HSTS？它如何防御 SSL 剥离攻击？
• FB-05-CO-A-004 Subresource Integrity（SRI）的原理和使用方式
• FB-05-CO-A-005 如何安全地集成第三方脚本和 iframe？
• FB-05-CO-A-006 什么是凭证填充攻击（Credential Stuffing）？前端能做什么？
• FB-05-CO-A-007 JSONP 有哪些安全风险？
• FB-05-CO-A-008 前端敏感日志如何脱敏？
• FB-05-CO-A-009 什么是 DOM Invader？它如何帮助前端安全测试？
• FB-05-CO-A-010 什么是 Web Inject 技术？

HTML/CSS（16 道）

• FB-06-CO-A-001 什么是层叠上下文（stacking context）？
• FB-06-CO-A-002 响应式设计的实现方式有哪些？移动优先和桌面优先有什么区别？
• FB-06-CO-A-003 什么是 BEM 命名规范？它的优势是什么？
• FB-06-CO-A-004 Sass/Less 等 CSS 预处理器解决了 CSS 的哪些问题？
• FB-06-CO-A-005 什么是 CSS-in-JS？它有哪些优缺点？
• FB-06-CO-A-006 什么是原子化 CSS（Atomic CSS）？Tailwind 的优缺点是什么？
• FB-06-CO-A-007 如何减少 CSS 引起的重排和重绘？
• FB-06-CO-A-008 Design Token 是什么？为什么现代设计系统需要它？
• FB-06-CO-A-009 什么是重排（Reflow）、重绘（Repaint）和合成（Composite）？
• FB-06-CO-A-010 如何减少重排和重绘？
• FB-06-CO-A-011 CSS 层叠与继承如何工作？
• FB-06-CO-A-012 CSS 的 :is()、:where()、:has() 伪类有什么作用？
• FB-06-CO-A-013 CSS 隔离方案有哪些？如何选型？
• FB-06-CO-A-014 CSS 的 contain 属性有什么作用？
• FB-06-CO-A-015 如何实现单行文本溢出省略与多行溢出省略？
• FB-06-CO-A-016 什么是渐进增强与优雅降级？

可访问性（a11y）（15 道）

• FB-07-CO-A-001 ARIA 是什么？何时应该使用 ARIA，何时应避免？
• FB-07-CO-A-002 请解释 WCAG 的 A / AA / AAA 三个等级及其实际意义。
• FB-07-CO-A-003 焦点指示器（focus indicator）有什么要求？如何自定义但不破坏可访问性？
• FB-07-CO-A-004 什么是跳转链接（skip link）？如何实现？
• FB-07-CO-A-005 ARIA 中 role、state、property 有什么区别？
• FB-07-CO-A-006 什么是 ARIA？应该在什么情况下使用？
• FB-07-CO-A-007 表单可访问性有哪些关键点？
• FB-07-CO-A-008 如何进行可访问性测试？
• FB-07-CO-A-009 如何为数据表格提供无障碍支持？
• FB-07-CO-A-010 aria-describedby 与 aria-labelledby 有什么区别？
• FB-07-CO-A-011 如何为视频/音频内容提供无障碍替代方案？
• FB-07-CO-A-012 什么是键盘陷阱（keyboard trap）？如何避免？
• FB-07-CO-A-013 如何为动态加载内容使用 aria-live？
• FB-07-CO-A-014 可见焦点指示器（focus indicator）的要求是什么？
• FB-07-CO-A-015 如何为图标按钮提供可访问名称？

数据结构与算法（1 道）

• FB-08-CO-A-001 贪心算法的基本思想是什么？适合解决哪些问题？

设计模式（13 道）

• FB-09-CO-A-001 适配器模式与外观模式有什么区别？
• FB-09-CO-A-002 命令模式的核心思想是什么？适合什么场景？
• FB-09-CO-A-003 什么是依赖注入？它解决了什么问题？
• FB-09-CO-A-004 为什么常说"组合优于继承"？
• FB-09-CO-A-005 什么时候应该使用策略模式？
• FB-09-CO-A-006 如何理解"组合优于继承"？
• FB-09-CO-A-007 适配器模式在前端如何应用？
• FB-09-CO-A-008 装饰器模式在前端有哪些应用？
• FB-09-CO-A-009 代理模式在前端有哪些应用？
• FB-09-CO-A-010 命令模式适合什么场景？
• FB-09-CO-A-011 模板方法模式是什么？
• FB-09-CO-A-012 访问者模式解决了什么问题？
• FB-09-CO-A-013 什么是享元模式？在前端有哪些应用？

构建工具（13 道）

• FB-10-CO-A-001 请描述 Webpack 的完整构建流程。
• FB-10-CO-A-002 Vite 为什么快？开发环境和生产环境构建有什么区别？
• FB-10-CO-A-003 Rollup 适合什么场景？与 Webpack 如何选型？
• FB-10-CO-A-005 Bundle Splitting 和 Code Splitting 有什么区别？
• FB-10-CO-A-006 esbuild、SWC、Rspack 是什么？为什么比传统工具快？
• FB-10-CO-A-007 Webpack optimization 中 usedExports、sideEffects、minimize 如何配合 Tree Shaking？
• FB-10-CO-A-008 Vite 的插件机制与 Rollup 插件有什么关系？
• FB-10-CO-A-009 什么是 CSS Modules？构建工具如何处理它？
• FB-10-CO-A-010 如何理解 Webpack 中的 runtimeChunk 和 moduleGraph？
• FB-10-CO-A-011 Webpack 的 resolve 配置如何影响模块解析？
• FB-10-CO-A-012 @babel/preset-env 的 targets 与 useBuiltIns 该如何配置？
• FB-10-CO-A-017 从 Webpack 迁移到 Vite 需要考虑哪些因素和步骤？
• FB-10-CO-A-018 esbuild 为什么比传统构建工具快？

Monorepo（3 道）

• FB-11-CO-A-001 什么是拓扑排序？在 Monorepo 构建中有什么用？
• FB-11-CO-A-002 Monorepo 中如何处理循环依赖？
• FB-11-CO-A-003 什么是 pnpm 的 peerDependencyRules？

CI/CD（2 道）

• FB-12-CO-A-022 什么是 CI 中的 idempotency（幂等性）？
• FB-12-CO-A-023 什么是 pipeline as code 的优势？

代码质量与测试（20 道）

• FB-13-CO-A-001 Vitest 和 Jest 有什么主要区别？
• FB-13-CO-A-002 Playwright 和 Cypress 各有什么优劣？如何选择？
• FB-13-CO-A-003 TDD 和 BDD 有什么区别？
• FB-13-CO-A-004 代码审查（Code Review）时你通常关注哪些方面？
• FB-13-CO-A-005 除了 ESLint，前端还有哪些静态分析工具？
• FB-13-CO-A-006 覆盖率阈值应该如何设置？只看覆盖率有什么陷阱？
• FB-13-CO-A-007 测试中的 Arrange-Act-Assert 模式是什么？
• FB-13-CO-A-008 什么是视觉回归测试？有哪些实现方案？
• FB-13-CO-A-009 MSW 是什么？它如何帮助前端测试？
• FB-13-CO-A-010 什么是测试夹具（fixture）？如何管理？
• FB-13-CO-A-011 前端代码的可测试性有哪些特征？如何提升？
• FB-13-CO-A-012 什么是 Component Testing？它和单元测试、E2E 测试的关系是什么？
• FB-13-CO-A-013 测试覆盖率报告中的 “Uncovered Line #s” 怎么看？如何据此补测试？
• FB-13-CO-A-014 TDD 中 Fake 与 Mock 的选择原则是什么？
• FB-13-CO-A-015 为什么测试必须是 Deterministic（确定性的）？
• FB-13-CO-A-016 什么是测试中的 Happy Path 与 Unhappy Path？
• FB-13-CO-A-017 什么是 Codemod？什么时候应该使用？
• FB-13-CO-A-018 什么是属性测试（Property-Based Testing）？举一个 fast-check 的例子。
• FB-13-CO-A-019 什么是架构测试？如何用 ts-arch 约束模块依赖？
• FB-13-CO-A-020 如何定义代码质量度量指标？

设计系统与组件库（3 道）

• FB-14-CO-A-001 什么是 Headless UI？它解决了什么问题？
• FB-14-CO-A-002 CSS-in-JS、CSS Modules、BEM 三种方案如何选型？
• FB-14-CO-A-003 视觉回归测试（Visual Regression Testing）是什么？

React（20 道）

• FB-15-CO-A-009 useEffect 的依赖数组应该怎么写？清理函数什么时候执行？
• FB-15-CO-A-010 useMemo 和 useCallback 有什么区别？什么时候应该使用？
• FB-15-CO-A-011 React.memo 是什么？什么时候使用？
• FB-15-CO-A-012 Context API 解决了什么问题？有什么性能陷阱？
• FB-15-CO-A-013 Refs 在 React 中有什么作用？forwardRef 和 useImperativeHandle 怎么用？
• FB-15-CO-A-015 React Router v6 有哪些核心变化？
• FB-15-CO-A-016 React 中如何处理表单？React Hook Form 的优势是什么？
• FB-15-CO-A-017 Error Boundary 是什么？它的局限性有哪些？
• FB-15-CO-A-039 useReducer 和 useState 有什么区别？
• FB-15-CO-A-040 什么是 Render Props 和高阶组件（HOC）？
• FB-15-CO-A-041 如何用 React.lazy 和 Suspense 做代码分割？
• FB-15-CO-A-043 React 合成事件和原生事件有什么区别？
• FB-15-CO-A-044 dangerouslySetInnerHTML 有什么风险？如何安全使用？
• FB-15-CO-A-046 如何用 useRef 保存上一次的 state 或 props？
• FB-15-CO-A-047 React.memo、useMemo、useCallback 如何配合使用？
• FB-15-CO-A-048 如何优化 React 组件的 re-render？
• FB-15-CO-A-049 React 中如何正确获取异步数据？
• FB-15-CO-A-050 如何使用 useRef 操作 DOM？
• FB-15-CO-A-051 React 中 useMemo 的依赖项注意事项？
• FB-15-CO-A-052 什么是 React 的 lifting state up？

Vue（17 道）

• FB-16-CO-A-009 Vue 3 的响应式 API 有哪些？ref 和 reactive 有什么区别？
• FB-16-CO-A-010 watch 和 watchEffect 有什么区别？
• FB-16-CO-A-011 provide 和 inject 是什么？有什么注意事项？
• FB-16-CO-A-012 Vue 3 的生命周期钩子有哪些？Composition API 中如何使用？
• FB-16-CO-A-013 Vue 的 nextTick 是什么？什么时候需要使用？
• FB-16-CO-A-014 Vue 中的 KeepAlive 是什么？如何使用？
• FB-16-CO-A-015 Vue Router v4 有哪些核心变化？
• FB-16-CO-A-016 Vuex 和 Pinia 有什么区别？新项目该选哪个？
• FB-16-CO-A-017 Vue 中的插槽（Slot）有哪些类型？如何使用作用域插槽？
• FB-16-CO-A-018 Vue 3 中如何编写自定义指令？
• FB-16-CO-A-019 Vue 中如何正确使用 ref 和 reactive？
• FB-16-CO-A-020 Vue 3 的 emits 选项有什么作用？
• FB-16-CO-A-021 Vue 中的 template refs 如何使用？
• FB-16-CO-A-022 Vue 中的 transition 和 transition-group 区别？
• FB-16-CO-A-023 Vue 中的 props 校验怎么做？
• FB-16-CO-A-024 Vue 中如何处理组件卸载时的副作用？
• FB-16-CO-A-025 Vue 中的 defineAsyncComponent 怎么用？

跨端技术（11 道）

• FB-17-CO-A-008 Taro 和 UniApp 有什么异同？各自适合什么场景？
• FB-17-CO-A-010 小程序和 H5 有什么区别？
• FB-17-CO-A-011 什么是 Hybrid App？它的核心问题是什么？
• FB-17-CO-A-014 鸿蒙 ArkTS / ArkUI 是什么？对跨端开发有什么影响？
• FB-17-CO-A-040 React Native 的 Fabric 渲染器解决了什么问题？
• FB-17-CO-A-044 Flutter 的热重载（Hot Reload）和热重启（Hot Restart）有什么区别？
• FB-17-CO-A-045 Taro 和 UniApp 的运行时适配层是怎么工作的？
• FB-17-CO-A-046 小程序的双线程模型有什么优势和限制？
• FB-17-CO-A-047 React Native 的 Hermes 引擎有什么优势？
• FB-17-CO-A-048 Flutter 的 Dart 语言有什么特点？
• FB-17-CO-A-049 Electron 应用如何打包和自动更新？

AI 工程化（15 道）

• FB-18-CO-A-009 RAG 的完整流程是什么？每个环节有哪些优化点？
• FB-18-CO-A-011 什么是结构化输出？如何实现 JSON mode / Structured Outputs？
• FB-18-CO-A-012 微调（Fine-tuning）和 RAG 如何选择？
• FB-18-CO-A-015 向量数据库如何选型？常见索引算法有哪些？
• FB-18-CO-A-016 Long Context 模型和 RAG 如何选择？
• FB-18-CO-A-017 什么是模型网关（Model Gateway）？它解决了什么问题？
• FB-18-CO-A-018 什么是指令遵循能力（Instruction Following）？如何评估？
• FB-18-CO-A-041 什么是上下文窗口？前端如何处理超长对话？
• FB-18-CO-A-048 什么是模型幻觉？前端产品层面有哪些兜底策略？
• FB-18-CO-A-049 如何评估一个 AI 功能的效果？
• FB-18-CO-A-050 AI Native 应用与传统 GUI 应用有什么不同？前端工程师需要哪些新能力？
• FB-18-CO-A-051 如何选择 Embedding 模型？
• FB-18-CO-A-052 什么是 RAG 中的 Chunking 策略？
• FB-18-CO-A-053 什么是 LLM 的上下文压缩？
• FB-18-CO-A-054 如何评估 RAG 的召回率？

Node.js / BFF（17 道）

• FB-19-CO-A-011 Node.js 中进程和线程有什么区别？cluster 模块的作用是什么？
• FB-19-CO-A-012 RESTful、GraphQL 和 tRPC 各有什么优缺点？如何选择？
• FB-19-CO-A-013 Redis 缓存有哪些使用策略？如何应对缓存穿透、击穿、雪崩？
• FB-19-CO-A-014 Kafka、RabbitMQ、RocketMQ 有什么区别？如何选型？
• FB-19-CO-A-015 Prisma 和 TypeORM 有什么区别？如何选择？
• FB-19-CO-A-039 如何为 BFF 下游接口设计超时与重试机制？
• FB-19-CO-A-040 什么是熔断、限流、降级？在 BFF 中如何落地？
• FB-19-CO-A-041 如何在 Node.js 接口中实现幂等性设计？
• FB-19-CO-A-045 TypeScript Node.js 项目有哪些编译运行方案？如何选择？
• FB-19-CO-A-046 如何对 Node.js 服务做健康检查？liveness/readiness/startup probe 有什么区别？
• FB-19-CO-A-047 如何处理 Node.js 服务中的未捕获异常？
• FB-19-CO-A-048 Serverless 的冷启动问题如何解决？
• FB-19-CO-A-049 Node.js 中如何设计 RESTful API 的错误处理？
• FB-19-CO-A-050 如何在 Node.js 中实现请求限流？
• FB-19-CO-A-051 Node.js 中如何处理跨服务事务？
• FB-19-CO-A-052 BFF 层如何做数据聚合？
• FB-19-CO-A-053 Node.js 中如何做健康检查？

Git 工作流与变更管理（14 道）

• FB-20-CO-A-009 Git Flow、GitHub Flow 和 Trunk-Based Development 有什么区别？
• FB-20-CO-A-013 git rebase -i（交互式变基）有哪些常见用法？
• FB-20-CO-A-015 git bisect 如何定位引入 bug 的提交？
• FB-20-CO-A-016 git blame 和 git log 在追踪变更时如何使用？
• FB-20-CO-A-040 fast-forward merge 和 --no-ff 有什么区别？
• FB-20-CO-A-043 git rebase --onto 的使用场景是什么？
• FB-20-CO-A-045 git reflog 和 git log 有什么区别？
• FB-20-CO-A-047 git commit --amend 有什么用？需要注意什么？
• FB-20-CO-A-048 什么是 Feature Toggle？什么时候使用？
• FB-20-CO-A-049 如何为团队选择合适的 Git 工作流？
• FB-20-CO-A-050 Feature Toggle 是什么？
• FB-20-CO-A-051 git rebase --onto 的使用场景？
• FB-20-CO-A-052 如何处理代码审查中的敏感信息？
• FB-20-CO-A-053 git worktree 有什么用？

开发者体验与工程效能（2 道）

• FB-21-CO-A-016 什么是开发者反馈循环（Developer Feedback Loop）？缩短反馈循环有哪些典型手段？
• FB-21-CO-A-017 Cypress 与 Playwright 在端到端测试架构与 DX 上有哪些核心区别

部署与 SRE（9 道）

• FB-22-CO-A-014 SLI、SLO、SLA 分别是什么？请结合前端场景举例
• FB-22-CO-A-015 可观测性三大支柱（日志/指标/链路）在前端如何落地？
• FB-22-CO-A-016 什么是前端服务的负载均衡？它与横向扩容有什么核心区别与联系？
• FB-22-CO-A-017 发布回滚有哪些策略？
• FB-22-CO-A-018 如何设计前端灰度放量策略？
• FB-22-CO-A-019 如何设计前端回滚策略？
• FB-22-CO-A-020 什么是 Error Budget？
• FB-22-CO-A-021 如何建立前端性能基线？
• FB-22-CO-A-022 什么是 Toil？SRE 如何减少 Toil？

包管理与供应链安全（11 道）

• FB-23-CO-A-009 包管理器的依赖解析算法与 deduplication 机制是怎样的？
• FB-23-CO-A-010 npm、yarn Classic、yarn Berry PnP 与 pnpm 的 node_modules 结构有什么区别？
• FB-23-CO-A-012 lockfile 安全与完整性校验是如何工作的？
• FB-23-CO-A-015 tree-shaking 是什么？sideEffects 字段如何影响它？
• FB-23-CO-A-016 lockfile 中的 integrity 校验与 SBOM 清单有什么核心区别？
• FB-23-CO-A-017 如何评估是否引入一个新的 npm 包？
• FB-23-CO-A-018 如何评估 npm 包质量？
• FB-23-CO-A-019 什么是 npm 的 resolutions / overrides？
• FB-23-CO-A-020 如何处理依赖版本冲突？
• FB-23-CO-A-021 什么是依赖地狱？
• FB-23-CO-A-022 node_modules 体积膨胀如何治理？

系统架构设计（16 道）

• FB-25-CO-A-003 DDD（领域驱动设计）中的核心概念如何映射到前端架构？
• FB-25-CO-A-008 微前端有哪些实现方式？各自的优缺点是什么？
• FB-25-CO-A-013 模块化、组件化、服务化之间有什么区别与联系？
• FB-25-CO-A-014 什么是前端架构？它和框架有什么关系？
• FB-25-CO-A-015 为什么前端需要 BFF？直接调用后端微服务有什么问题？
• FB-25-CO-A-016 什么是 DDD？前端如何借鉴 DDD 思想？
• FB-25-CO-A-017 解释单一职责原则（SRP）在前端组件设计中的应用。
• FB-25-CO-A-018 什么是依赖倒置原则？举一个前端代码示例。
• FB-25-CO-A-019 你如何理解“康威定律”？它对前端架构有什么影响？
• FB-25-CO-A-020 分层架构中，UI 层、业务逻辑层、数据访问层各自应该做什么？
• FB-25-CO-A-021 MVC、MVVM、MVP、MVI 的取舍与前端映射
• FB-25-CO-A-022 什么是防腐层（Anti-Corruption Layer）
• FB-25-CO-A-023 什么是 Circuit Breaker，前端如何配合
• FB-25-CO-A-024 前端架构中的 Idempotency 是什么意思
• FB-25-CO-A-025 什么是 Service Mesh，前端需要关注吗
• FB-25-CO-A-026 什么是金丝雀发布，前端如何实现

微前端（12 道）

• FB-26-CO-A-011 Module Federation 的共享依赖机制是如何工作的？
• FB-26-CO-A-012 Web Components 作为微前端容器有什么优势和局限？
• FB-26-CO-A-013 什么是微前端？它主要解决什么问题？
• FB-26-CO-A-014 微前端中如何实现样式隔离？各自的优缺点是什么？
• FB-26-CO-A-015 微前端中 JS 隔离有哪些方案？沙箱是否能 100% 隔离？
• FB-26-CO-A-016 子应用之间如何通信？应该避免什么？
• FB-26-CO-A-017 微前端中如何处理公共依赖？
• FB-26-CO-A-018 微前端刷新页面 404 是什么原因？如何解决？
• FB-26-CO-A-019 微前端与 iframe 的区别与取舍
• FB-26-CO-A-020 微前端的样式隔离方案有哪些
• FB-26-CO-A-021 Qiankun 与 Module Federation 的主要区别
• FB-26-CO-A-022 微前端如何影响 SEO

性能工程（9 道）

• FB-27-CO-A-008 SSR、SSG、ISR 有什么区别？各自适合什么场景？
• FB-27-CO-A-009 请解释 FCP、LCP、CLS、INP、TTFB 的含义。
• FB-27-CO-A-010 什么是 Core Web Vitals？Google 为什么重视它们？
• FB-27-CO-A-011 什么是虚拟列表？它的实现原理是什么？
• FB-27-CO-A-012 代码分割是什么？React 中如何实现？
• FB-27-CO-A-013 Core Web Vitals 指标含义与优化
• FB-27-CO-A-014 HTTP 缓存策略在前端的使用
• FB-27-CO-A-015 SSR 与 CSR 的性能权衡
• FB-27-CO-A-016 什么是 Time to Interactive

质量保障（18 道）

• FB-28-CO-A-009 前端测试框架如何选型？
• FB-28-CO-A-010 Cypress 与 Playwright 有什么核心差异？如何选型？
• FB-28-CO-A-011 什么是契约测试？前端为什么需要它？
• FB-28-CO-A-012 视觉回归测试的原理与实践是什么？
• FB-28-CO-A-013 如何设计可测试性良好的前端代码？
• FB-28-CO-A-014 TDD 与 BDD 有什么区别？如何实践？
• FB-28-CO-A-015 前端质量保障体系包括哪些方面？
• FB-28-CO-A-016 测试金字塔是什么？前端如何实践？
• FB-28-CO-A-017 单元测试应该覆盖哪些内容？什么不应该测？
• FB-28-CO-A-018 什么是契约测试？前端为什么需要它？
• FB-28-CO-A-019 什么是灰度发布？前端如何实现？
• FB-28-CO-A-020 前端错误监控应该覆盖哪些类型？
• FB-28-CO-A-021 可观测性是什么？前端如何实现？
• FB-28-CO-A-022 单元测试、集成测试、E2E 测试的边界
• FB-28-CO-A-023 什么是快照测试，何时使用
• FB-28-CO-A-024 什么是契约测试
• FB-28-CO-A-025 什么是混沌工程在前端中的应用
• FB-28-CO-A-026 什么是静态应用安全测试（SAST）

数据与状态管理（15 道）

• FB-29-CO-A-009 SWR 缓存策略是什么？stale-while-revalidate 如何在前端应用？
• FB-29-CO-A-010 前端缓存失效策略有哪些？如何选择？
• FB-29-CO-A-011 乐观更新是什么？适用场景和风险有哪些？
• FB-29-CO-A-012 MobX 和 Redux 的响应式模型有什么区别？
• FB-29-CO-A-013 Jotai 和 Zustand 的设计理念有什么不同？
• FB-29-CO-A-014 React Hook Form 和 Formik 有什么区别？
• FB-29-CO-A-015 数据一致性在前端有哪些常见问题？如何处理？
• FB-29-CO-A-016 状态提升（Lifting State Up）和状态下沉（State Colocation）各有什么适用场景？
• FB-29-CO-A-017 如何处理数据一致性问题？
• FB-29-CO-A-018 Redux 与 MobX 的设计哲学差异
• FB-29-CO-A-019 什么是 CQRS 与 Event Sourcing
• FB-29-CO-A-020 什么是规范化状态（Normalized State）
• FB-29-CO-A-021 Zustand 与 Redux Toolkit 的取舍
• FB-29-CO-A-022 什么是不可变数据，为什么重要
• FB-29-CO-A-023 状态管理中的副作用隔离

可观测性（10 道）

• FB-30-CO-A-010 Sentry 的 issue、event、release、source map 之间是什么关系？
• FB-30-CO-A-013 什么是 OpenTelemetry？它在前端链路追踪中扮演什么角色？
• FB-30-CO-A-015 SLI、SLO、SLA 有什么区别？请给前端示例。
• FB-30-CO-A-016 什么是混沌工程？前端可以做吗？
• FB-30-CO-A-017 RUM 与 Synthetic 监控的区别
• FB-30-CO-A-018 前端日志采集的最佳实践
• FB-30-CO-A-019 Source Map 在安全与监控中的权衡
• FB-30-CO-A-020 前端性能预算如何制定
• FB-30-CO-A-021 前端监控采样策略
• FB-30-CO-A-022 日志级别与使用场景

安全架构（15 道）

• FB-31-CO-A-001 OAuth 2.0 授权码流程中，前端扮演什么角色？
• FB-31-CO-A-002 JWT 在前端有哪些安全使用方式与常见风险？
• FB-31-CO-A-003 第三方脚本（埋点、客服、广告）有哪些安全风险？如何隔离？
• FB-31-CO-A-004 前端供应链安全如何保障？
• FB-31-CO-A-005 CSP nonce 与 hash 有什么区别？如何选择？
• FB-31-CO-A-006 会话管理应该注意哪些安全点？
• FB-31-CO-A-007 安全漏洞修复的标准流程是什么？
• FB-31-CO-A-008 第三方脚本有哪些风险？如何治理？
• FB-31-CO-A-009 XSS 的类型与防护措施
• FB-31-CO-A-010 CSRF 的原理与防御
• FB-31-CO-A-011 什么是点击劫持及防御
• FB-31-CO-A-012 什么是 Subresource Integrity
• FB-31-CO-A-013 什么是开放重定向漏洞
• FB-31-CO-A-014 什么是内容嗅探与 MIME 嗅探防御
• FB-31-CO-A-015 XSS 与 CSP 的关系

实时与协同（15 道）

• FB-32-CO-A-001 WebSocket 心跳与重连机制如何设计？
• FB-32-CO-A-002 OT 与 CRDT 有什么区别？协同编辑如何选型？
• FB-32-CO-A-003 WebRTC 信令服务器如何设计？
• FB-32-CO-A-004 实时系统中的冲突解决有哪些策略？
• FB-32-CO-A-005 实时消息队列/发布订阅如何设计？
• FB-32-CO-A-006 实时白板中光标/选区同步如何优化？
• FB-32-CO-A-007 网络分区对实时系统有什么影响？如何处理？
• FB-32-CO-A-008 WebSocket 集群如何实现跨节点广播？
• FB-32-CO-A-009 实时系统的可观测性应关注哪些指标？
• FB-32-CO-A-010 WebSocket 连接管理要点
• FB-32-CO-A-011 SSE 的优缺点与使用限制
• FB-32-CO-A-012 实时系统中如何处理 Presence
• FB-32-CO-A-013 长连接服务端的推送策略
• FB-32-CO-A-014 WebSocket 心跳机制
• FB-32-CO-A-015 SSE 与自动重连

国际化（15 道）

• FB-33-CO-A-001 前端 i18n 框架如何选型？
• FB-33-CO-A-002 多语言路由与 SEO 如何设计？
• FB-33-CO-A-003 服务端渲染与国际化如何结合？
• FB-33-CO-A-004 翻译缺失与回退策略如何设计？
• FB-33-CO-A-005 翻译工作流与 TMS 如何落地？
• FB-33-CO-A-006 本地化的图片、文案和文化差异如何处理？
• FB-33-CO-A-007 时区处理有哪些最佳实践？
• FB-33-CO-A-008 ICU MessageFormat 有什么作用？
• FB-33-CO-A-009 i18n 与 l10n 的区别
• FB-33-CO-A-010 React/Vue 中常见的 i18n 方案
• FB-33-CO-A-011 时区与日期时间处理
• FB-33-CO-A-012 国际化中的语言回退策略
• FB-33-CO-A-013 文化本地化与简单翻译的区别
• FB-33-CO-A-014 翻译中的上下文问题
• FB-33-CO-A-015 ICU Message Format 简介

可视化与图形（8 道）

• FB-34-CO-A-009 Canvas 2D 渲染管线、像素操作与离屏缓存分别是什么？
• FB-34-CO-A-013 可视化中的缩放、平移、刷选、Tooltip 有哪些实现要点？
• FB-34-CO-A-015 WebGL 与 Canvas 2D 的本质区别是什么？请简述顶点着色器、片元着色器和缓冲区的角色。
• FB-34-CO-A-016 图表库选型要考虑哪些因素
• FB-34-CO-A-017 什么是数据可视化中的视觉编码
• FB-34-CO-A-018 可视化中的数据更新策略
• FB-34-CO-A-019 什么是图表中的视觉欺骗
• FB-34-CO-A-020 数据可视化颜色无障碍

Serverless/Edge（14 道）

• FB-35-CO-A-001 什么是 SSR at Edge？它解决了什么问题？
• FB-35-CO-A-002 边缘缓存策略如何设计？
• FB-35-CO-A-003 Serverless 中的状态持久化有哪些方案？
• FB-35-CO-A-004 Serverless 成本模型与计费如何评估？
• FB-35-CO-A-005 Serverless 可观测性如何建设？
• FB-35-CO-A-006 Serverless 架构下如何做好可观测性？
• FB-35-CO-A-007 如何避免 Serverless 供应商锁定？
• FB-35-CO-A-008 边缘计算与 Serverless 的关系
• FB-35-CO-A-009 边缘函数的限制与最佳实践
• FB-35-CO-A-010 什么是 Edge Side Includes
• FB-35-CO-A-011 ISR 与 SSG 的区别
• FB-35-CO-A-012 什么是 Function as a Service 的触发器
• FB-35-CO-A-013 Serverless 下的日志与可观测性
• FB-35-CO-A-014 边缘函数的限制

前端数据工程（14 道）

• FB-36-CO-A-001 埋点方案如何选型？
• FB-36-CO-A-002 用户行为分析有哪些常用模型？
• FB-36-CO-A-003 前端实时数据处理有哪些方式？
• FB-36-CO-A-004 数据可视化报表如何设计？
• FB-36-CO-A-005 数据湖/数仓概念如何与前端数据工程衔接？
• FB-36-CO-A-006 数据治理与元数据管理在前端如何体现？
• FB-36-CO-A-007 埋点口径不一致会带来什么问题？
• FB-36-CO-A-008 ETL 与 ELT 的区别
• FB-36-CO-A-009 什么是数据血缘，前端如何应用
• FB-36-CO-A-010 什么是数据治理，前端如何参与
• FB-36-CO-A-011 数据管道中的流处理与批处理
• FB-36-CO-A-012 数据仓库的分层模型
• FB-36-CO-A-013 什么是数据湖仓一体
• FB-36-CO-A-014 什么是数据目录

业务洞察（12 道）

• FB-37-CO-A-002 如何进行竞品分析？前端在竞品分析中应关注什么？
• FB-37-CO-A-004 LTV/CAC 比值是什么？它对增长策略有什么影响？
• FB-37-CO-A-007 什么是北极星指标？它如何帮助前端团队聚焦业务目标？
• FB-37-CO-A-008 什么是单位经济模型（Unit Economics）？前端如何影响它？
• FB-37-CO-A-009 如何评估一个新市场或新业务线的潜在价值？
• FB-37-CO-A-010 什么是产品-市场契合（PMF）？前端如何判断和支撑 PMF 阶段？
• FB-37-CO-A-011 网络效应、规模效应和品牌效应有什么区别？对前端架构有什么启示？
• FB-37-CO-A-012 什么是定价策略？前端在定价页面设计中应注意什么？
• FB-37-CO-A-013 如何设计一个可量化的前端增长实验？
• FB-37-CO-A-014 当业务方提出一个明显损害长期用户体验的短期变现需求时，你如何沟通？
• FB-37-CO-A-015 如何评估一个功能是否值得从“免费”改为“付费”？
• FB-37-CO-A-016 如何利用 cohort 分析指导前端优化？

技术战略（7 道）

• FB-39-CO-A-002 技术选型中如何平衡“成熟稳定”与“技术创新”？
• FB-39-CO-A-007 什么是云原生战略？前端团队如何参与？
• FB-39-CO-A-008 什么是技术战略？它与业务战略的关系是什么？
• FB-39-CO-A-009 技术选型的核心原则是什么？前端选型时应避免哪些常见误区？
• FB-39-CO-A-010 什么是技术债？如何制定偿还技术债的战略？
• FB-39-CO-A-011 如何评估“自研”还是“购买/使用开源”？
• FB-39-CO-A-012 什么是技术雷达？它如何帮助团队做技术决策？

沟通表达（1 道）

• FB-40-CO-A-001 如何准备一次技术演讲？

项目管理（2 道）

• FB-41-CO-A-005 敏捷估算中 Story Point 是什么？为什么不用绝对人天？
• FB-41-CO-A-006 技术债在项目中的典型表现有哪些？如何与产品/项目经理沟通排期偿还？

招聘（2 道）

• FB-42-CO-A-011 面试官培训应该覆盖哪些内容？
• FB-42-CO-A-012 如何处理绩效不达标的员工？

技术品牌与布道（5 道）

• FB-43-CO-A-004 开源项目的技术品牌运营有哪些关键要素？
• FB-43-CO-A-008 技术奖项、专利对技术品牌建设有什么作用？如何规划？
• FB-43-CO-A-009 什么是技术品牌？它对招聘和业务有什么价值？
• FB-43-CO-A-010 如何衡量技术品牌建设的 ROI？
• FB-43-CO-A-011 如何衡量技术布道活动的 ROI？

技术治理与合规（1 道）

• FB-44-CO-A-001 变革阻力通常来自哪里？

小程序（10 道）

• FB-45-CO-A-001 小程序的双线程模型是什么？为什么采用这种架构？
• FB-45-CO-A-002 JSBridge 在小程序中如何工作？有哪些通信方式？
• FB-45-CO-A-003 微信、支付宝、抖音、百度小程序的架构有什么异同？
• FB-45-CO-A-006 小程序自定义组件间的数据传递和事件通信方式有哪些？
• FB-45-CO-A-008 小程序的版本更新机制是怎样的？如何做到强制更新？
• FB-45-CO-A-009 微信小程序的页面生命周期有哪些？与 App 生命周期有什么关系？
• FB-45-CO-A-010 微信小程序的 setData 有什么特点和使用注意事项？
• FB-45-CO-A-011 微信小程序的组件化开发有哪些方式？
• FB-45-CO-A-012 微信小程序的导航方式有哪些？各自适用场景是什么？
• FB-45-CO-A-013 微信小程序的 rpx 是什么？与 px、rem 有什么区别？

鸿蒙 ArkTS / HarmonyOS（9 道）

• FB-46-CO-A-009 什么是 HarmonyOS 的分布式能力？分布式软总线如何工作？
• FB-46-CO-A-010 什么是原子化服务（Atomic Service）？它与传统应用有什么区别？
• FB-46-CO-A-011 什么是卡片服务（Form / Widget）？它的生命周期是怎样的？
• FB-46-CO-A-012 ArkTS 中的状态装饰器有哪些？它们之间有什么区别？
• FB-46-CO-A-013 鸿蒙 HarmonyOS 的 Ability 是什么？有哪些类型？
• FB-46-CO-A-014 鸿蒙 ArkTS 与 TypeScript 有什么区别？
• FB-46-CO-A-015 鸿蒙 ArkUI 中的 @State、@Prop、@Link 有什么区别？
• FB-46-CO-A-016 鸿蒙的 Stage 模型和 FA 模型有什么区别？
• FB-46-CO-A-017 鸿蒙应用如何实现页面路由跳转？

Flutter（8 道）

• FB-47-CO-A-003 Navigator 1.0 和 Navigator 2.0 有什么区别？
• FB-47-CO-A-005 Riverpod 与 Provider 相比有哪些核心改进？
• FB-47-CO-A-008 Flutter 平台通道（Platform Channel）有哪几种？它们分别适合什么场景？
• FB-47-CO-A-009 Flutter 的 Widget、Element、RenderObject 三棵树是什么关系？
• FB-47-CO-A-010 Flutter 中 StatefulWidget 和 StatelessWidget 有什么区别？
• FB-47-CO-A-011 Flutter 的 setState 有什么作用和注意事项？
• FB-47-CO-A-012 Flutter 中的 BuildContext 是什么？有什么作用？
• FB-47-CO-A-013 Flutter 的 pubspec.yaml 文件主要配置哪些内容？

Electron（7 道）

• FB-48-CO-A-001 Electron IPC 有哪些通信方式？如何选择？
• FB-48-CO-A-006 Electron 自动更新是如何工作的？
• FB-48-CO-A-007 Electron 是什么？它的基本架构是怎样的？
• FB-48-CO-A-008 Electron 主进程和渲染进程有什么区别？
• FB-48-CO-A-009 Electron 的预加载脚本（Preload Script）有什么作用？
• FB-48-CO-A-010 Electron 中主进程和渲染进程如何通信？
• FB-48-CO-A-011 Electron 的 BrowserWindow 有哪些常用配置？

WebAssembly（9 道）

• FB-49-CO-A-001 WebAssembly 的线性内存（Linear Memory）是如何工作的？
• FB-49-CO-A-002 WebAssembly 的 Table 是什么？有什么作用？
• FB-49-CO-A-004 WASM 中的全局变量（Global）是什么？如何与 JS 共享？
• FB-49-CO-A-007 AssemblyScript 和 Rust 在 WASM 开发中的定位与差异
• FB-49-CO-A-008 什么是 WebAssembly？它与 JavaScript 有什么关系？
• FB-49-CO-A-009 WebAssembly 的核心模块结构是什么？
• FB-49-CO-A-010 WebAssembly 的 Memory 是什么？如何与 JavaScript 共享数据？
• FB-49-CO-A-011 WebAssembly 支持哪些数据类型？
• FB-49-CO-A-012 WebAssembly 的 instantiate 和 instantiateStreaming 有什么区别？

WebGPU / 图形学（12 道）

• FB-50-CO-A-009 GPUCommandEncoder 与 GPURenderPassEncoder 的关系是什么？
• FB-50-CO-A-011 Uniform Buffer 与 Storage Buffer 有什么区别？
• FB-50-CO-A-012 配置 GPURenderPipeline 时需要指定哪些关键状态？
• FB-50-CO-A-014 3D 渲染中常用的坐标系和 MVP 变换是什么？
• FB-50-CO-A-016 WebGPU 目前的浏览器支持情况如何？如何降级？
• FB-50-CO-A-017 WebGPU 是什么？与 WebGL 有什么区别？
• FB-50-CO-A-018 WebGPU 的核心对象有哪些？
• FB-50-CO-A-019 WebGPU 的渲染管线（Render Pipeline）包含哪些阶段？
• FB-50-CO-A-020 WebGPU 中的 Buffer 和 Texture 有什么区别？
• FB-50-CO-A-021 WebGPU 的着色器语言是什么？与 GLSL 有什么区别？
• FB-50-CO-A-022 WebGPU 中如何管理纹理内存和避免泄漏？
• FB-50-CO-A-023 WebGL 与 WebGPU 在 shader 编写上有什么主要区别？

多媒体（Multimedia）（11 道）

• FB-51-CO-A-009 HLS 的 m3u8 文件结构是怎样的？TS 分片的优势是什么？
• FB-51-CO-A-011 WebRTC 建立连接的基本流程是什么？
• FB-51-CO-A-013 MediaRecorder API 如何录制音视频？
• FB-51-CO-A-014 Web Audio API 如何处理音频可视化？
• FB-51-CO-A-015 内容保护 DRM 在前端有哪些常见方案？
• FB-51-CO-A-016 Web Codecs API 解决了什么问题？
• FB-51-CO-A-017 HTML5 音频和视频标签有哪些常用属性？
• FB-51-CO-A-018 如何实现自定义视频播放器控件？
• FB-51-CO-A-019 浏览器中的 Media Source Extensions（MSE）是什么？有什么作用？
• FB-51-CO-A-020 HLS 和 DASH 有什么区别？
• FB-51-CO-A-021 WebRTC 的核心组件有哪些？

低代码（8 道）

• FB-52-CO-A-001 低代码平台中的事件与动作编排机制是如何工作的？
• FB-52-CO-A-002 低代码表单设计器中的关键技术点有哪些？
• FB-52-CO-A-003 低代码表格设计器需要解决哪些核心问题？
• FB-52-CO-A-004 什么是低代码/无代码平台？它们的主要价值是什么？
• FB-52-CO-A-005 低代码平台的核心架构通常包含哪些部分？
• FB-52-CO-A-006 低代码平台的 Schema 协议应该包含哪些信息？
• FB-52-CO-A-007 低代码平台的运行时如何渲染 Schema？
• FB-52-CO-A-008 低代码平台如何支持自定义组件？

计算机基础（15 道）

• FB-53-CO-A-001 快速排序、归并排序、堆排序各有什么特点和适用场景？
• FB-53-CO-A-002 图的基础遍历 BFS 与 DFS 有什么区别？
• FB-53-CO-A-003 动态规划基础思想是什么？
• FB-53-CO-A-004 常见的字符串匹配算法有哪些？
• FB-53-CO-A-005 堆和优先队列有什么关系？
• FB-53-CO-A-006 数据库索引和事务是什么？
• FB-53-CO-A-007 位运算有哪些常见技巧？
• FB-53-CO-A-008 进程和线程有什么区别？
• FB-53-CO-A-009 数组和链表有什么区别？各自适用什么场景？
• FB-53-CO-A-010 栈和队列有什么区别？有哪些应用？
• FB-53-CO-A-011 哈希表（Hash Table）的原理是什么？如何解决冲突？
• FB-53-CO-A-012 什么是二叉树、BST、AVL 树、红黑树？
• FB-53-CO-A-013 什么是动态规划（DP）？请举一个前端中的例子。
• FB-53-CO-A-014 什么是 BFS 和 DFS？
• FB-53-CO-A-015 解释一下 HTTP 缓存机制。

行业特化（2 道）

• FB-56-CO-A-001 云原生趋势如何影响前端部署与工程化？
• FB-56-CO-A-008 如何判断一个行业技术趋势的成熟度？

深入题（301 道）

JavaScript（10 道）

• FB-01-CO-P-001 解释 V8 的垃圾回收机制。
• FB-01-CO-P-002 解释 JavaScript 的事件循环（Event Loop）完整机制。
• FB-01-CO-P-003 解释 JavaScript 的模块化发展历程。
• FB-01-CO-P-004 解释 Generator 和 Iterator 的关系。
• FB-01-CO-P-005 JavaScript 中常见的内存泄漏场景有哪些？如何排查？
• FB-01-CO-P-006 为什么 Proxy 通常要和 Reflect 一起使用？它们的关系是什么？
• FB-01-CO-P-007 解释 JavaScript 的模块循环依赖问题，ESM 和 CommonJS 分别是如何处理的？
• FB-01-CO-P-008 什么是 Iterator / Iterable 协议？如何让一个对象支持 for…of？
• FB-01-CO-P-009 Top-level await 是什么？有什么兼容和降级方案？
• FB-01-CO-P-010 Temporal API 是什么？它解决了 Date 的哪些问题？

TypeScript（21 道）

• FB-02-CO-P-001 infer 关键字的作用是什么？
• FB-02-CO-P-002 什么是 Template Literal Types（模板字面量类型）？
• FB-02-CO-P-003 什么是 Recursive Types（递归类型）？
• FB-02-CO-P-004 什么是 Branded Types（品牌类型）？
• FB-02-CO-P-005 什么是 Declaration Merging（声明合并）？
• FB-02-CO-P-006 什么是 Module Augmentation（模块增强）？
• FB-02-CO-P-007 什么是 Variance（型变）？请解释协变、逆变、双变和不变。
• FB-02-CO-P-008 TypeScript 的类型兼容性是基于名义类型还是结构类型？
• FB-02-CO-P-009 tsconfig.json 中的 strict 模式包含哪些选项？
• FB-02-CO-P-010 Declaration Files（.d.ts）的作用是什么？
• FB-02-CO-P-011 解释 TypeScript 的协变、逆变、双向协变和不变，并举例子。
• FB-02-CO-P-012 什么是类型体操？请实现 TupleToUnion<T>、DeepReadonly<T>。
• FB-02-CO-P-013 Vue3 和 React 中是如何利用 TypeScript 类型系统的？
• FB-02-CO-P-014 什么是 Branded Type？它解决了什么问题？
• FB-02-CO-P-015 TypeScript 的类型兼容性是基于结构类型还是名义类型？
• FB-02-CO-P-016 TypeScript Compiler API 可以做什么？请举一个应用场景。
• FB-02-CO-P-017 什么是递归类型？使用递归类型要注意什么？
• FB-02-CO-P-018 制定一个从 JavaScript 迁移到 TypeScript 的方案
• FB-02-CO-P-019 如何在类型安全与开发效率之间取得平衡？
• FB-02-CO-P-020 TypeScript 装饰器有哪些类型？其原理是什么？
• FB-02-CO-P-021 类型体操的度在哪里？如何保持可维护性？

Browser（13 道）

• FB-03-CO-P-001 详细描述浏览器渲染流水线中的分层（Layer）和光栅化（Raster）阶段。
• FB-03-CO-P-002 合成器线程（Compositor Thread）如何接收并处理输入事件？
• FB-03-CO-P-003 浏览器如何处理 JavaScript 执行对渲染和输入响应的影响？
• FB-03-CO-P-004 浏览器的内存管理机制是怎样的？前端常见的内存泄漏有哪些？
• FB-03-CO-P-005 Service Worker 的缓存更新策略与“activate”陷阱如何解决？
• FB-03-CO-P-006 跨域资源共享中，Credentials 与 CORS 响应头如何配合？
• FB-03-CO-P-007 浏览器 DNS 解析、TCP 连接和 TLS 握手过程如何优化？
• FB-03-CO-P-008 浏览器 DevTools 的 Performance 面板如何分析页面性能瓶颈？
• FB-03-CO-P-009 详细描述 Chrome 的合成器线程（Compositor Thread）和主线程的关系。
• FB-03-CO-P-010 Service Worker 是什么？它能做什么？生命周期是怎样的？
• FB-03-CO-P-011 什么是 Web Vitals？LCP、INP、CLS 分别衡量什么？
• FB-03-CO-P-012 什么是 Passkeys？相比传统密码有什么优势？
• FB-03-CO-P-013 什么是 RenderingNG？它对前端开发者有什么意义？

计算机网络（14 道）

• FB-04-CO-P-001 HTTP/2 的 HPACK、Server Push 以及实际使用中有哪些关键问题？
• FB-04-CO-P-002 TCP 拥塞控制算法 CUBIC 与 BBR 的区别是什么？
• FB-04-CO-P-003 TLS 1.3 相比 TLS 1.2 有哪些改进？
• FB-04-CO-P-004 QUIC 的 0-RTT 与连接迁移是如何实现的？
• FB-04-CO-P-005 WebSocket 的心跳、断线重连与二进制消息如何实现？
• FB-04-CO-P-006 HTTP/2 的服务器推送（Server Push）是什么？为什么现代浏览器逐渐弃用？
• FB-04-CO-P-007 解释 QUIC 协议的设计目标，以及它相比 TCP 的优势。
• FB-04-CO-P-008 什么是 DoH / DoT？它们解决了什么问题？
• FB-04-CO-P-009 WebRTC 的核心组件和基本流程是什么？
• FB-04-CO-P-010 TCP 的 TIME_WAIT 状态为什么存在？过多如何优化？
• FB-04-CO-P-011 HTTP 范围请求（Range Requests）如何实现断点续传？
• FB-04-CO-P-012 QUIC 的连接迁移是如何实现的？
• FB-04-CO-P-013 HTTPS 证书链验证过程及潜在风险
• FB-04-CO-P-014 WebTransport 与 WebSocket 的设计差异

Web 安全（2 道）

• FB-05-CO-P-001 什么是 Prototype Pollution？如何防御？
• FB-05-CO-P-002 WebAuthn / Passkeys 的基本原理和优势是什么？

HTML/CSS（8 道）

• FB-06-CO-P-001 深入解析 CSS 视觉格式化模型。
• FB-06-CO-P-002 will-change 的原理是什么？滥用有什么风险？
• FB-06-CO-P-003 比较 OOCSS、SMACSS、BEM、ITCSS 等 CSS 架构方法论。
• FB-06-CO-P-004 CSS Houdini 是什么？Paint API 能做什么？
• FB-06-CO-P-005 CSS 的 @layer 层叠层有什么作用？
• FB-06-CO-P-006 什么是 CSS Subgrid？它解决了什么问题？
• FB-06-CO-P-007 什么是 CSS 逻辑属性（Logical Properties）？
• FB-06-CO-P-008 渲染合成层（Compositing Layer）与 will-change 的关系？

可访问性（a11y）（9 道）

• FB-07-CO-P-001 浏览器如何构建可访问性树（accessibility tree）？它与 DOM 树的关系是什么？
• FB-07-CO-P-002 屏幕阅读器是如何浏览网页的？虚拟光标与焦点模式有什么区别？
• FB-07-CO-P-003 什么是 ARIA 实时区域（live region）？如何使用 aria-live、aria-atomic、aria-relevant？
• FB-07-CO-P-004 常用的无障碍测试工具有哪些？如何建立测试流程？
• FB-07-CO-P-005 如何实现一个可访问的 Tabs 组件？
• FB-07-CO-P-006 如何实现一个可访问的 Accordion 组件？
• FB-07-CO-P-007 复杂表单验证的无障碍反馈如何设计？
• FB-07-CO-P-008 屏幕阅读器中的地标（landmark）与跳转有什么关系？
• FB-07-CO-P-009 如何为图表（Chart）添加无障碍文本？

数据结构与算法（1 道）

• FB-08-CO-P-001 位运算有哪些常见技巧？在前端中有哪些应用？

设计模式（11 道）

• FB-09-CO-P-001 请详细解释 SOLID 原则，并说明如何在前端落地。
• FB-09-CO-P-002 如何理解 DRY、KISS、YAGNI 原则？
• FB-09-CO-P-003 前端开发中有哪些常见的设计反模式？
• FB-09-CO-P-004 设计模式通常分为哪几类？每类列举 2-3 个常用模式。
• FB-09-CO-P-005 前端框架中体现了哪些设计模式？
• FB-09-CO-P-006 什么是依赖注入与 IoC 容器？
• FB-09-CO-P-007 状态模式与状态机有什么区别？
• FB-09-CO-P-008 组合模式在前端组件树中如何应用？
• FB-09-CO-P-009 责任链模式适合什么场景？
• FB-09-CO-P-010 备忘录模式在前端有哪些应用？
• FB-09-CO-P-011 桥接模式解决了什么问题？

构建工具（16 道）

• FB-10-CO-P-001 Webpack Module Federation 的原理是什么？解决了什么问题？
• FB-10-CO-P-002 Tree Shaking 的底层原理是什么？为什么有时会失效？
• FB-10-CO-P-003 HMR 的底层实现原理是什么？
• FB-10-CO-P-004 Source Map 的各种类型有什么区别？如何选择？
• FB-10-CO-P-005 Webpack Plugin 的生命周期和 Tapable 机制是怎样的？
• FB-10-CO-P-006 Vite 的依赖预构建（Pre-bundle）原理和作用是什么？
• FB-10-CO-P-007 Babel 的编译流程是怎样的？AST 转换在这个过程中起什么作用？
• FB-10-CO-P-008 Webpack 5 的 Persistent Caching 原理是什么？如何配置？
• FB-10-CO-P-009 Vite 为什么要用 esbuild 对依赖进行预构建？
• FB-10-CO-P-010 Rollup 和 Webpack 的 Tree Shaking 实现有什么差异？
• FB-10-CO-P-011 Babel Plugin 中的 visitor 模式如何遍历和修改 AST？
• FB-10-CO-P-012 Webpack 中的 Dependency Graph 和 Module Graph 有什么区别？
• FB-10-CO-P-013 Webpack 的持久化缓存（Persistent Cache）是如何工作的？
• FB-10-CO-P-014 Vite/Rollup 插件钩子与 Unplugin 的统一插件模型是怎样的？
• FB-10-CO-P-015 SWC 与 esbuild 的异同和适用场景分别是什么？
• FB-10-CO-P-016 Webpack 的 Module Graph 和 Chunk Graph 有什么区别？

Monorepo（1 道）

• FB-11-CO-P-001 Monorepo 中的版本一致性策略有哪些？

CI/CD（1 道）

• FB-12-CO-P-025 什么是 CI/CD 中的 observability？

代码质量与测试（17 道）

• FB-13-CO-P-001 Jest 中 Mock 模块有哪些常见陷阱？
• FB-13-CO-P-002 什么是契约测试（Contract Testing）？前端如何应用？
• FB-13-CO-P-003 什么是变异测试（Mutation Testing）？它如何弥补覆盖率的不足？
• FB-13-CO-P-004 什么是属性化测试（Property-Based Testing）？
• FB-13-CO-P-005 大规模测试套件如何加速执行？
• FB-13-CO-P-006 代码覆盖率是如何被收集的？简单说明 Istanbul 的原理。
• FB-13-CO-P-007 使用 React Testing Library 测试组件时应避免哪些反模式？
• FB-13-CO-P-008 如何评估一套测试套件是否“有效”？
• FB-13-CO-P-009 什么是测试污染（Test Pollution）？有哪些表现和治理方法？
• FB-13-CO-P-010 什么是测试债务（Test Debt）？如何偿还？
• FB-13-CO-P-011 前端测试如何处理浏览器兼容性与设备差异？
• FB-13-CO-P-012 什么是 Living Documentation？测试如何作为活文档？
• FB-13-CO-P-013 如何设计前端异常监控与可观测性测试？
• FB-13-CO-P-014 什么是 Hermetic Test（密封测试）？前端如何实现？
• FB-13-CO-P-015 如何评估一套测试套件是否“有效”？
• FB-13-CO-P-016 什么是 Smoke Test 与 Canary Test？前端如何设计？
• FB-13-CO-P-017 什么是 mutation testing？

设计系统与组件库（8 道）

• FB-14-CO-P-001 什么是复合组件（Compound Components）模式？
• FB-14-CO-P-002 受控组件与非受控组件同时支持时，内部状态如何设计？
• FB-14-CO-P-003 Design Token 如何与 Figma 设计变量保持同步？
• FB-14-CO-P-004 Render Props、Hooks 与 Compound Components 三种组合模式如何取舍？
• FB-14-CO-P-005 组件库 Monorepo 工程结构应如何组织？
• FB-14-CO-P-006 什么是 Design Token 的 W3C 社区组规范？
• FB-14-CO-P-007 组件库中的状态机与交互模式如何抽象？
• FB-14-CO-P-008 如何评估组件库的 bundle size 与运行时性能？

React（3 道）

• FB-15-CO-P-022 React 18 新增了哪些 Hooks？useId、useSyncExternalStore、useInsertionEffect 分别解决什么问题？
• FB-15-CO-P-023 什么是 React Server Actions？
• FB-15-CO-P-024 React 19 的 use hook 有什么作用？

Vue（5 道）

• FB-16-CO-P-022 script setup 解决了什么问题？defineProps、defineEmits、defineExpose 怎么用？
• FB-16-CO-P-023 Vue 3 中 toRef、toRefs、isRef、unref 有什么区别？
• FB-16-CO-P-024 Vue 3 的 defineModel 是什么？
• FB-16-CO-P-025 Vue 中的 h 函数和 render 函数
• FB-16-CO-P-026 Vue 中的 Suspense 和 async setup

跨端技术（1 道）

• FB-17-CO-P-019 Flutter 中常见的状态管理方案有哪些？如何选择？

AI 工程化（8 道）

• FB-18-CO-P-019 什么是 MCP（Model Context Protocol）？它解决了什么问题？
• FB-18-CO-P-020 什么是 GraphRAG？与传统 RAG 有何不同？
• FB-18-CO-P-050 什么是 RLHF 和对齐？对前端 AI 产品有什么影响？
• FB-18-CO-P-051 如何降低 LLM 应用中的幻觉问题？
• FB-18-CO-P-052 如何评估一个 RAG 系统的效果？
• FB-18-CO-P-053 什么是 Vibe Coding？前端工程师应如何适应？
• FB-18-CO-P-054 如何在前端实现多模态输入（如图片、语音）的 AI 应用？
• FB-18-CO-P-055 如何设计 LLM 的 Fallback 策略？

Node.js / BFF（9 道）

• FB-19-CO-P-019 Node.js 的内存管理是怎样的？如何排查内存泄漏？
• FB-19-CO-P-021 gRPC 相比 REST 有什么优势？它基于 HTTP/2 的哪些特性？
• FB-19-CO-P-022 微服务之间有哪些通信模式？分布式事务如何解决？
• FB-19-CO-P-023 数据库连接池、索引优化和慢查询排查有哪些实践经验？
• FB-19-CO-P-053 Node.js 中的 AsyncLocalStorage / Async Hooks 有什么作用？
• FB-19-CO-P-056 GraphQL BFF 相比 REST BFF 有什么优劣？落地时要注意什么？
• FB-19-CO-P-057 谈谈 NestJS 的 Guard、Interceptor、Pipe 分别解决什么问题？
• FB-19-CO-P-058 如何为 Node.js BFF 服务设计可观测性方案？
• FB-19-CO-P-059 Node.js 中的 Worker Threads 使用场景

Git 工作流与变更管理（5 道）

• FB-20-CO-P-019 Git LFS 是什么？什么时候应该使用？
• FB-20-CO-P-020 Git submodule 和 subtree 有什么区别？如何选择？
• FB-20-CO-P-023 git reflog 能帮你恢复哪些误操作？
• FB-20-CO-P-054 git rerere 是什么？如何减少重复冲突？
• FB-20-CO-P-055 shallow clone 和 git filter-repo 各适用于什么场景？

开发者体验与工程效能（1 道）

• FB-21-CO-P-001 Webpack 构建过程的可观测性指标有哪些？如何通过 stats 与 telemetry 实现

部署与 SRE（3 道）

• FB-22-CO-P-022 如何设计前端监控告警体系？
• FB-22-CO-P-023 请解释 Kubernetes Ingress/Service 流量切分的工作原理，及其在前端容器化部署中的应用。
• FB-22-CO-P-024 Kubernetes Ingress 流量切分

包管理与供应链安全（3 道）

• FB-23-CO-P-019 什么是依赖地狱？如何解决版本冲突、循环依赖与依赖分身？
• FB-23-CO-P-020 node_modules 体积膨胀的原因及包管理器层面的优化原理
• FB-23-CO-P-021 node_modules 体积优化原理

前端运维与监控（1 道）

• FB-24-CO-P-002 如何制定前端 SLI/SLO？

系统架构设计（9 道）

• FB-25-CO-P-003 整洁架构（Clean Architecture）和六边形架构（Hexagonal Architecture）如何在前端落地？
• FB-25-CO-P-006 CQRS 和事件溯源（Event Sourcing）在前端有哪些应用场景？
• FB-25-CO-P-012 什么是数据一致性？前端如何保证最终一致性？
• FB-25-CO-P-013 什么是无服务器/边缘渲染架构？前端如何落地？
• FB-25-CO-P-014 什么是防腐层？为什么前端也需要它？
• FB-25-CO-P-015 什么是“开闭原则”？前端中如何实现？
• FB-25-CO-P-016 整洁架构与六边形架构如何在前端落地
• FB-25-CO-P-017 Bounded Context 如何映射到前端架构
• FB-25-CO-P-018 API Composition 与 GraphQL BFF 的取舍

微前端（5 道）

• FB-26-CO-P-001 微前端有哪些常见陷阱？如何避免？
• FB-26-CO-P-002 微前端中如何保证用户体验一致性？
• FB-26-CO-P-003 Module Federation 的工作原理
• FB-26-CO-P-004 微前端中的 JS 沙箱实现方式
• FB-26-CO-P-005 微前端中的公共状态管理反模式

性能工程（3 道）

• FB-27-CO-P-005 实验室数据（Lab Data）和真实用户数据（Field Data / RUM）有什么区别？分别适用于什么场景？
• FB-27-CO-P-006 Resource Hints 的使用场景
• FB-27-CO-P-007 浏览器合成器线程与主线程的关系

质量保障（10 道）

• FB-28-CO-P-018 测试覆盖率有哪些常见陷阱？
• FB-28-CO-P-019 你如何保证前端代码的可测试性？
• FB-28-CO-P-020 代码覆盖率高是否等于代码质量高？为什么？
• FB-28-CO-P-021 什么是功能开关（Feature Toggle）？它和质量保障有什么关系？
• FB-28-CO-P-022 如何度量前端代码质量？
• FB-28-CO-P-023 什么是测试驱动开发（TDD）
• FB-28-CO-P-024 什么是 Mutation Testing
• FB-28-CO-P-025 可访问性测试如何纳入质量保障
• FB-28-CO-P-026 什么是持续测试
• FB-28-CO-P-027 什么是左移测试

数据与状态管理（12 道）

• FB-29-CO-P-019 状态机在前端状态管理中的应用是什么？XState 的核心概念有哪些？
• FB-29-CO-P-020 乐观更新和悲观更新如何选择？如何处理失败回滚？
• FB-29-CO-P-021 离线同步和数据冲突解决有哪些策略？
• FB-29-CO-P-023 Event Sourcing 和 CQRS 在前端如何应用？
• FB-29-CO-P-024 Repository 模式和 Data Mapper 模式在前端数据层有什么区别？
• FB-29-CO-P-025 如何处理跨组件、跨页面的状态共享与持久化？
• FB-29-CO-P-026 集中式状态与局部状态的边界
• FB-29-CO-P-027 乐观更新与悲观更新的取舍
• FB-29-CO-P-028 前端状态管理中的派生状态
• FB-29-CO-P-029 什么是时间旅行调试
• FB-29-CO-P-030 前端状态管理中的副作用处理
• FB-29-CO-P-031 状态管理中的selector模式

可观测性（6 道）

• FB-30-CO-P-018 分布式链路追踪的核心概念是什么？
• FB-30-CO-P-021 可观测性数据成本通常有哪些？如何优化？
• FB-30-CO-P-022 Trace 在前端如何与后端关联
• FB-30-CO-P-023 什么是 SLO、SLI、SLA
• FB-30-CO-P-024 前端可观测与业务埋点的关系
• FB-30-CO-P-025 什么是 OpenTelemetry

安全架构（6 道）

• FB-31-CO-P-001 什么是安全左移（Shift Left Security）？前端如何落地？
• FB-31-CO-P-002 前端密钥管理有哪些方案？各自的适用场景是什么？
• FB-31-CO-P-003 隐私合规（GDPR/个人信息保护法）对前端有哪些技术要求？
• FB-31-CO-P-004 CORS 与前端安全的关系
• FB-31-CO-P-005 什么是安全标头及其前端价值
• FB-31-CO-P-006 HSTS 与前端安全

实时与协同（7 道）

• FB-32-CO-P-001 CRDT 的原理与分类是什么？
• FB-32-CO-P-002 协同编辑中的光标/选区同步有什么难点？
• FB-32-CO-P-003 消息去重与幂等如何保证？
• FB-32-CO-P-004 WebRTC 中 TURN 和媒体协商的作用是什么？
• FB-32-CO-P-005 实时系统中的消息顺序与一致性
• FB-32-CO-P-006 什么是操作转换 OT 与 CRDT
• FB-32-CO-P-007 WebRTC 在前端实时系统中的应用

国际化（7 道）

• FB-33-CO-P-001 微前端与组件库国际化如何协同？
• FB-33-CO-P-002 RTL 与复杂组件（图表、日历）如何支持？
• FB-33-CO-P-003 自动翻译与人工校对流程如何设计？
• FB-33-CO-P-004 设计文案与代码如何解耦？
• FB-33-CO-P-005 RTL 语言布局如何支持
• FB-33-CO-P-006 翻译管理系统如何与前端集成
• FB-33-CO-P-007 货币与数字格式化

可视化与图形（5 道）

• FB-34-CO-P-020 GPU 加速原理是什么？WebGL 中顶点着色器与片元着色器如何协同工作？
• FB-34-CO-P-023 颜色映射、视觉编码与感知均匀性在数据可视化中有何影响？
• FB-34-CO-P-024 D3 与 ECharts 的取舍
• FB-34-CO-P-025 颜色与主题系统在可视化中的设计
• FB-34-CO-P-026 可视化中的坐标系与投影

Serverless/Edge（11 道）

• FB-35-CO-P-001 边缘函数与微服务边界如何划分？
• FB-35-CO-P-002 多区域部署与一致性如何权衡？
• FB-35-CO-P-003 Serverless 框架选型与部署如何决策？
• FB-35-CO-P-004 Serverless 中的隐私合规如何处理？
• FB-35-CO-P-005 函数编排与 workflow 在 Serverless 中如何实现？
• FB-35-CO-P-006 边缘 AI 推理有哪些应用场景与挑战？
• FB-35-CO-P-007 Serverless 冷启动与温启动
• FB-35-CO-P-008 Serverless 的供应商锁定如何应对
• FB-35-CO-P-009 边缘渲染与中心 SSR 的取舍
• FB-35-CO-P-010 什么是分布式跟踪在 Serverless 中的挑战
• FB-35-CO-P-011 什么是 OCI 容器与 Serverless 容器

前端数据工程（10 道）

• FB-36-CO-P-001 如何保证埋点数据的准确性与完整性？
• FB-36-CO-P-002 时序数据与漏斗分析在前端如何实现？
• FB-36-CO-P-003 用户画像与标签体系如何设计？
• FB-36-CO-P-004 实时与离线数据口径不一致怎么办？
• FB-36-CO-P-005 数据血缘与影响分析在前端数据工程中的作用是什么？
• FB-36-CO-P-006 数据湖、数据仓库、数据库的区别
• FB-36-CO-P-007 什么是指标口径与维度
• FB-36-CO-P-008 什么是数据质量六性
• FB-36-CO-P-009 什么是数据产品化
• FB-36-CO-P-010 数据工程中的隐私与合规

业务洞察（9 道）

• FB-37-CO-P-004 产品生命周期不同阶段的增长策略与前端技术投入重点是什么？
• FB-37-CO-P-005 B2B SaaS 产品的免费试用到期后，如何设计转化与挽留策略？
• FB-37-CO-P-006 如何量化一次前端重构对业务的真实价值？
• FB-37-CO-P-007 平台型业务中，如何防止“薅羊毛”和欺诈行为损害生态？
• FB-37-CO-P-008 如何分析一个产品的“增长飞轮”并找到前端杠杆点？
• FB-37-CO-P-009 多业务线公司中，如何平衡通用中台与业务定制化需求？
• FB-37-CO-P-010 如何利用波特五力模型分析前端技术选型对竞争壁垒的影响？
• FB-37-CO-P-011 什么是护城河？技术如何成为企业的护城河？
• FB-37-CO-P-012 如何理解“技术债”与“业务债”？前端如何管理这两类债务？

鸿蒙 ArkTS / HarmonyOS（7 道）

• FB-46-CO-P-019 鸿蒙中如何进行 NDK / C++ 开发？适用场景有哪些？
• FB-46-CO-P-020 鸿蒙应用如何做跨设备适配？响应式布局有哪些关键能力？
• FB-46-CO-P-022 鸿蒙应用状态流转（Continuation）是什么？如何实现？
• FB-46-CO-P-023 鸿蒙应用如何适配不同设备（手机、平板、折叠屏、车机）？
• FB-46-CO-P-024 鸿蒙的分布式能力有哪些？前端如何调用？
• FB-46-CO-P-025 鸿蒙应用如何做性能优化？
• FB-46-CO-P-026 鸿蒙的方舟编译器有什么特点？

Flutter（1 道）

• FB-47-CO-P-007 Flutter 的测试体系是怎样的？Unit、Widget、Integration 测试各负责什么？

Electron（1 道）

• FB-48-CO-P-005 Electron 如何集成原生模块（Native Addon）？

WebGPU / 图形学（9 道）

• FB-50-CO-P-017 Compute Shader 与渲染管线有什么关系和区别？
• FB-50-CO-P-019 Compute Shader 中的 Workgroup 与线程模型是怎样的？
• FB-50-CO-P-020 哪些任务适合用 GPU 计算，哪些仍应留在 CPU？
• FB-50-CO-P-022 3D 场景中常用的空间索引结构有哪些？如何在 GPU 中使用？
• FB-50-CO-P-023 WebGPU 的 Render Bundle 是什么？有什么优化作用？
• FB-50-CO-P-024 WebGPU 中如何处理多采样抗锯齿（MSAA）？
• FB-50-CO-P-025 WebGPU 的 Occlusion Query 和 Timestamp Query 有什么作用？
• FB-50-CO-P-026 WebGPU 中如何实现阴影映射（Shadow Mapping）？
• FB-50-CO-P-027 什么是 PBR 渲染？前端如何实现简化版 PBR？

多媒体（Multimedia）（3 道）

• FB-51-CO-P-019 Widevine、FairPlay、PlayReady 三种 DRM 方案有什么区别？
• FB-51-CO-P-020 什么是音视频同步（A/V Sync）？前端如何保证？
• FB-51-CO-P-021 什么是 CMAF？它如何统一 HLS 和 DASH？

低代码（1 道）

• FB-52-CO-P-003 低代码平台的出码（Code Generation）和二次开发如何设计？

计算机基础（7 道）

• FB-53-CO-P-001 红黑树和 B+树各自有什么特点？
• FB-53-CO-P-002 一致性哈希是什么？解决了什么问题？
• FB-53-CO-P-003 垃圾回收机制有哪些常见策略？
• FB-53-CO-P-004 事件驱动与 IO 模型有哪些？
• FB-53-CO-P-005 编译原理基础对前端开发有什么帮助？
• FB-53-CO-P-006 设计模式在前端有哪些常见应用？
• FB-53-CO-P-007 TCP 和 UDP 有什么区别？

行业特化（1 道）

• FB-56-CO-P-005 Web3/区块链对前端开发的影响与挑战

架构题（29 道）

构建工具（8 道）

• FB-10-CO-R-001 Monorepo 场景下的构建方案如何选型？
• FB-10-CO-R-002 模块联邦的架构设计、共享依赖与版本冲突如何解决？
• FB-10-CO-R-003 Rspack、Parcel、Turbopack 等下一代构建工具的架构有何异同？
• FB-10-CO-R-004 前端构建产物安全与供应链安全如何保障？
• FB-10-CO-R-005 如何设计跨团队的前端构建规范与最佳实践？
• FB-10-CO-R-006 前端构建体系的演进路线应如何规划？
• FB-10-CO-R-008 下一代构建工具 Rolldown、Farm、Turbopack 的架构有何异同？
• FB-10-CO-R-009 未来前端构建工具的发展趋势是什么？

Monorepo（1 道）

• FB-11-CO-R-001 Monorepo 与 Polyrepo 在长期演进中的取舍

CI/CD（1 道）

• FB-12-CO-R-001 CI/CD 的未来趋势是什么？

代码质量与测试（1 道）

• FB-13-CO-R-001 代码质量与交付速度如何平衡？

AI 工程化（1 道）

• FB-18-CO-R-059 作为架构师如何界定大模型能力边界并据此设计前端架构？

开发者体验与工程效能（1 道）

• FB-21-CO-R-001 Babel 插件体系的可观测性如何设计？如何度量转译耗时与插件影响

部署与 SRE（2 道）

• FB-22-CO-R-001 什么是自动扩容？它与前端 Web Vitals 性能指标有什么核心区别与联系？
• FB-22-CO-R-002 自动扩容与 Web Vitals 的关系

包管理与供应链安全（2 道）

• FB-23-CO-R-001 包管理器选型与 workspace 机制有什么核心区别？
• FB-23-CO-R-002 包管理器选型与 workspace 机制的核心区别

系统架构设计（6 道）

• FB-25-CO-R-004 架构评审应该关注哪些方面？
• FB-25-CO-R-015 架构师如何进行风险建模与失效模式分析？
• FB-25-CO-R-016 什么是演进式架构？如何设计可演进的系统？
• FB-25-CO-R-017 你在设计前端架构时，如何平衡“交付速度”和“代码质量”？
• FB-25-CO-R-018 什么是六边形架构？它如何解决前端测试难的问题？
• FB-25-CO-R-019 什么是反脆弱前端架构

微前端（2 道）

• FB-26-CO-R-001 你如何看待 iframe 作为微前端方案？
• FB-26-CO-R-002 在微前端架构中，主应用应该承担哪些职责？子应用应该承担哪些职责？

质量保障（3 道）

• FB-28-CO-R-001 你如何平衡“快速迭代”和“高质量”？
• FB-28-CO-R-002 前端在 DevOps 中应该承担什么角色？
• FB-28-CO-R-003 前端质量保障中，最容易被忽视但影响巨大的问题是什么？

安全架构（1 道）

• FB-31-CO-R-001 前端零信任安全架构实践