Junior(初级)
本文件按岗位层级 Junior(初级) 组织前端面试题索引,并按难度分组。 共收录 4294 道题(基础 993 / 进阶 1406 / 深入 1123 / 架构 772)。 Junior(初级) 难度为推荐阅读重点,其他难度可作为基础回顾或进阶扩展。 每道题都附带完整参考答案与评分维度,点击链接可查看原文。
基础题(993 道)
JavaScript(33 道)
- FB-01-CA-B-001 == 和 === 的区别?什么情况下推荐使用 ==?
- FB-01-CA-B-002 下面代码的输出是什么?
- FB-01-CA-B-003 下面代码的输出是什么?
- FB-01-CA-B-004 下面代码的输出是什么?
- FB-01-CA-B-005 下面代码的输出是什么?如何正确输出 0、1、2?
- FB-01-CD-B-001 手写一个数组去重函数。
- FB-01-CD-B-002 用 ES6+ 实现对象/数组的浅拷贝与合并,并比较 Object.assign 与展开运算符的区别。
- FB-01-CD-B-003 手写 Array.prototype.flat 的实现
- FB-01-CD-B-004 手写 JSON.stringify 的简化版
- 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 在垃圾回收上有什么差异?
- FB-01-CP-B-001 == 和 === 的区别?什么情况下推荐使用 ==?
- FB-01-CP-B-002 什么是变量提升?let、const、var 的区别?
- FB-01-CP-B-003 箭头函数和普通函数的区别?
- FB-01-CP-B-004 简述事件循环,宏任务和微任务有什么区别?
- FB-01-SC-B-001 解释一下闭包,并举一个实际应用场景。
TypeScript(26 道)
- FB-02-CA-B-001 分析以下代码的类型行为
- FB-02-CA-B-002 分析可选属性与默认值的类型行为
- FB-02-CA-B-003 分析联合类型的类型收窄行为
- FB-02-CD-B-001 手写一个类型安全的通用函数
- FB-02-CD-B-002 手写一个类型安全的 identity 函数
- FB-02-CD-B-003 什么是泛型?写一个实际应用的例子。
- 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 有什么区别?
- FB-02-CP-B-001 interface 和 type 有什么区别?
- FB-02-CP-B-002 any、unknown、never 的区别?
- FB-02-CP-B-003 readonly 和 const 有什么区别?
- FB-02-CP-B-004 如何实现可选属性?? 和 undefined 有什么区别?
Browser(26 道)
- 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?
- FB-03-CP-B-001 cookie、localStorage、sessionStorage、IndexedDB 的区别?
- FB-03-CP-B-002 <script> 标签的 defer 和 async 有什么区别?
- FB-03-PE-B-001 什么是强缓存和协商缓存?分别由哪些 HTTP 头控制?
- FB-03-SS-B-001 从输入 URL 到页面显示,浏览器经历了哪些步骤?
计算机网络(22 道)
- 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 的组成结构及各部分作用
- FB-04-CP-B-001 OSI 七层模型和 TCP/IP 四层模型有什么区别?
- FB-04-EN-B-001 CDN 的原理是什么?有什么作用?
- FB-04-SC-B-001 TCP 和 UDP 有什么区别?各适用于什么场景?
- FB-04-SE-B-001 HTTPS 为什么安全?TLS 握手做了什么?
Web 安全(13 道)
- 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 有哪些常见取值?对隐私有什么影响?
- FB-05-SE-B-001 localStorage 和 sessionStorage 的安全风险有哪些?
- FB-05-SE-B-002 前端视角下,SQL 注入是如何发生的?如何防御?
- FB-05-SE-B-003 为什么说“永远不信任用户输入”?前端应如何处理不可信数据?
- FB-05-SE-B-004 什么是点击劫持(Clickjacking)?如何防御?
HTML/CSS(21 道)
- FB-06-CD-B-001 如何实现一个三栏布局,中间自适应?
- 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 有哪些常见属性及作用?
- FB-06-CP-B-001 CSS 中 em、rem、px、vw 有什么区别?如何选择?
可访问性(a11y)(17 道)
- FB-07-CA-B-001 下面这段代码存在哪些可访问性问题?
- 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 和用户体验有什么双重价值?
数据结构与算法(21 道)
- FB-08-CD-B-001 用 JavaScript 实现数组求和、最大值、最小值函数。
- FB-08-CD-B-002 反转一个字符串或数组。
- FB-08-CD-B-003 判断一个字符串是否是回文。
- FB-08-CD-B-004 用两个栈实现一个队列。
- FB-08-CD-B-005 有效的括号。
- FB-08-CD-B-006 两数之和。
- FB-08-CD-B-007 实现二叉树的前序、中序、后序遍历。
- FB-08-CD-B-008 斐波那契数列。
- FB-08-CD-B-009 手写快速排序并分析复杂度
- FB-08-CD-B-010 手写归并排序
- FB-08-CD-B-011 手写二分查找及其变体
- 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 如何理解前缀和与差分数组?
设计模式(14 道)
- 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 工厂方法模式与简单工厂有什么区别?
- FB-09-CP-B-001 观察者模式和发布订阅模式有什么区别?
构建工具(29 道)
- FB-10-CA-B-001 分析下面 Webpack 配置中 noParse 和 alias 的作用
- FB-10-CA-B-018 分析下面 Webpack 配置中 chunkFilename 和 publicPath 的作用。
- FB-10-CA-B-019 分析下面 Webpack 配置中 output.library 的作用
- FB-10-CD-B-001 手写一个 Babel Plugin,将 console.log 替换为 console.info
- FB-10-CD-B-020 手写一个 Babel Plugin,删除代码中的所有 console.log。
- FB-10-CD-B-021 手写一个简单的 Webpack Loader
- 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?它解决了什么问题?
- FB-10-EN-B-001 前端项目如何根据环境选择不同的构建配置?
- FB-10-EN-B-019 前端构建脚本中如何管理多环境(dev/test/prod)配置?
- FB-10-EN-B-020 如何配置 Webpack 的 devServer 实现代理和 HMR?
- FB-10-PE-B-001 构建产物体积过大时有哪些基础排查方法?
Monorepo(29 道)
- 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 边界?
- FB-11-EN-B-001 如何初始化一个最小的 pnpm workspace Monorepo?
- FB-11-EN-B-002 如何在 Monorepo 中统一 TypeScript 配置?
- FB-11-EN-B-003 如何给 Monorepo 添加一个新的 internal package?
- FB-11-EN-B-016 如何在 Monorepo 中统一 ESLint / Prettier 配置?
- FB-11-EN-B-018 如何给 Monorepo 中的 internal package 添加测试?
- FB-11-EN-B-021 changeset 文件的作用是什么?它的基本结构是怎样的?
- FB-11-EN-B-022 如何在 Monorepo 中配置统一的 lint 和 format?
- FB-11-EN-B-023 如何在 Monorepo 中统一版本发布?
CI/CD(29 道)
- 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?
- FB-12-EN-B-002 什么是 Pipeline as Code?它有什么好处?
- FB-12-EN-B-003 GitHub Actions 的核心概念有哪些?
- FB-12-EN-B-004 GitLab CI 的核心概念有哪些?
- FB-12-EN-B-005 Jenkins Pipeline 的核心概念有哪些?
- FB-12-EN-B-007 Docker 在前端 CI/CD 中通常扮演什么角色?
- FB-12-EN-B-009 前端 CI/CD 中如何设计依赖与构建缓存策略?
- FB-12-EN-B-011 CI/CD 中的 Matrix Build 有什么作用?前端如何应用?
- FB-12-EN-B-013 CI/CD 中 lockfile 的作用是什么?出现冲突时如何处理?
- FB-12-EN-B-014 前端项目在 CI/CD 中如何安全地注入环境变量?
- FB-12-EN-B-016 如何在 CI/CD 中安全地实现自动化依赖更新?
- FB-12-EN-B-018 Git Hooks 是什么?如何与 CI/CD 配合?
- FB-12-EN-B-020 什么是 Self-Hosted Runner?什么时候应该使用?
- FB-12-EN-B-022 CI/CD 中的并行(Parallelism)与并发(Concurrency)有什么区别?
- FB-12-EN-B-024 CI/CD 中的通知机制应该如何设计?
- FB-12-EN-B-025 GitHub Actions 中如何缓存依赖?
- FB-12-EN-B-026 如何在 CI 中并行执行测试?
代码质量与测试(31 道)
- FB-13-CA-B-001 下面 Jest 测试的输出和结果是什么?
- FB-13-CA-B-002 下面 Jest 测试的输出和结果是什么?
- FB-13-CA-B-003 下面这段 Jest 代码中的断言会成功吗?
- 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 什么是测试金字塔?
- FB-13-EN-B-001 ESLint 的 extends、plugins、rules、presets 有什么区别?
- FB-13-EN-B-002 如何用 npm scripts 一键运行 lint、format 与测试?
- FB-13-EN-B-003 .editorconfig 与 Prettier 有什么区别?
- FB-13-EN-B-004 如何配置 ESLint 的共享规则?
- FB-13-EN-B-005 如何在 CI 中统一代码质量检查?
设计系统与组件库(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(23 道)
- FB-15-CA-B-005 下面代码点击按钮后 count 的值是多少?为什么?
- FB-15-CA-B-036 下面 useEffect 的代码输出什么?为什么?
- 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(23 道)
- FB-16-CA-B-001 分析以下代码的输出
- FB-16-CD-B-001 手写一个支持删除的 TodoItem 组件
- 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 有什么优缺点?
- FB-16-CP-B-001 Vue 开发与原生 HTML/JS 开发相比有哪些优缺点?
- FB-16-EN-B-001 Vue CLI 和 Vite 创建项目有什么区别?
- FB-16-PE-B-001 如何避免 Vue 组件不必要的重渲染?
- FB-16-SC-B-001 如何封装一个可复用的 Vue Button 组件?
- FB-16-SE-B-001 Vue 中常见的 XSS 风险有哪些?如何防范?
跨端技术(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 工程化(33 道)
- FB-18-CA-B-001 分析以下调用 OpenAI API 的代码是否存在安全隐患
- FB-18-CA-B-035 下面这段前端调用大模型的代码存在什么问题?
- FB-18-CD-B-001 手写一个调用大模型 API 并解析 JSON 响应的函数
- FB-18-CD-B-002 用 JavaScript 实现一个简单的 Prompt 模板渲染函数
- FB-18-CD-B-034 手写一个调用流式大模型 API 的 React Hook
- 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 模式?
- FB-18-CP-B-040 如何向非技术人员解释 RAG?
- FB-18-EN-B-037 前端接入大模型 API 时有哪些常见工程化问题?
- FB-18-PE-B-039 如何降低前端 AI 功能的首屏加载时间?
- FB-18-SC-B-036 如何为技术文档站点设计 AI 问答助手?
- FB-18-SC-B-037 生产环境中,前端为什么不建议直接调用大模型 API?
- FB-18-SE-B-038 前端展示 AI 生成内容时应注意哪些安全风险?
Node.js / BFF(25 道)
- FB-19-CD-B-038 请手写一个极简的 Node.js HTTP 服务器,支持 GET /hello 返回 JSON
- 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 有什么区别?
- FB-19-CP-B-001 Node.js 的事件循环和浏览器有什么区别?
- FB-19-CP-B-002 SSR、SSG、ISR 应该怎么选择?
- FB-19-SC-B-001 生产环境为什么不建议前端直接调用后端通用服务?
Git 工作流与变更管理(26 道)
- 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 是什么?
- FB-20-EN-B-001 描述 Git Flow 的主要分支和流程。
- FB-20-SC-B-001 解释 git merge 和 git rebase 的区别及适用场景。
开发者体验与工程效能(30 道)
- FB-21-CA-B-001 分析下面这段 barrel export 导致构建性能与产物体积问题的代码,并说明原因
- 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 中的耗时度量方法
- FB-21-CP-B-001 在 Docker 化前端工作流中如何落地 ESLint 并保证本地与 CI 一致性
- FB-21-EN-B-002 前端脚手架通常要解决哪些问题?举例说明 create-vite 或 create-next-app 的设计目标。
- FB-21-EN-B-005 Git Hooks 最常见的两个场景是什么?简述 pre-commit 和 commit-msg 的作用。
- FB-21-EN-B-006 TypeScript 项目中为什么要拆分 tsconfig.json?常见拆分策略是什么?
- FB-21-EN-B-032 package.json 中的 scripts 设计应遵循哪些原则?
- FB-21-EN-B-034 .editorconfig 的作用是什么?前端项目中通常如何配置?
- FB-21-EN-B-036 前端项目的 README 应该包含哪些关键信息?
- FB-21-EN-B-038 CI/CD 的基本概念是什么?它如何影响开发者体验?
- FB-21-EN-B-067 前端项目中的 .gitignore 应该忽略哪些文件?忽略不当会有什么风险?
- FB-21-EN-B-069 如何为前端项目选择合适的包管理器?
- FB-21-EN-B-071 前端项目中的环境变量有哪些安全注意事项?
- FB-21-EN-B-072 如何通过 ESLint 配置与错误信息优化提升开发者体验
- FB-21-PE-B-001 平台工程团队如何度量和优化 pnpm 依赖安装性能
- FB-21-SC-B-001 如何为前端构建流水线设计可观测性方案以持续优化构建性能
- FB-21-SD-B-001 如何设计团队级 Prettier 与编辑器配置一致性方案
- FB-21-SE-B-001 Jest 测试运行中的安全风险与敏感信息防护要点
部署与 SRE(24 道)
- FB-22-CA-B-001 下面一段 Nginx 缓存配置存在什么风险?请分析原因。
- 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 什么是服务发现?
- FB-22-CP-B-001 结合 RPO 与前端 HTTP 缓存机制,谈谈潜在风险与防御实践。
- FB-22-CP-B-002 灰度发布和 A/B 测试有什么区别?
- FB-22-EN-B-005 前端构建产物如何做版本化管理?
- FB-22-EN-B-006 如何在 CI/CD 中落地前端静态资源的 HTTP 缓存策略,避免用户加载到旧版本?
- FB-22-EN-B-007 前端部署为什么要给 JS/CSS 加 hash?
- FB-22-EN-B-008 什么是 CDN?前端如何利用 CDN?
- FB-22-PE-B-001 前端静态资源访问量翻倍时,如何排查并优化 CDN/边缘缓存扩容中的性能瓶颈?
- FB-22-SC-B-001 电商大促期间前端静态资源带宽突增,如何设计 CDN 带宽应急方案?
- FB-22-SD-B-001 如何设计前端应用的 CI/CD 镜像构建系统,兼顾构建速度与产物一致性?
- FB-22-SE-B-001 前端资源长期缓存可能带来哪些安全风险?如何防御缓存污染与 RPO 攻击?
包管理与供应链安全(24 道)
- FB-23-CA-B-001 分析以下 workspace 引用代码的输出与原因
- 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?
- FB-23-CP-B-001 结合 package.json 规范与 lockfile 管理,谈谈依赖标准化的实践经验
- FB-23-EN-B-001 在 pnpm 项目中如何检测并清理幽灵依赖?
- FB-23-PE-B-001 pnpm install 因版本冲突导致解析变慢,如何排查与优化?
- FB-23-SC-B-001 如何为 pnpm 项目启用 npm provenance 并保证 lockfile 与构建来源可审计?
- FB-23-SD-B-001 如何设计企业内部 npm 代理 Registry,实现跨项目依赖去重与统一缓存?
- FB-23-SE-B-001 npm install 生命周期脚本(postinstall)有哪些供应链风险?企业应如何防御?
前端运维与监控(8 道)
- 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 前端埋点有哪些类型?设计埋点方案时要注意什么?
- FB-24-EN-B-007 CDN 与缓存监控需要关注哪些指标?
- FB-24-PE-B-006 页面性能监控通常需要采集哪些指标?
- FB-24-SS-B-008 什么是 on-call 机制?前端团队为什么也需要?
系统架构设计(17 道)
- 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)
- FB-25-EN-B-003 Monorepo 是什么?与 Multirepo 相比有什么优劣?
- FB-25-EN-B-015 如何分析前端构建产物并制定优化策略?
微前端(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 前端代码评审中应关注的安全点
数据与状态管理(16 道)
- 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)
- FB-29-CP-B-001 React Query 的 staleTime 和 cacheTime 有什么区别?
- FB-29-SS-B-001 前端应用中有哪些类型的状态?分别应该怎么管理?
可观测性(15 道)
- FB-30-CD-B-007 手写一个前端异常捕获与上报函数
- 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 什么是前端埋点
- FB-30-CP-B-001 什么是可观测性?它和监控有什么区别?
- FB-30-PE-B-005 什么是 RUM?它通常采集哪些性能指标?
- FB-30-PE-B-006 Core Web Vitals 包含哪些指标?如何优化?
安全架构(16 道)
- 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 与混合内容安全
- FB-31-SE-B-001 什么是供应链安全?前端如何防护?
- FB-31-SE-B-002 前端如何处理用户身份认证安全?
实时与协同(14 道)
- 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 什么是长连接
- FB-32-CP-B-001 什么是 CRDT?与 OT 有什么区别?
- FB-32-SC-B-001 WebSocket 和 SSE 有什么区别?分别适用什么场景?
- FB-32-SD-B-001 如何设计 WebSocket 重连机制?
国际化(15 道)
- 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 的区别
- FB-33-CP-B-001 什么是 i18n 和 l10n?有什么区别?
可视化与图形(14 道)
- FB-34-CA-B-005 下面两段代码分别用 Canvas 和 SVG 绘制一个矩形,二者在事件处理、缩放和样式修改上有何不同?
- FB-34-CD-B-008 用 Canvas 手写一个简易柱状图,支持鼠标悬停显示当前柱数值。
- 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 可视化图表的基本元素
- FB-34-CP-B-001 SVG 和 Canvas 的主要区别是什么?
- FB-34-PE-B-001 如何解决大数据量可视化性能问题?
Serverless/Edge(14 道)
- 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
- FB-35-SC-B-001 Edge 计算适合哪些前端场景?
前端数据工程(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?
团队领导力(18 道)
- 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)?前端负责人如何实践?
- FB-38-SC-B-006 两位 senior 因技术方案争执不下,作为 TL 你怎么介入?
- FB-38-SC-B-007 你如何为前端团队设计合理的绩效考核体系?
- FB-38-SC-B-008 如何在团队中建立有效的 1:1 机制?
- FB-38-SC-B-009 作为 Tech Lead,你如何平衡编码与管理工作?
- FB-38-SS-B-001 团队组建时如何确定岗位画像与招聘优先级?
- FB-38-SS-B-003 新员工入职前 90 天如何设计 onboarding 帮助其快速融入?
- FB-38-SS-B-004 绩效管理的常见误区与目标设定原则
- FB-38-SS-B-005 1on1 的核心目标与基本流程
- FB-38-SS-B-008 技术文化主要包含哪些要素?如何在日常工作中落地?
- FB-38-SS-B-009 你如何管理自己的情绪,避免在高压下做出错误决策?
- FB-38-SS-B-010 如何在一次裁员后重建团队士气?
- FB-38-SS-B-011 如何与一位你不喜欢但能力很强的下属合作?
- FB-38-SS-B-012 跨团队项目中,其他团队不配合导致进度受阻,你怎么办?
技术战略(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 平台化与中台化的区别是什么?前端何时应该做中台?
沟通表达(15 道)
- FB-40-CO-B-001 什么是结构化表达?请用金字塔原理说明
- FB-40-CO-B-002 如何向非技术人员解释技术方案?
- FB-40-SS-B-002 非暴力沟通的四个要素是什么?在工作中如何应用?
- FB-40-SS-B-003 如何做一次有效的向上汇报?
- FB-40-SS-B-004 跨部门协作中如何快速建立信任?
- FB-40-SS-B-005 收到模糊需求时,如何与对方澄清?
- FB-40-SS-B-006 高效会议的基本原则是什么?
- FB-40-SS-B-007 如何给同事提建设性反馈?
- FB-40-SS-B-008 远程/视频会议中的沟通技巧有哪些?
- FB-40-SS-B-009 为什么沟通表达对架构师很重要?
- FB-40-SS-B-010 向上管理的核心是什么?
- FB-40-SS-B-011 如何在跨团队冲突中保持中立并推动共识?
- FB-40-SS-B-012 如何在邮件/文档中拒绝一个不合理的需求?
- FB-40-SS-B-013 如何做一次有效的技术方案评审会议主持?
- FB-40-SS-B-014 如何在公开场合给予团队成员建设性反馈?
项目管理(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?
招聘(11 道)
- 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 模型是什么?
- FB-42-SC-B-007 面试官在面试中常犯的偏见有哪些?如何避免?
- FB-42-SS-B-005 如何设计一道有效的前端行为面试题?
- FB-42-SS-B-006 结构化面试有什么好处?
技术品牌与布道(14 道)
- 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 技术演讲前,你会做哪些准备?
- FB-43-SS-B-001 技术品牌对团队有什么价值?
- FB-43-SS-B-002 一个成功的开源项目需要哪些要素?
技术治理与合规(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(12 道)
- FB-47-CA-B-006 下面代码点击按钮后 count 的值是多少?为什么?
- 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(11 道)
- FB-48-CD-B-006 请手写一个渲染进程调用主进程的完整 IPC 示例
- 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(12 道)
- FB-49-CA-B-007 下面代码的输出是什么?为什么?
- 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 函数?
- FB-49-PE-B-008 WebAssembly 在哪些场景有性能优势?哪些场景不适合?
WebGPU / 图形学(11 道)
- FB-50-CD-B-007 手写一个最简单的 WGSL 顶点着色器和片元着色器。
- 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)(12 道)
- 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 两种流媒体协议有什么区别?
- FB-51-PE-B-006 video 标签的 preload 和 autoplay 属性有什么作用?
低代码(11 道)
- FB-52-CA-B-006 下面 Schema 渲染后的结果是什么?
- FB-52-CD-B-007 请手写一个简单的 Schema 渲染器
- 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 低代码平台如何导出代码或集成到现有项目?
- FB-52-SC-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)。
行为面试(15 道)
- FB-54-SS-B-001 请做一个 1-2 分钟的自我介绍
- FB-54-SS-B-002 你为什么选择前端这个职业?
- FB-54-SS-B-003 你的优点和缺点分别是什么?
- FB-54-SS-B-004 你如何应对工作压力?
- FB-54-SS-B-005 请描述一次你印象深刻的团队合作经历
- FB-54-SS-B-006 当你遇到一个不熟悉的技术难题时,会怎么解决?
- FB-54-SS-B-007 你如何管理多个并行的任务?
- FB-54-SS-B-008 你为什么离开上一家公司?
- FB-54-SS-B-009 请描述一次你主动推动改变的经历。
- FB-54-SS-B-010 请描述一次你学习新技术并应用的经历。
- FB-54-SS-B-011 请描述一次你与跨部门合作完成项目的经历。
- FB-54-SS-B-012 请描述一次你处理紧急线上事故的经历。
- FB-54-SS-B-013 请描述一次你与上级意见不一致的经历。
- FB-54-SS-B-014 请描述一次你牺牲个人利益成就团队目标的经历。
- FB-54-SS-B-015 请描述一次你从错误中快速恢复的经历。
简历与面试技巧(16 道)
- FB-55-CO-B-001 一份合格的前端简历应该包含哪些核心模块?
- FB-55-CO-B-005 面试前应该做哪些准备?
- FB-55-CO-B-007 面试中的基本礼仪有哪些?
- FB-55-RI-B-001 请介绍一下你在项目中使用的前端框架和相关生态。
- FB-55-RI-B-002 你在这个项目中担任过什么技术决策?为什么这样决策?
- FB-55-RI-B-003 请描述一个你主导推动落地的技术改进。
- FB-55-RI-B-004 你的项目中有哪些可量化的成果?
- FB-55-RI-B-005 请解释你简历上某个技术关键词或项目中的某个技术点。
- FB-55-RI-B-006 你在项目中的技术决策依据是什么?
- FB-55-RI-B-007 你如何保证你负责项目的可维护性?
- FB-55-RI-B-008 你在项目中最自豪的一点是什么?
- FB-55-SS-B-002 如何用 STAR 法则描述一段项目经历?
- FB-55-SS-B-003 如何描述项目中的技术难点?
- FB-55-SS-B-004 如何在简历中体现技术亮点?
- FB-55-SS-B-006 如何进行一场得体的自我介绍?
- FB-55-SS-B-008 面试结束后应该做哪些跟进?
行业特化(16 道)
- 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 工程化浪潮对前端岗位带来了哪些影响?
- FB-56-IN-B-001 你认为未来 3-5 年前端最重要的技能是什么?
- FB-56-IN-B-002 你怎么看待前端框架的选型?Vue 和 React 你更倾向哪个?
- FB-56-IN-B-003 你如何看待前端性能优化与业务指标的关系?
- FB-56-IN-B-004 你认为前端工程师如何提升自己的业务影响力?
- FB-56-IN-B-005 你如何看待开源社区对前端行业的贡献?
- FB-56-IN-B-006 你认为前端在电商行业最重要的能力是什么?
- FB-56-IN-B-007 你如何看待金融科技行业对前端的要求?
- FB-56-IN-B-008 你怎么看待教育科技(EdTech)行业的前端趋势?
进阶题(1406 道)
JavaScript(37 道)
- FB-01-CA-A-001 下面代码的输出是什么?
- FB-01-CA-A-002 setTimeout 一定准时执行吗?
- FB-01-CA-A-003 下面代码的输出顺序是什么?
- FB-01-CA-A-004 解释 async/await 的执行过程,下面代码输出什么?
- FB-01-CD-A-001 手写 call、apply、bind。
- FB-01-CD-A-002 手写一个深拷贝函数。
- FB-01-CD-A-003 手写 Promise.all。
- FB-01-CD-A-004 手写一个防抖(debounce)函数。
- FB-01-CD-A-005 手写一个异步任务并发控制器。
- FB-01-CD-A-006 实现函数柯里化(curry)和函数组合(compose)。
- FB-01-CD-A-007 手写一个 Promise.all,并说明其特点。
- FB-01-CD-A-008 什么是函数柯里化(Currying)?手写实现。
- FB-01-CD-A-009 手写 Promise.race
- FB-01-CD-A-010 手写 Promise.any
- FB-01-CD-A-011 手写一个 sleep / delay 函数
- FB-01-CD-A-012 手写一个 JSONP 函数
- FB-01-CD-A-013 手写一个 JSON.parse 的简化版
- FB-01-CD-A-014 手写一个模板字符串解析器
- FB-01-CD-A-015 手写一个 EventEmitter(发布订阅)
- 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 有什么作用?
- FB-01-CP-A-001 ES6 模块与 CommonJS 模块有什么区别?
TypeScript(31 道)
- FB-02-CA-A-001 分析以下泛型代码的推断结果
- FB-02-CD-A-001 手写一个类型安全的 get 工具函数
- FB-02-CD-A-002 手写一个自定义类型保护函数
- FB-02-CD-A-003 手写一个 DeepReadonly 类型
- FB-02-CD-A-004 什么是泛型约束?写一个带约束的泛型函数。
- FB-02-CD-A-005 什么是映射类型?手写 Partial<T>、Readonly<T>、Pick<T, K>。
- FB-02-CD-A-006 解释条件类型,并手写 IsArray<T>、Extract<T, U>。
- FB-02-CD-A-007 什么是 infer?用它实现 ReturnType<T> 和 Parameters<T>。
- 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 与尖括号语法有什么区别?
- FB-02-SC-A-001 如何用 TypeScript 设计一个可辨识联合(Discriminated Union)处理业务状态?
Browser(34 道)
- FB-03-CA-A-001 分析下面代码的打印顺序,并说明原因。
- FB-03-CD-A-001 手写一个防抖(debounce)函数,并说明在浏览器输入场景中的应用。
- 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 性能评分机制是怎样的?
- FB-03-CP-A-001 解释 requestAnimationFrame 和 setTimeout/setInterval 做动画的区别。
- FB-03-PE-A-001 如何识别并避免布局抖动(Layout Thrashing)?
- FB-03-PE-A-002 什么是关键渲染路径(CRP)?如何优化首屏加载?
- FB-03-PE-A-003 Performance API 中 LCP、FID、CLS 分别衡量什么?如何优化?
- FB-03-PE-A-004 如何通过 PerformanceObserver 采集性能指标?
- FB-03-PE-A-005 浏览器渲染主流程是什么?DOM、CSSOM、Render Tree 的关系?
- FB-03-PE-A-006 什么是 CRP(Critical Rendering Path)?如何优化?
- FB-03-PE-A-007 什么是渲染阻塞资源?如何减少阻塞?
- FB-03-PE-A-008 DNS 预解析和预连接对首屏有什么帮助?
- FB-03-PE-A-009 如何用 PerformanceObserver 采集性能指标?
- FB-03-SC-A-001 如何设计一个支持离线访问的 Web 应用缓存策略?
- FB-03-SC-A-002 如何在前端实现图片懒加载?
- FB-03-SE-A-001 SameSite Cookie 的三种取值对跨站请求有什么影响?
计算机网络(30 道)
- FB-04-CA-A-001 分析以下跨域请求场景,哪些会成功,哪些会触发预检?
- 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 的基本思想
- FB-04-CP-A-001 WebSocket 和 HTTP 长轮询有什么区别?
- FB-04-PE-A-001 前端网络优化有哪些常用手段?
- FB-04-SC-A-001 网络请求失败时,如何设计重试与降级策略?
- FB-04-SE-A-001 XSS 与 CSRF 的区别是什么?前端有哪些防御手段?
- FB-04-SE-A-002 什么是中间人攻击(MITM)和 DNS 劫持?HTTPS 能否完全防御?
- FB-04-SE-A-003 什么是跨域?CORS 的原理是什么?
- FB-04-SE-A-004 什么是 SSRF?前端如何配合防御?
Web 安全(24 道)
- FB-05-CA-A-001 下面代码存在什么安全问题?如何修复?
- 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 技术?
- FB-05-SC-A-001 如何安全地实现一个富文本编辑器?
- FB-05-SE-A-001 如何系统性地防御 XSS?
- FB-05-SE-A-002 CSRF Token 应该如何生成、分发和校验?
- FB-05-SE-A-003 如何为生产环境配置一套合理的 CSP 策略?
- FB-05-SE-A-004 JWT 在前端应该如何安全存储和传输?
- FB-05-SE-A-005 CORS 配置错误可能带来哪些安全风险?
- FB-05-SE-A-006 使用 postMessage 跨窗口通信时有哪些安全注意事项?
- FB-05-SE-A-007 什么是中间人攻击(MITM)?HTTPS 如何防御?前端还能做什么?
- FB-05-SE-A-008 请简述 OAuth 2.0 授权码模式的基本流程及前端注意事项。
- FB-05-SE-A-009 什么是 IDOR(不安全的直接对象引用)?前端如何参与防御?
- FB-05-SE-A-010 什么是路径遍历攻击?前端如何参与防御?
- FB-05-SE-A-011 CSP Report-Only 模式有什么用?
- FB-05-SE-A-012 如何防止用户凭证被自动填充到钓鱼页面?
HTML/CSS(28 道)
- FB-06-CA-A-001 分析下面代码中 z-index 为什么不生效?
- FB-06-CA-A-002 分析下面选择器的优先级。
- FB-06-CA-A-003 分析下面布局问题的原因。
- FB-06-CD-A-001 实现元素水平垂直居中的至少三种方案。
- 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 什么是渐进增强与优雅降级?
- FB-06-EN-A-001 什么是 CSS 工程化?前端项目中为什么需要 CSS 工程化?
- FB-06-EN-A-002 CSS 预处理器与 PostCSS 在现代工程中的角色
- FB-06-PE-A-001 CSS 性能优化有哪些常见手段?
- FB-06-PE-A-002 CSS 加载与渲染性能有哪些优化手段?
- FB-06-SC-A-001 设计一个响应式导航栏。
- FB-06-SC-A-002 解释一下容器查询(Container Query)及其使用场景。
- FB-06-SC-A-003 如何设计一个响应式图片组件?
- FB-06-SC-A-004 实现一个可拖拽排序列表的 HTML/CSS 思路
可访问性(a11y)(22 道)
- FB-07-CA-A-001 分析下面自定义弹窗代码的可访问性问题。
- FB-07-CD-A-001 手写一个可访问的自定义下拉菜单(Button Menu)。
- 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 如何为图标按钮提供可访问名称?
- FB-07-SC-A-001 设计一个带错误提示的可访问表单。
- FB-07-SC-A-002 设计一个无障碍文件上传组件
- FB-07-SC-A-003 设计一个可访问的日期选择器
- FB-07-SD-A-001 如何设计一个可访问的模态对话框?
- FB-07-SS-A-001 如何在团队中推广无障碍测试?
数据结构与算法(24 道)
- FB-08-CD-A-001 实现二分查找。
- FB-08-CD-A-002 实现冒泡排序、选择排序和插入排序。
- FB-08-CD-A-003 实现快速排序和归并排序。
- FB-08-CD-A-004 合并两个有序数组。
- FB-08-CD-A-005 无重复字符的最长子串。
- FB-08-CD-A-006 和为 K 的子数组。
- FB-08-CD-A-007 链表中倒数第 K 个节点。
- FB-08-CD-A-008 反转链表。
- FB-08-CD-A-009 判断链表是否有环。
- FB-08-CD-A-010 二叉树的层序遍历。
- FB-08-CD-A-011 二叉树的最大深度。
- FB-08-CD-A-012 验证二叉搜索树。
- FB-08-CD-A-013 买卖股票的最佳时机。
- FB-08-CD-A-014 爬楼梯:如何用动态规划求解最小代价?
- FB-08-CD-A-015 实现一个 LRU 缓存
- FB-08-CD-A-016 手写一个深拷贝函数
- FB-08-CD-A-017 手写函数 compose 和 pipe
- FB-08-CD-A-018 实现一个事件发布订阅(EventBus)
- FB-08-CD-A-019 手写 Promise.allSettled
- FB-08-CD-A-020 实现数组乱序(Fisher-Yates)
- FB-08-CD-A-021 大数相加的实现思路
- FB-08-CO-A-001 贪心算法的基本思想是什么?适合解决哪些问题?
- FB-08-SC-A-001 设计一个前端请求合并/去重系统
- FB-08-SC-A-002 设计一个前端任务调度器
设计模式(19 道)
- FB-09-CD-A-001 手写一个单例模式,并考虑延迟初始化与线程安全。
- FB-09-CD-A-002 手写一个发布订阅事件总线(EventBus)。
- FB-09-CD-A-003 用策略模式重构一段复杂条件判断代码。
- FB-09-CD-A-004 手写一个迭代器模式,实现自定义集合遍历。
- 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 什么是享元模式?在前端有哪些应用?
- FB-09-SC-A-001 用策略模式实现一个表单校验器
- FB-09-SC-A-002 用职责链模式实现一个审批流
构建工具(31 道)
- FB-10-CA-A-001 分析下面 Webpack 配置的作用与产物结构。
- FB-10-CA-A-002 分析以下 splitChunks 配置可能产生的问题及优化方向
- FB-10-CA-A-013 分析下面代码中 Tree Shaking 为什么会失效。
- FB-10-CA-A-014 分析下面 Rollup 配置中 external 和 globals 的作用
- FB-10-CD-A-001 手写一个最简单的 Webpack Loader,将文件内容转为大写。
- FB-10-CD-A-002 手写一个 Vite 插件,在构建结束时输出所有产物文件大小
- FB-10-CD-A-014 手写一个 Webpack Plugin,在 emit 阶段生成 stats.json。
- 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 为什么比传统构建工具快?
- FB-10-EN-A-001 如何设计前端构建的缓存策略?
- FB-10-EN-A-002 Monorepo 中如何设计构建任务依赖和缓存?
- FB-10-EN-A-016 如何在前端构建流程中集成 Lint、Type Check 和 Test?
- FB-10-EN-A-017 如何通过 Vite 的 build.rollupOptions 控制高级打包行为?
- FB-10-PE-A-001 如何优化 Webpack 构建速度?请列举至少 5 种方法。
- FB-10-PE-A-002 如何分析并优化前端打包体积?
- FB-10-PE-A-003 如何针对大型依赖做按需加载和构建优化?
- FB-10-PE-A-004 如何分析 Webpack 构建耗时分布并定位瓶颈?
- FB-10-PE-A-015 如何分析并可视化前端打包体积?
- FB-10-PE-A-016 如何分析和优化 Webpack 构建性能?
- FB-10-SC-A-018 如何设计一个多入口 Webpack 配置?
Monorepo(31 道)
- FB-11-CO-A-001 什么是拓扑排序?在 Monorepo 构建中有什么用?
- FB-11-CO-A-002 Monorepo 中如何处理循环依赖?
- FB-11-CO-A-003 什么是 pnpm 的 peerDependencyRules?
- FB-11-CP-A-020 如何看待 Monorepo 中工具链日益碎片化的问题?
- FB-11-CP-A-021 比较 Turborepo、Nx、Rush 的适用场景
- FB-11-EN-A-001 如何优化 Monorepo 的依赖安装速度?
- FB-11-EN-A-002 pnpm 的依赖管理机制与 npm / yarn 有何不同?
- FB-11-EN-A-003 什么是幽灵依赖(phantom dependencies)?如何解决?
- FB-11-EN-A-004 Monorepo 中如何管理内部包的版本号?
- FB-11-EN-A-005 changesets 的工作流程是什么?
- FB-11-EN-A-006 如何配置 Turborepo 的 pipeline?
- FB-11-EN-A-007 Monorepo 中 CI 可以做哪些优化?
- FB-11-EN-A-008 如何配置 pnpm 的 catalog 功能统一管理依赖版本?
- FB-11-EN-A-009 如何处理 Monorepo 中不同子包的 Node.js 版本要求?
- FB-11-EN-A-010 如何检测和清理 Monorepo 中的未使用依赖?
- FB-11-EN-A-011 pnpm 的 --filter 有哪些常见用法?
- FB-11-EN-A-012 如何在 Monorepo 中统一管理环境变量?
- FB-11-EN-A-013 如何配置 Turborepo 的 remote cache?
- FB-11-EN-A-014 如何使用 pnpm 的 overrides 和 hooks 治理依赖版本?
- FB-11-EN-A-015 如何配置 Turborepo generator 来创建新包?
- FB-11-EN-A-017 如何处理 Monorepo 中不同子包依赖不同框架版本的问题?
- FB-11-EN-A-018 如何在 Monorepo 中做包体积分析?
- FB-11-EN-A-019 如何配置 GitHub Actions 只跑 affected 的任务?
- FB-11-EN-A-021 如何在 Monorepo 中统一管理 secrets 和敏感配置?
- FB-11-EN-A-022 如何配置 Monorepo 中的依赖升级策略?
- FB-11-SC-A-001 设计一个 Monorepo 下组件库的发布流程。
- FB-11-SC-A-002 设计一个 Monorepo 下共享 hooks 包的管理方案。
- FB-11-SC-A-003 设计一个 Monorepo 中共享 types 包的演进方案。
- FB-11-SC-A-016 设计一个 Monorepo 下共享 icons / assets 资源包的管理方案。
- FB-11-SC-A-022 设计一个 Monorepo 下共享设计 tokens 和主题包的管理方案。
- FB-11-SC-A-023 如何为 Monorepo 设计 CI/CD 流水线?
CI/CD(31 道)
- FB-12-CO-A-022 什么是 CI 中的 idempotency(幂等性)?
- FB-12-CO-A-023 什么是 pipeline as code 的优势?
- FB-12-CP-A-021 如何选择 self-hosted runner 和 cloud runner?
- FB-12-EN-A-001 如何在 GitHub Actions 中为前端 Monorepo 设计一条合理的 CI/CD 流水线?
- FB-12-EN-A-002 如何为前端项目设计一条完整的 GitLab CI 流水线?
- FB-12-EN-A-003 如何为前端项目配置 Jenkins 多分支流水线(Multibranch Pipeline)?
- FB-12-EN-A-004 几种常见的部署策略有什么区别?
- FB-12-EN-A-005 蓝绿部署的原理是什么?前端项目做蓝绿部署需要注意什么?
- FB-12-EN-A-006 金丝雀发布(Canary Release)的原理是什么?如何实现和观测?
- FB-12-EN-A-007 特性开关(Feature Flags)如何与 CI/CD 结合?
- FB-12-EN-A-008 CI/CD 中的 Secrets 管理有哪些最佳实践?
- FB-12-EN-A-009 GitHub Actions 的 concurrency 与 cancel-in-progress 有什么作用?
- FB-12-EN-A-010 自托管 Runner 与云托管 Runner 各有什么优劣?如何选择?
- FB-12-EN-A-011 如何在 CI/CD 中并行化和分片运行 E2E 测试?
- FB-12-EN-A-012 如何在 CI/CD 中集成 Lighthouse CI 与性能预算?
- FB-12-EN-A-013 如何在 CI/CD 中监控和控制 Bundle Size?
- FB-12-EN-A-014 如何设计前端项目部署到 CDN/OSS 的 CI/CD 流水线?
- FB-12-EN-A-015 Merge Queue 在 CI/CD 中解决了什么问题?
- FB-12-EN-A-016 如何为每个 PR 自动创建和销毁预览环境?
- FB-12-EN-A-017 如何在 CI/CD 中集成可视化回归测试?
- FB-12-EN-A-019 如何在 GitLab CI 中实现 DAG(有向无环图)编排?
- FB-12-EN-A-022 GitHub Actions 的 Reusable Workflow 与 Composite Action 有什么区别?
- FB-12-EN-A-024 如何在 CI 中集成 Lighthouse CI?
- FB-12-EN-A-026 如何在 CI 中实现前端依赖的安全审计?
- FB-12-EN-A-027 如何设计 CI 中的 lint/typecheck/test 任务顺序?
- FB-12-PE-A-021 如何优化前端 CI 流水线的性能?
- FB-12-SC-A-018 如何设计前端项目的多环境配置管理?
- FB-12-SC-A-023 如何为前端组件库设计发布流水线?
- FB-12-SE-A-020 如何防止 CI/CD 流水线泄露 Secrets?
- FB-12-SE-A-025 SAST、SCA、DAST 分别是什么?在前端 CI 中如何应用?
- FB-12-SE-A-026 CI 中如何处理 secrets 和 credentials?
代码质量与测试(39 道)
- FB-13-CA-A-001 Jest 中如何使用 fake timers 测试下面的代码?
- FB-13-CA-A-002 下面 React 测试为什么会报 “not wrapped in act(...)” 警告?如何修复?
- FB-13-CA-A-003 下面 React Testing Library 的测试为什么没有触发 onChange?
- FB-13-CA-A-004 下面这段 Jest 异步测试为什么会出问题?
- FB-13-CD-A-001 请手写一个 Jest 测试,验证一个 HTTP 请求工具函数的错误重试逻辑。
- FB-13-CD-A-002 请手写一个节流函数并为其编写单元测试。
- FB-13-CD-A-003 请手写一个数组去重函数并为其编写单元测试
- FB-13-CD-A-021 如何识别和清理技术债务?
- 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 如何定义代码质量度量指标?
- FB-13-CP-A-019 如何选择 Jest 还是 Vitest?
- FB-13-EN-A-001 如何配置 lint-staged + Husky 实现提交前只检查本次修改?
- FB-13-EN-A-002 如何在前端项目中引入 commitlint + Conventional Commits?
- FB-13-EN-A-003 如何在 CI 中并行运行测试以缩短反馈时间?
- FB-13-EN-A-010 Biome / Oxc 与传统 ESLint + Prettier 相比有什么优势和局限?
- FB-13-EN-A-011 如何设计前端代码 review 流程?
- FB-13-SC-A-001 如何为一个包含 API 调用的表单组件设计集成测试?
- FB-13-SC-A-002 如何测试一个上传文件组件?
- FB-13-SC-A-003 如何为一个带防抖的搜索输入框设计测试?
- FB-13-SC-A-004 如何为一个使用 localStorage 的自定义 Hook 设计测试?
- FB-13-SE-A-020 什么是 OWASP Top 10 在前端的体现?
设计系统与组件库(24 道)
- 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)是什么?
- FB-14-SC-A-001 如何基于 Design Token 实现多主题切换?
- FB-14-SC-A-002 设计一个组件库的深色模式(Dark Mode)方案时需要考虑哪些问题?
- FB-14-SC-A-003 如何提高组件库的可组合性(Composability)?
- FB-14-SC-A-004 设计一个通用 Modal 组件时,API 应该如何设计?
- FB-14-SC-A-005 如何为组件库设计一致且可访问的键盘导航?
- FB-14-SC-A-006 如何设计支持响应式的组件?
- FB-14-SC-A-007 如何建立高效的 design-dev handoff(设计-研发交付)流程?
- FB-14-SC-A-008 如何设计一个支持多尺寸变体的 Button 组件?
- FB-14-SC-A-009 设计一个通用 Form 组件时,如何统一校验与错误提示?
- FB-14-SC-A-010 如何为组件库设计一套图标按需加载方案?
- FB-14-SC-A-011 设计一个可复用的 Table 组件需要考虑哪些扩展点?
- FB-14-SC-A-012 如何在组件库中实现平滑的动画与过渡效果?
- FB-14-SC-A-013 如何设计一个通用 Notification/Toast 组件?
- FB-14-SC-A-014 如何为组件库设计一致的间距与布局系统?
- FB-14-SC-A-015 组件库如何与 TypeScript 类型系统深度结合?
- FB-14-SC-A-016 如何设计组件库的按需加载(Tree Shaking + 按需引入)?
- FB-14-SC-A-017 如何设计一个 DatePicker 组件?
- FB-14-SC-A-018 如何设计一个支持虚拟滚动的 Select?
- FB-14-SC-A-019 如何设计一个 Skeleton 加载组件?
- FB-14-SC-A-020 如何设计一个 Steps 步骤条组件?
- FB-14-SC-A-021 组件库中如何实现响应式断点?
React(25 道)
- FB-15-CA-A-042 下面代码在输入框快速输入时会出现什么问题?如何修复?
- FB-15-CA-A-043 分析一个 useEffect 依赖问题
- FB-15-CD-A-014 如何封装一个 Custom Hook?请写一个 useWindowSize 的示例。
- FB-15-CD-A-045 请手写一个 useDebounce Hook
- FB-15-CD-A-046 请手写一个 useThrottle Hook
- 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(25 道)
- FB-16-CA-A-001 分析以下响应式代码的执行结果
- 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 怎么用?
- FB-16-CP-A-001 Vue 单页应用的 SEO 优化有哪些思路?
- FB-16-EN-A-001 Vue 项目中 ESLint、Prettier 和 Vitest 如何集成?
- FB-16-FS-A-001 Vue 3 的 Scheduler 调度器是如何工作的?
- FB-16-PE-A-001 Vue 长列表性能优化有哪些方案?
- FB-16-SC-A-001 如何设计一个带搜索和筛选的商品列表组件?
- FB-16-SD-A-001 如何设计 Vue 项目的权限路由系统?
- FB-16-SE-A-001 Vue 中如何安全地使用 v-html?
跨端技术(22 道)
- FB-17-CA-A-041 分析以下小程序 setData 代码的执行结果和性能影响
- FB-17-CD-A-012 请手写一个简单的 JSBridge
- FB-17-CD-A-046 请手写一个跨端 Storage 封装
- 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 应用如何打包和自动更新?
- FB-17-EN-A-043 跨端项目如何使用 Monorepo 组织代码?
- FB-17-PE-A-009 小程序有哪些常见的性能优化手段?
- FB-17-PE-A-039 跨端应用的首屏加载可以从哪些方面优化?
- FB-17-PE-A-047 React Native 长列表如何优化性能?
- FB-17-SC-A-015 跨端技术选型时应该考虑哪些因素?
- FB-17-SC-A-042 跨端应用的登录态如何同步和保持一致?
- FB-17-SE-A-013 Electron 应用有哪些安全注意事项?
- FB-17-SE-A-045 小程序有哪些常见安全风险?如何防御?
AI 工程化(33 道)
- FB-18-CA-A-043 分析一段 SSE 流式处理代码的潜在 Bug
- FB-18-CD-A-010 手写一个前端流式对话组件
- FB-18-CD-A-011 手写一个带重试和指数退避的模型调用封装
- FB-18-CD-A-012 手写一个基于 SSE 的前端 Hook useEventSource
- FB-18-CD-A-042 手写一个支持 Function Calling 的前端 AI 组件
- 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 的召回率?
- FB-18-CP-A-049 如何评估一个 AI 功能对产品指标的影响?
- FB-18-EN-A-016 什么是 Vibe Coding?前端如何落地 AI 辅助编码?
- FB-18-EN-A-017 如何管理前端项目中的 Prompt 版本与热更新?
- FB-18-EN-A-045 如何管理前端 AI 应用的 Prompt 版本?
- FB-18-PE-A-013 LLM 应用的成本与延迟如何优化?
- FB-18-PE-A-014 如何优化 AI 聊天应用的首屏体验和交互流畅度?
- FB-18-PE-A-047 如何优化前端 RAG 应用的检索延迟?
- FB-18-SC-A-001 如何为前端团队设计一个 AI 代码审查助手?
- FB-18-SC-A-044 设计一个智能表单填充功能
- FB-18-SD-A-001 设计一个 AI 客服系统的前端架构。
- FB-18-SE-A-014 AI 应用中的安全与护栏(Guardrails)包括哪些方面?
- FB-18-SE-A-015 前端 AI 应用如何处理敏感数据脱敏与隐私保护?
- FB-18-SE-A-046 如何防范前端 AI 应用中的 Prompt 泄露?
Node.js / BFF(26 道)
- FB-19-CA-A-009 下面代码的输出顺序是什么?为什么?
- FB-19-CA-A-043 分析以下 Express 异步路由的错误处理问题
- FB-19-CD-A-010 请手写一个简版 EventEmitter
- FB-19-CD-A-044 请手写一个基于 Promise 的请求调度器,支持最大并发数
- 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 中如何做健康检查?
- FB-19-EN-A-047 Node.js 项目中的代码质量工具链应如何配置?
- FB-19-PE-A-016 Node.js 服务有哪些常见的性能优化手段?
- FB-19-PE-A-042 Node.js 服务的日志规范应如何设计?如何接入 ELK/Loki?
- FB-19-SD-A-001 如何设计一个支持高并发的 BFF 服务?
- FB-19-SD-A-002 如何设计一个前后端共享类型的 Monorepo 方案?
Git 工作流与变更管理(26 道)
- 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 有什么用?
- FB-20-EN-A-010 什么是 Conventional Commits?它能带来哪些自动化收益?
- FB-20-EN-A-011 Git Hooks 是什么?常见钩子有哪些?
- FB-20-EN-A-014 Pull Request / Merge Request 的代码审查流程如何设计?
- FB-20-EN-A-042 git worktree 有什么用?
- FB-20-EN-A-046 Monorepo 中如何锁定依赖变更与源码变更的一致性?
- FB-20-EN-A-047 如何为一个团队选择合适的 Git 工作流?
- FB-20-PE-A-001 大型 Git 仓库有哪些性能优化手段?
- FB-20-SC-A-012 遇到 Git 冲突时,你的解决流程是什么?如何预防冲突?
- FB-20-SC-A-041 代码审查中发现敏感信息已提交到仓库,如何处理?
- FB-20-SC-A-044 线上发现缺陷,如何回滚已合并到 main 的提交?
- FB-20-SC-A-048 多人协作时,如何优雅地处理 rebase 后的冲突?
- FB-20-SS-A-001 如何处理代码冲突?
开发者体验与工程效能(33 道)
- FB-21-CA-A-001 分析一段 Turborepo pipeline 配置,指出缓存命中失败的原因
- FB-21-CO-A-016 什么是开发者反馈循环(Developer Feedback Loop)?缩短反馈循环有哪些典型手段?
- FB-21-CO-A-017 Cypress 与 Playwright 在端到端测试架构与 DX 上有哪些核心区别
- FB-21-CP-A-045 如何在代码规范严格度与开发效率之间取得平衡?
- FB-21-CP-A-075 如何在不牺牲质量的前提下缩短 PR 合并周期?
- FB-21-CP-A-076 如何平衡开发者体验的灵活性与环境一致性
- FB-21-EN-A-009 如何设计一个团队级项目模板(boilerplate)?需要包含哪些核心文件和配置?
- FB-21-EN-A-010 如何利用 pnpm workspace + Turborepo 提升 Monorepo 的构建和安装速度?
- FB-21-EN-A-012 如何配置 Git Hooks 自动化代码检查?请给出 .lintstagedrc 和 Husky 的示例。
- FB-21-EN-A-013 TypeScript 项目中 compilerOptions 的关键项如何取舍?
- FB-21-EN-A-015 如何度量 CI pipeline 的反馈速度?有哪些常见瓶颈和优化手段?
- FB-21-EN-A-039 如何设计前端项目的错误监控与告警体系?
- FB-21-EN-A-042 如何实现前端组件库文档的自动化生成?
- FB-21-EN-A-044 如何实现前端项目的自动升级提醒?
- FB-21-EN-A-046 前端项目中的环境变量管理有哪些最佳实践?
- FB-21-EN-A-073 如何为前端项目设计分层测试策略?
- FB-21-EN-A-076 如何设计前端项目的依赖升级和废弃策略?
- FB-21-EN-A-078 如何实现前端工程配置的共享和版本管理?
- FB-21-EN-A-079 在 pnpm Monorepo 中落地 Vite 需要解决哪些依赖链接与别名配置问题
- FB-21-PE-A-011 大型前端项目冷启动慢,如何系统性地分析和优化构建性能?
- FB-21-PE-A-041 如何优化前端项目的依赖安装速度?
- FB-21-PE-A-074 前端项目的 HMR 失效或变慢,如何排查和优化?
- FB-21-PE-A-075 组件库 Monorepo 中 Jest 测试越跑越慢,如何排查与优化
- FB-21-SC-A-014 团队里不同成员使用 VS Code / WebStorm,如何保证编辑器配置和扩展一致?
- FB-21-SC-A-040 新工具引入团队时,如何制定推广策略?
- FB-21-SC-A-043 跨团队协作时,如何管理 API 文档以提升 DX?
- FB-21-SC-A-047 如何设计一个有效的内部技术分享机制?
- FB-21-SC-A-072 新成员入职第一周配不好环境,如何设计一键 onboarding 方案?
- FB-21-SC-A-077 多个业务线共用组件库但需求冲突,如何设计治理机制?
- FB-21-SC-A-078 在 Vite 项目中需要支持 Babel 插件时,如何设计集成方案而不显著牺牲构建速度
- FB-21-SD-A-001 如何为内部组件库设计可观测性方案,以度量组件使用与性能
- FB-21-SE-A-001 使用 Playwright 进行端到端测试时,如何防范测试脚本中的安全与数据风险
- FB-21-SS-A-001 请分享一次你推动 ESLint 规则升级与 CI 门禁落地的经历
部署与 SRE(24 道)
- FB-22-CA-A-001 下面一段金丝雀放量逻辑代码存在什么问题?从 Incident Response 角度分析。
- 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?
- FB-22-CP-A-001 结合蓝绿部署与 CI/CD,谈谈前端零停机发布的实践经验与关键权衡。
- FB-22-EN-A-009 设计一个前端静态资源部署流程
- FB-22-EN-A-012 前端如何实现自动回滚?
- FB-22-EN-A-013 如何在 Kubernetes Ingress 中落地前端应用的 Incident Response 与故障隔离机制?
- FB-22-PE-A-013 前端性能基线如何建立和监控?
- FB-22-PE-A-014 如何排查并优化前端 SSR 服务高可用架构中的性能瓶颈?
- FB-22-SC-A-010 蓝绿部署在前端如何实现?有哪些风险?
- FB-22-SC-A-011 如何设计前端金丝雀发布方案?
- FB-22-SC-A-012 基于 OSS 托管前端静态资源,如何设计多环境、多版本的发布架构?
- FB-22-SD-A-001 如何设计支持 Docker 的前端构建加速系统,解决 node_modules 与构建缓存问题?
- FB-22-SD-A-002 如何设计前端错误监控体系?
- FB-22-SE-A-016 HTTPS/TLS 部署有哪些安全要点?
- FB-22-SE-A-017 前端监控数据采集与上报过程中常见的安全风险有哪些?如何防御?
- FB-22-SS-A-001 请分享一次你推动前端流水线改造或流量切分方案落地的经历。
包管理与供应链安全(24 道)
- FB-23-CA-A-001 分析以下 tree-shaking / sideEffects 相关代码的输出与原因
- 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 体积膨胀如何治理?
- FB-23-CP-A-001 前端多团队如何建立依赖治理体系?
- FB-23-EN-A-011 Monorepo 中的 workspace 如何设计?包管理器 workspace 解决了什么问题?
- FB-23-EN-A-016 CI 中的依赖缓存策略如何设计?lockfile 在其中起什么作用?
- FB-23-EN-A-017 在 pnpm Monorepo 中如何落地供应链纵深防御体系?
- FB-23-PE-A-014 如何做包体积分析?有哪些常用工具和优化手段?
- FB-23-PE-A-015 前端项目依赖数量庞大时,如何优化许可证扫描的性能与准确性?
- FB-23-SC-A-001 前端 CDN 资源如何引入 Subresource Integrity(SRI)并与 CI 构建流程集成?
- FB-23-SD-A-001 在组件库/插件平台中,如何设计 peerDependencies 机制以避免多版本 React/Vue 冲突?
- FB-23-SE-A-013 供应链攻击有哪些常见手段?如何防御 typosquatting 与恶意包?
- FB-23-SE-A-014 企业私有 npm registry(Verdaccio / Nexus)有哪些常见安全风险与加固措施?
- FB-23-SE-A-015 供应链攻击有哪些常见形式?
- FB-23-SS-A-001 谈谈你处理 typosquatting 或恶意包供应链事件的实践经验
前端运维与监控(8 道)
- FB-24-EN-A-003 如何设计前端日志采集方案?
- FB-24-EN-A-006 前端灰度发布与回滚的监控要点有哪些?
- FB-24-PE-A-004 如何检测和分析前端长任务与页面卡顿?
- FB-24-PE-A-008 如何监控前端网络质量?
- FB-24-SC-A-001 如何在项目中接入 Sentry 并设置性能监控?
- FB-24-SC-A-005 如何设计前端告警策略,避免告警疲劳?
- FB-24-SC-A-007 前端服务降级有哪些常见策略?
- FB-24-SD-A-002 如何设计一个前端 RUM SDK?
系统架构设计(38 道)
- 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 什么是金丝雀发布,前端如何实现
- FB-25-CP-A-005 如何评估一个前端架构的可扩展性?
- FB-25-CP-A-015 如何处理遗留系统的渐进式重构?
- FB-25-CP-A-016 简述 MVC、MVVM、MVP 的区别,并举例前端中的应用。
- FB-25-EN-A-004 Monorepo 中如何设计包依赖关系、版本策略和发布流程?
- FB-25-EN-A-014 前端如何实现自动化回归与架构守护?
- FB-25-EN-A-015 如何设计前端项目的 CI/CD 流水线
- FB-25-EN-A-016 前端如何管理软件包的依赖升级与兼容性
- FB-25-PE-A-006 从架构视角看,性能优化应该如何系统化思考?
- FB-25-PE-A-016 从架构角度设计一个首屏加载优化方案
- FB-25-SC-A-001 你负责一个大型中后台系统,如何进行模块拆分和分层?
- FB-25-SC-A-009 设计一个前端配置中心(Feature Flag)系统
- FB-25-SC-A-010 设计一个前端埋点与监控 SDK 架构
- FB-25-SC-A-011 如何设计一个支持多租户的前端应用?
- FB-25-SC-A-012 大型中后台系统如何进行模块拆分
- FB-25-SC-A-013 前端应用灰度发布的技术方案
- FB-25-SC-A-014 如何设计一个可扩展的权限前端架构
- FB-25-SD-A-002 设计一个支持多终端接入的 BFF 层
- FB-25-SD-A-012 设计一个前端实时协同编辑系统的架构
- FB-25-SD-A-013 设计一个前端错误边界与降级渲染体系
- FB-25-SD-A-014 设计一个前端日志与审计系统
- FB-25-SE-A-007 从架构视角看,前端安全应该如何设计?
- FB-25-SE-A-017 从架构角度看,前端供应链安全应该如何设计?
微前端(32 道)
- FB-26-CD-A-016 手写一段代码,给子应用样式添加前缀以实现样式隔离。
- 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
- FB-26-CP-A-001 微前端和组件化有什么区别?
- FB-26-CP-A-002 请比较 qiankun、single-spa、Module Federation 三种方案。
- FB-26-CP-A-003 微前端落地中最大的风险是什么
- FB-26-CP-A-004 微前端落地后的持续治理措施
- FB-26-EN-A-014 微前端如何实现子应用独立部署?公共路径和资源加载要注意什么?
- FB-26-EN-A-015 微前端项目的 CI/CD 如何设计
- FB-26-FS-A-009 请解释 qiankun 的 JS 沙箱实现原理。
- FB-26-FS-A-010 single-spa 如何劫持路由并决定加载/卸载哪个子应用?
- FB-26-FS-A-011 微前端子应用加载失败如何排查
- FB-26-FS-A-012 微前端子应用样式突然错乱如何定位
- FB-26-PE-A-015 微前端场景下有哪些性能优化手段?
- FB-26-PE-A-016 微前端如何优化首屏加载性能
- FB-26-PE-A-017 微前端下的资源预加载策略
- FB-26-SC-A-013 设计一个子应用间通信方案,比较不同通信方式的适用场景。
- FB-26-SC-A-014 微前端子应用间如何通信
- FB-26-SC-A-015 微前端中如何共享登录态与权限
- FB-26-SC-A-016 微前端子应用如何独立开发与联调
- FB-26-SC-A-017 微前端与 Monorepo 如何结合
- FB-26-SC-A-018 微前端中的异常边界如何设计
性能工程(33 道)
- FB-27-CA-A-004 分析下面代码为什么会阻塞主线程,如何优化?
- FB-27-CD-A-005 实现一个固定高度的虚拟列表(Virtual List)
- FB-27-CD-A-006 React.memo/useMemo/useCallback 的使用边界
- 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
- FB-27-CP-A-001 重排和重绘有什么区别?如何减少重排?
- FB-27-CP-A-002 preload 和 prefetch 有什么区别?
- FB-27-EN-A-007 如何使用 Lighthouse 进行性能诊断和优化闭环?
- FB-27-PE-A-001 如何优化 LCP(Largest Contentful Paint)?
- FB-27-PE-A-002 如何优化 CLS(Cumulative Layout Shift)?
- FB-27-PE-A-003 如何优化 INP(Interaction to Next Paint)?
- FB-27-PE-A-004 HTTP 缓存中的强缓存和协商缓存有什么区别?
- FB-27-PE-A-005 首屏加载性能优化清单
- FB-27-PE-A-006 图片性能优化手段
- FB-27-PE-A-007 字体加载优化策略
- FB-27-PE-A-008 如何优化第三方脚本性能
- FB-27-PE-A-009 SPA 路由切换性能优化
- FB-27-PE-A-010 如何减少首屏 JavaScript 体积
- FB-27-PE-A-011 如何优化 Webpack/Vite 构建速度
- FB-27-PE-A-012 关键 CSS 提取与内联策略
- FB-27-PE-A-013 如何优化前端资源加载优先级
- FB-27-SC-A-006 预加载(preload)、预取(prefetch)、预连接(preconnect)有什么区别?如何在一个电商详情页中使用它们?
- FB-27-SC-A-007 节流和防抖有什么区别?分别适用什么场景?
- FB-27-SC-A-008 如何排查页面卡顿
- FB-27-SC-A-009 如何优化首屏白屏时间
- FB-27-SC-A-010 如何优化电商大促活动页性能
质量保障(33 道)
- FB-28-CD-A-016 手写一个测试数据工厂与 API Mock 封装
- 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)
- FB-28-CP-A-001 E2E 测试有哪些优缺点?如何选择测试范围?
- FB-28-EN-A-015 如何设计一条 CI 中的质量流水线?
- FB-28-EN-A-016 前端 CI 中的质量门禁设计
- FB-28-EN-A-017 前端代码覆盖率目标与实践
- FB-28-EN-A-018 前端代码规范如何落地
- FB-28-EN-A-019 前端 Monorepo 中的质量保障
- FB-28-EN-A-020 前端代码复杂度如何度量与治理
- FB-28-PE-A-001 性能测试如何纳入质量保障
- FB-28-SC-A-001 如何保证前端代码评审质量
- FB-28-SC-A-002 如何设计前端组件的测试策略
- FB-28-SC-A-003 如何保障前端发布质量
- FB-28-SC-A-004 前端如何保障兼容性质量
- FB-28-SC-A-005 如何提升前端测试的可维护性
- FB-28-SC-A-006 前端如何做回归测试策略
数据与状态管理(28 道)
- 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 状态管理中的副作用隔离
- FB-29-FS-A-001 状态更新后 UI 未更新如何排查
- FB-29-PE-A-001 状态管理库的性能优化
- FB-29-PE-A-002 前端大数据表格的状态与渲染优化
- FB-29-PE-A-003 状态更新批处理与性能
- FB-29-SC-A-001 如何设计前端数据缓存策略
- FB-29-SC-A-002 如何设计跨组件共享的数据源
- FB-29-SC-A-003 如何处理前端分页与无限滚动状态
- FB-29-SC-A-004 如何设计前端搜索筛选状态
- FB-29-SC-A-005 前端购物车状态如何设计
- FB-29-SC-A-006 如何设计前端搜索状态与历史记录
- FB-29-SD-A-001 如何设计一个大型列表页的状态管理?
- FB-29-SD-A-002 如何设计一个支持乐观更新的全局状态方案?
- FB-29-SS-A-001 服务端状态管理和客户端状态管理有什么区别?
可观测性(34 道)
- FB-30-CD-A-016 实现一个前端错误边界并接入监控
- 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 日志级别与使用场景
- FB-30-EN-A-012 如何设计一个前端日志采集 SDK?
- FB-30-EN-A-013 前端错误监控 SDK 设计
- FB-30-EN-A-014 前端埋点方案对比
- FB-30-EN-A-015 前端 SDK 版本管理与灰度
- FB-30-EN-A-016 前端监控 SDK 的加载方式
- FB-30-EN-A-017 监控数据存储与成本控制
- FB-30-FS-A-001 线上 JS 错误率突增如何排查
- FB-30-FS-A-002 前端错误归因方法
- FB-30-PE-A-011 Synthetic 监控与 RUM 有什么区别?
- FB-30-PE-A-012 前端 RUM 指标体系设计
- FB-30-PE-A-013 前端性能监控如何影响性能
- FB-30-PE-A-014 如何监控和优化 LCP
- FB-30-PE-A-015 如何监控前端资源加载
- FB-30-SC-A-009 如果一个页面白屏,如何利用可观测性数据定位根因?
- FB-30-SC-A-014 如何处理前端高频埋点/性能数据上报不阻塞业务?
- FB-30-SC-A-015 遇到线上故障,你的处理流程是什么?
- FB-30-SC-A-016 页面白屏如何定位
- FB-30-SC-A-017 如何监控微前端子应用健康度
- FB-30-SC-A-018 如何利用监控数据驱动性能优化
- FB-30-SC-A-019 如何利用监控快速定位线上问题
- FB-30-SC-A-020 前端灰度发布监控
- FB-30-SD-A-001 设计一个前端监控体系。
- FB-30-SD-A-002 如何设计一个高可用的前端发布流程?
安全架构(29 道)
- 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 的关系
- FB-31-SC-A-001 前端上传文件安全
- FB-31-SD-A-001 如何设计一个隐私合规的前端应用?
- FB-31-SE-A-001 前端加密与后端加密有什么区别?前端加密能否替代 HTTPS?
- FB-31-SE-A-002 什么是安全左移?前端如何实践?
- FB-31-SE-A-003 前端如何安全存储 Token
- FB-31-SE-A-004 HTTPS 在前端安全中的作用
- FB-31-SE-A-005 前端如何处理文件上传安全
- FB-31-SE-A-006 如何安全使用第三方脚本
- FB-31-SE-A-007 前端如何防止原型链污染
- FB-31-SE-A-008 前端如何处理 URL 参数安全
- FB-31-SE-A-009 前端如何应对供应链投毒事件
- FB-31-SE-A-010 前端日志中的隐私合规
- FB-31-SE-A-011 前端密钥管理
- FB-31-SE-A-012 CSP report-only 模式的价值
实时与协同(27 道)
- FB-32-CD-A-001 如何设计一个实时数据看板?
- 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 与自动重连
- FB-32-FS-A-001 实时消息延迟高如何排查
- FB-32-PE-A-001 实时系统前端性能优化
- FB-32-PE-A-002 实时数据前端采样
- FB-32-SC-A-001 设计一个实时消息推送系统
- FB-32-SC-A-002 实时系统中的心跳设计
- FB-32-SC-A-003 实时聊天前端架构设计
- FB-32-SC-A-004 实时系统中如何做限流与降级
- FB-32-SC-A-005 实时系统中的多端一致性
- FB-32-SC-A-006 实时消息队列前端处理
- FB-32-SC-A-007 实时白板冲突处理
- FB-32-SE-A-001 实时系统中的鉴权与安全
国际化(29 道)
- FB-33-CD-A-001 如何设计一个支持多语言的组件库?
- 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 简介
- FB-33-EN-A-001 全球化部署需要考虑哪些合规问题?
- FB-33-PE-A-001 国际化对前端性能的影响及优化
- FB-33-PE-A-002 多语言包的体积优化
- FB-33-PE-A-003 国际化对首屏性能的影响
- FB-33-PE-A-004 多语言资源分包策略
- FB-33-SC-A-001 如何设计前端多语言资源管理
- FB-33-SC-A-002 国际化与路由/SEO 的结合
- FB-33-SC-A-003 前端如何做语言切换体验
- FB-33-SC-A-004 如何处理翻译中的占位符和 HTML
- FB-33-SC-A-005 如何在前端做翻译质量检查
- FB-33-SC-A-006 多语言下的日期格式化
- FB-33-SC-A-007 RTL 测试要点
- FB-33-SD-A-001 如何设计一个可扩展的翻译工作流?
可视化与图形(28 道)
- FB-34-CD-A-014 用 D3.js 的 scale 和 selection 将一组数据绑定到一组矩形上,并实现 enter/update/exit 更新。
- 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 数据可视化颜色无障碍
- FB-34-EN-A-016 可视化工程架构中,如何分离组件、数据、样式与渲染器?
- FB-34-EN-A-017 可视化组件库的工程化实践
- FB-34-FS-A-011 ECharts 的 series、data、option 更新机制是怎样的?如何避免“全量更新”?
- FB-34-PE-A-012 Canvas 大数据量渲染性能调优:离屏渲染、分层、脏矩形、requestAnimationFrame
- FB-34-PE-A-013 大数据量图表如何优化
- FB-34-PE-A-014 动画性能优化在可视化中的实践
- FB-34-PE-A-015 WebGL 在可视化中的使用时机
- FB-34-PE-A-016 3D 可视化性能优化
- FB-34-PE-A-017 Canvas 离屏渲染优化
- FB-34-SC-A-010 一个 10 万数据点的散点图在 SVG/Canvas 中卡顿,你会从哪些层面优化?
- FB-34-SC-A-011 如何设计一个可配置的图表组件
- FB-34-SC-A-012 如何实现图表的响应式布局
- FB-34-SC-A-013 如何导出图表为图片/PDF
- FB-34-SC-A-014 可视化项目中的数据格式设计
- FB-34-SC-A-015 如何设计实时数据可视化
- FB-34-SC-A-016 图表响应式适配方案
- FB-34-SC-A-017 图表导出图片方案
- FB-34-SD-A-001 设计一个实时数据可视化大屏,需要关注哪些方面?
- FB-34-SD-A-002 如何设计一个可扩展的图表库?
Serverless/Edge(26 道)
- FB-35-CD-A-001 Edge 函数如何实现路由改写与 A/B 测试?
- 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 边缘函数的限制
- FB-35-PE-A-001 Serverless 冷启动如何优化?
- FB-35-PE-A-002 Serverless 成本优化策略
- FB-35-PE-A-003 边缘函数的缓存策略
- FB-35-SC-A-001 前端如何使用边缘函数做 A/B 测试
- FB-35-SC-A-002 前端 BFF 放在 Serverless 的考量
- FB-35-SC-A-003 边缘函数如何做地理位置定向
- FB-35-SC-A-004 如何在 Serverless 中实现用户鉴权
- FB-35-SC-A-005 Serverless 应用如何做本地开发
- FB-35-SC-A-006 Serverless 下的 CI/CD 流程
- FB-35-SC-A-007 Serverless 下前端部署流程
- FB-35-SE-A-001 Serverless 安全与权限如何管理?
前端数据工程(25 道)
- FB-36-CD-A-001 如何设计一个前端 A/B 实验?
- 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 什么是数据目录
- FB-36-PE-A-001 前端如何处理大数据量?
- FB-36-PE-A-002 前端大数据可视化的性能策略
- FB-36-SC-A-001 如何设计前端埋点数据模型
- FB-36-SC-A-002 如何设计前端实时数据看板
- FB-36-SC-A-003 如何设计埋点数据的质量校验
- FB-36-SC-A-004 如何设计前端数据采集 SDK
- FB-36-SC-A-005 如何保障报表数据的实时性
- FB-36-SC-A-006 如何做埋点事件的归因分析
- FB-36-SC-A-007 前端埋点数据采集设计
- FB-36-SD-A-001 如何设计一个科学的 AB 实验?
业务洞察(22 道)
- 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 分析指导前端优化?
- FB-37-CP-A-006 平台型业务中,如何平衡“用户体验”与“平台变现”?
- FB-37-SC-A-001 如何为 B2B SaaS 产品的“试用转付费”设计前端数据埋点与指标看板?
- FB-37-SC-A-003 需求优先级排序常见框架有哪些?如何应用于前端排期?
- FB-37-SC-A-005 如果电商大促页面转化率低于预期,前端应从哪些维度排查?
- FB-37-SC-A-008 成本效益分析中,如何量化前端性能优化带来的业务价值?
- FB-37-SC-A-009 你负责的电商大促页面在流量高峰时转化率异常下跌,如何定位并解决?
- FB-37-SC-A-010 新功能上线后核心指标没有变化,如何向业务方解释并建议下一步?
- FB-37-SC-A-011 业务方要求上线一个未经充分验证的“爆款”活动页面,你如何把控风险?
- FB-37-SC-A-012 如何帮助业务方识别“伪需求”并引导到正确方向?
- FB-37-SC-A-013 产品要进入下沉市场,前端策略需要哪些调整?
团队领导力(17 道)
- FB-38-SC-A-001 如何从 0 到 1 组建一支高效的前端团队?
- FB-38-SC-A-003 1on1 中下属只谈业务不谈个人,如何引导深入沟通?
- FB-38-SC-A-004 跨职能协作中前端团队与产品、后端、测试经常冲突,如何建立协作机制?
- FB-38-SC-A-006 团队士气低落时,有哪些可操作的提振动作?
- FB-38-SC-A-007 远程 / hybrid 团队中如何保证信息透明与沟通效率?
- FB-38-SC-A-008 两位 senior 工程师都想升职但名额有限,你如何沟通?
- FB-38-SC-A-009 团队关键成员提出离职,你如何挽留和交接?
- FB-38-SC-A-010 你如何让远程或混合办公的前端团队保持高效协作?
- FB-38-SC-A-011 公司要求前端团队降本增效,你会从哪些方面入手?
- FB-38-SS-A-002 绩效管理中的 OKR 与 KPI 应如何组合使用?
- FB-38-SS-A-005 授权时如何把握“放手”与“兜底”的边界?
- FB-38-SS-A-008 如何识别高潜人才并制定培养计划?
- FB-38-SS-A-009 如何处理团队内两位核心工程师的技术路线争执?
- FB-38-SS-A-010 团队新成员上手慢,影响迭代效率,你会怎么做?
- FB-38-SS-A-011 如何给一个表现持续不达标的成员做绩效改进?
- FB-38-SS-A-012 如何建立前端团队的技术分享文化?
- FB-38-SS-A-013 如何在团队中推动一次有争议的工程规范落地?
技术战略(27 道)
- 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 什么是技术雷达?它如何帮助团队做技术决策?
- FB-39-CP-A-008 如何构建竞争技术壁垒?
- FB-39-CP-A-009 如何制定前端团队的技术雷达更新机制?
- FB-39-CP-A-010 如何评估一项新技术是否值得引入生产环境?
- FB-39-CP-A-011 如何设计前端团队的长期技术能力建设路线图?
- FB-39-CP-A-012 在技术战略中,如何平衡“标准化”与“业务灵活性”?
- FB-39-EN-A-004 如何建立技术债的识别、评估与偿还机制?
- FB-39-EN-A-005 如何设计前端工程化能力以支撑多业务线的快速迭代?
- FB-39-EN-A-006 如何在前端技术战略中平衡“先进性”与“稳定性”?
- FB-39-EN-A-007 什么是前端治理?它包含哪些方面?
- FB-39-EN-A-008 如何设计前端的安全治理体系?
- FB-39-SC-A-001 如何为前端团队制定一份可落地的年度技术规划?
- FB-39-SC-A-003 面对一个创新型前端项目,如何设计孵化流程?
- FB-39-SC-A-005 如何判断一个业务领域是否值得做中台/平台化?
- FB-39-SC-A-006 技术战略与公司‘降本增效’目标冲突时,你如何取舍?
- FB-39-SC-A-007 如何评估一个技术项目是否应该继续、扩大还是停止?
- FB-39-SC-A-008 如何推动前端团队从“需求执行者”向“技术合伙人”转变?
- FB-39-SC-A-009 技术战略中,如何为“创新”分配资源?
- FB-39-SC-A-010 如何在技术战略中平衡“内部效率工具”与“面向用户产品”的投入?
- FB-39-SS-A-006 研发预算有限时,如何分配资源到业务交付与技术基建?
- FB-39-SS-A-007 作为技术负责人,你如何管理上级对前端团队的期望?
沟通表达(18 道)
- FB-40-CO-A-001 如何准备一次技术演讲?
- FB-40-SC-A-001 产品提出不可能完成的 deadline,你如何沟通?
- FB-40-SC-A-002 两位 senior 对技术方案意见冲突,你如何协调?
- FB-40-SC-A-003 如何向非技术人员解释技术风险?
- FB-40-SC-A-004 如何推动团队采纳一项有争议的技术决策?
- FB-40-SC-A-005 前后端接口责任边界不清,怎么处理?
- FB-40-SC-A-008 项目延期,如何同步业务和老板?
- FB-40-SC-A-009 业务方在会上当众质疑前端交付质量,你如何回应?
- FB-40-SC-A-010 如何让沉默寡言的团队成员在会议中发声?
- FB-40-SC-A-011 如何用“讲故事”的方式汇报技术项目成果?
- FB-40-SC-A-012 当团队成员在公开场合互相指责时,你如何介入?
- FB-40-SS-A-006 方案被上级否决后,如何回应?
- FB-40-SS-A-007 如何在日常工作中建立个人影响力?
- FB-40-SS-A-008 如何处理团队内部的技术选型冲突?
- FB-40-SS-A-009 如何向非技术背景的利益相关者解释一次前端重构的必要性?
- FB-40-SS-A-010 如何在会议中有效表达自己的技术观点?
- FB-40-SS-A-011 如何用一页纸向 CTO 汇报前端团队季度成果?
- FB-40-SS-A-012 当你的技术方案被否定时,你如何回应?
项目管理(21 道)
- FB-41-CO-A-005 敏捷估算中 Story Point 是什么?为什么不用绝对人天?
- FB-41-CO-A-006 技术债在项目中的典型表现有哪些?如何与产品/项目经理沟通排期偿还?
- FB-41-EN-A-007 前端项目常用哪些度量指标评估进度与健康度?
- FB-41-EN-A-008 如何用数据和指标驱动项目管理?
- FB-41-EN-A-009 如何设计一个适合前端团队的轻量级项目管理流程?
- FB-41-SC-A-001 需求方频繁变更需求,作为前端负责人你如何应对?
- FB-41-SC-A-002 项目进度落后两周,你将如何制定追赶计划?
- FB-41-SC-A-003 前端项目上线后出现严重线上 Bug,如何进行应急响应与根因分析?
- FB-41-SC-A-008 团队成员能力参差不齐,如何分配任务并保证交付质量?
- FB-41-SC-A-009 项目进度严重落后,你如何向业务和团队同步并调整?
- FB-41-SC-A-010 如何管理项目中的关键路径?
- FB-41-SC-A-011 项目上线前,你会做哪些检查和准备?
- FB-41-SC-A-012 项目上线后出现严重 Bug,你如何组织应急响应?
- FB-41-SS-A-004 跨职能项目中,如何与后端、产品、设计有效协作?
- FB-41-SS-A-005 项目进度落后时,你会怎么做?
- FB-41-SS-A-006 如何管理需求变更?
- FB-41-SS-A-007 如何管理项目中的多方利益相关者?
- FB-41-SS-A-008 项目结束后,你会如何组织复盘?
- FB-41-SS-A-009 如何判断一个项目是否应该正式立项?
- FB-41-SS-A-010 项目过程中需求频繁变更,你如何管理团队情绪和节奏?
- FB-41-SS-A-011 你如何设定和管理项目里程碑?
招聘(22 道)
- FB-42-CO-A-011 面试官培训应该覆盖哪些内容?
- FB-42-CO-A-012 如何处理绩效不达标的员工?
- FB-42-CP-A-015 如何平衡招聘速度与招聘质量?
- FB-42-CP-A-016 如何设计一个有效的前端社招面试流程?
- FB-42-CP-A-017 如何评估候选人的前端工程化能力?
- FB-42-CP-A-018 如何识别候选人的真实项目贡献,而不是简历包装?
- FB-42-CP-A-019 面试中如何评估候选人的学习能力和成长潜力?
- FB-42-EN-A-014 如何设计校招培养体系?
- FB-42-SC-A-009 如何为一个新业务设计完整的面试流程?
- FB-42-SC-A-012 如何识别简历中的“水分”和过度包装?
- FB-42-SC-A-016 如何设计多元包容的招聘策略?
- FB-42-SC-A-017 如何设计前端工程师的职级标准和晋升体系?
- FB-42-SC-A-018 如何在招聘中平衡“文化契合”与“多样性”?
- FB-42-SC-A-019 如何通过技术博客/开源贡献吸引优秀前端人才?
- FB-42-SC-A-020 面试中如何评估候选人的代码可维护性意识?
- FB-42-SD-A-001 如何设计一份好的代码作业?
- FB-42-SS-A-010 如何设计前端技术面的评分表?
- FB-42-SS-A-013 行为面试中如何追问 STAR 故事?
- FB-42-SS-A-017 招聘过程中,候选人拒绝了 offer,你会如何复盘?
- FB-42-SS-A-018 如何提高前端团队的内推比例?
- FB-42-SS-A-019 如何在有限预算下吸引高质量前端候选人?
- FB-42-SS-A-020 面试官自身能力不足时,如何保证面试质量?
技术品牌与布道(25 道)
- 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?
- FB-43-CP-A-006 技术博客/公众号的内容策略应该怎么做?请给出一个内容矩阵示例。
- FB-43-CP-A-007 如何选择技术内容发布的平台和渠道?
- FB-43-CP-A-008 如何设计一个吸引开发者的开源项目?
- FB-43-CP-A-009 如何利用技术大会提升团队品牌?
- FB-43-CP-A-010 如何通过技术品牌建设支撑业务增长?
- FB-43-SC-A-001 如何从 0 到 1 运营一个团队技术公众号或博客?
- FB-43-SC-A-002 如何在公司内部组织一场高质量的技术分享会?
- FB-43-SC-A-005 如何设计一套内部技术分享激励机制,让大家愿意分享?
- FB-43-SC-A-007 技术大会演讲的选题和提案(CFP)如何准备更容易被选中?
- FB-43-SC-A-008 公司内部如何建立技术分享的氛围?
- FB-43-SC-A-009 技术布道活动中,如何平衡“宣传公司”和“提供价值”?
- FB-43-SC-A-010 如何衡量一篇技术文章是否成功?
- FB-43-SC-A-011 如何帮助团队成员建立个人技术影响力?
- FB-43-SS-A-003 作为技术专家,如何平衡业务交付和技术品牌建设的时间冲突?
- FB-43-SS-A-004 如何激励团队成员参与技术品牌输出?
- FB-43-SS-A-005 开源项目维护者 burnout 如何预防?
- FB-43-SS-A-006 技术品牌建设中,如何处理负面反馈或批评?
- FB-43-SS-A-007 如何在全球化背景下建设技术品牌?
- FB-43-SS-A-008 如何评估技术布道活动对招聘的实际效果?
- FB-43-SS-A-009 技术品牌建设过程中,如何避免团队变成“为了发声而发声”?
技术治理与合规(20 道)
- FB-44-CO-A-001 变革阻力通常来自哪里?
- FB-44-CP-A-001 如何平衡业务交付与技术债偿还?
- FB-44-EN-A-001 如何通过 CI/CD 流水线实现技术治理的自动化?
- FB-44-EN-A-002 如何建立前端代码规范并保证执行?
- FB-44-SC-A-001 如何在前端团队落地一套代码规范并保证执行?
- FB-44-SC-A-002 如何识别和量化前端技术债?
- FB-44-SC-A-003 设计一个前端架构评审 checklist。
- FB-44-SC-A-004 前端如何应对安全合规审计?
- FB-44-SC-A-005 如何建立前端数据分类分级与访问控制机制?
- FB-44-SC-A-006 如何防止前端代码库出现“架构腐化”?
- FB-44-SC-A-007 如何管理前端项目的第三方依赖风险?
- FB-44-SC-A-008 如何建立前端的安全治理流程?
- FB-44-SC-A-009 如何确保前端项目符合 GDPR、CCPA 等隐私法规?
- FB-44-SC-A-010 如何治理前端项目中的“影子 IT”或未经审批的工具?
- FB-44-SS-A-001 技术治理委员会通常由哪些角色组成?职责是什么?
- FB-44-SS-A-002 如何推动团队采用新的技术标准?
- FB-44-SS-A-003 如何在治理与效率之间找到平衡?
- FB-44-SS-A-004 当治理规则与业务紧急情况冲突时,你如何处理?
- FB-44-SS-A-005 如何推动团队接受并遵守新的治理规则?
- FB-44-SS-A-006 技术治理中,如何处理不同业务线的差异化需求?
小程序(20 道)
- 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 有什么区别?
- FB-45-PE-A-004 小程序分包加载的原理是什么?如何配置?
- FB-45-PE-A-005 小程序性能优化有哪些常用手段?
- FB-45-PE-A-006 微信小程序首屏加载慢,如何系统排查?
- FB-45-PE-A-007 微信小程序如何避免 setData 性能问题?
- FB-45-PE-A-008 微信小程序的渲染层和逻辑层通信优化有哪些?
- FB-45-PE-A-009 微信小程序如何做图片资源优化?
- FB-45-PE-A-010 微信小程序如何做网络请求优化?
- FB-45-SE-A-007 小程序的权限管理和用户授权如何处理?
- FB-45-SE-A-008 微信小程序有哪些常见安全漏洞及防护措施?
- FB-45-SE-A-009 微信小程序如何防止代码被反编译后泄露业务逻辑?
鸿蒙 ArkTS / HarmonyOS(25 道)
- FB-46-CA-A-013 下面代码中,点击按钮后父组件的 counter 会变化吗?为什么?
- FB-46-CD-A-014 请手写一个可复用的 ArkTS 自定义按钮组件。
- FB-46-CD-A-015 用 ArkTS 实现一个简单的计数器组件。
- FB-46-CD-A-016 用 ArkTS 实现一个 TODO 列表,支持添加和删除。
- FB-46-CD-A-017 用 ArkTS 实现一个简单的网络请求并展示列表。
- FB-46-CD-A-018 用 ArkTS 实现一个自定义弹窗组件。
- 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 鸿蒙应用如何实现页面路由跳转?
- FB-46-EN-A-016 鸿蒙工程化中有哪些模块化方案?如何选择 HAR、HSP、Feature HAP?
- FB-46-EN-A-017 鸿蒙应用如何集成第三方库?
- FB-46-EN-A-018 鸿蒙应用的模块化开发方式有哪些?
- FB-46-PE-A-015 鸿蒙中如何进行列表渲染?有哪些性能优化手段?
- FB-46-PE-A-016 鸿蒙应用启动慢如何排查?
- FB-46-PE-A-017 鸿蒙 ArkUI 中如何实现列表性能优化?
- FB-46-PE-A-018 鸿蒙应用如何做内存优化?
- FB-46-SE-A-001 鸿蒙应用的安全机制有哪些?
- FB-46-SS-A-001 鸿蒙应用上架需要经过哪些流程?
- FB-46-SS-A-002 鸿蒙生态目前的发展现状对前端开发者意味着什么?
Flutter(18 道)
- FB-47-CD-A-006 请手写一个基于 BLoC 的计数器,并说明其核心设计。
- 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 文件主要配置哪些内容?
- FB-47-FS-A-001 请详细描述 Flutter 的渲染流程:从 Widget 到屏幕像素经历了哪些阶段?
- FB-47-FS-A-002 Skia 和 Impeller 有什么区别?Impeller 解决了什么问题?
- FB-47-FS-A-004 Provider 是如何基于 InheritedWidget 工作的?
- FB-47-PE-A-007 Flutter 性能优化有哪些常用手段?
- FB-47-PE-A-008 Flutter 应用启动慢如何优化?
- FB-47-PE-A-009 Flutter 列表性能优化有哪些手段?
- FB-47-PE-A-010 Flutter 如何减少 Widget 重建?
- FB-47-PE-A-011 Flutter 包体积如何优化?
- FB-47-PE-A-012 Flutter 中如何优化图片加载和内存?
Electron(23 道)
- FB-48-CD-A-002 如何在 preload 中通过 contextBridge 安全地暴露 API?
- 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 有哪些常用配置?
- FB-48-EN-A-007 Electron 打包与代码签名的流程是什么?
- FB-48-EN-A-008 Electron 应用如何制定测试策略?
- FB-48-EN-A-009 Electron 应用的安全最佳实践有哪些?
- FB-48-EN-A-010 Electron 应用如何做崩溃收集和日志记录?
- FB-48-EN-A-011 Electron 应用启动白屏如何优化?
- FB-48-PE-A-005 Electron 应用有哪些性能优化手段?
- FB-48-SC-A-004 如何实现 Electron 多窗口管理与状态同步?
- FB-48-SC-A-005 Electron 中如何实现多窗口管理?
- FB-48-SC-A-006 Electron 应用如何实现自定义标题栏?
- FB-48-SC-A-007 Electron 中如何实现托盘图标和菜单?
- FB-48-SC-A-008 Electron 如何与本地数据库交互?
- FB-48-SE-A-003 Electron 应用应该遵循哪些安全最佳实践?
- FB-48-SE-A-004 Electron 应用如何防止 XSS 和 RCE 攻击?
- FB-48-SE-A-005 Electron 应用的代码签名流程是怎样的?
- FB-48-SE-A-006 Electron 应用如何保护本地敏感数据?
WebAssembly(19 道)
- FB-49-CA-A-008 下面 WASM 内存操作代码会发生什么?如何排查?
- FB-49-CD-A-003 手写 JS 调用 WASM 导出函数并传递字符串的示例
- 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 有什么区别?
- FB-49-EN-A-006 Emscripten 是什么?它的胶水代码(glue code)做了什么?
- FB-49-EN-A-007 如何在 Web 项目中集成 Rust 编译的 WebAssembly?
- FB-49-EN-A-008 Emscripten 编译 WebAssembly 时常用哪些编译选项?
- FB-49-EN-A-009 WebAssembly 在前端工程化中如何加载和打包?
- FB-49-PE-A-005 如何优化 WebAssembly 的启动时间和运行时性能?
- FB-49-PE-A-006 WebAssembly 模块体积如何优化?
- FB-49-PE-A-007 WebAssembly 与 JavaScript 互操作的性能瓶颈是什么?
- FB-49-PE-A-008 WebAssembly 启动性能如何优化?
WebGPU / 图形学(19 道)
- FB-50-CA-A-013 分析下面 WGSL 代码的输出与潜在问题。
- FB-50-CD-A-010 请写出用 WebGPU 绘制一个三角形的完整流程。
- 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 编写上有什么主要区别?
- FB-50-CP-A-001 如何处理 3D 场景中的大量相同对象(Instancing)?
- FB-50-PE-A-015 WebGPU 应用有哪些常见性能优化手段?
- FB-50-PE-A-016 WebGPU 中如何减少 Draw Call 数量?
- FB-50-PE-A-017 WebGPU 应用如何调试性能问题?
- FB-50-PE-A-018 WebGPU 中如何高效管理 Uniform Buffer?
多媒体(Multimedia)(17 道)
- FB-51-CD-A-012 用 Canvas 实现视频截图功能
- FB-51-CD-A-013 前端如何生成视频缩略图(thumbnail)?
- 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 的核心组件有哪些?
- FB-51-PE-A-010 视频播放卡顿如何排查和优化?
- FB-51-PE-A-011 多媒体前端开发中如何进行性能优化?
- FB-51-PE-A-012 前端如何实现视频预加载策略?
- FB-51-SC-A-001 如何处理直播中的网络抖动和卡顿?
低代码(19 道)
- FB-52-CD-A-004 请实现一个属性面板配置解析器
- 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 低代码平台如何支持自定义组件?
- FB-52-CP-A-001 低代码平台的 undo/redo 如何实现?
- FB-52-EN-A-007 低代码平台的组件物料如何做版本管理?
- FB-52-PE-A-006 低代码平台有哪些常见的性能优化手段?
- FB-52-PE-A-007 低代码平台的性能瓶颈通常在哪里?如何优化?
- FB-52-SC-A-005 如何实现低代码表单中的字段联动?
- FB-52-SC-A-006 低代码平台如何与现有代码仓库集成?
- FB-52-SC-A-007 低代码平台如何应对复杂业务逻辑?
- FB-52-SD-A-001 低代码平台的组件库如何设计才能兼顾灵活性和一致性?
- FB-52-SD-A-002 低代码平台如何做版本管理和回滚?
- FB-52-SE-A-008 低代码平台需要考虑哪些安全问题?
计算机基础(16 道)
- 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 缓存机制。
- FB-53-CP-A-001 前端如何实现一个 Trie 树(前缀树)?
行为面试(15 道)
- FB-54-SS-A-001 请用 STAR 法则讲一个你最有代表性的项目
- FB-54-SS-A-002 描述一次你经历过的失败,以及你是如何复盘的
- FB-54-SS-A-003 与同事在技术方案上意见不一致时,你会怎么处理?
- FB-54-SS-A-004 你如何推动跨部门协作?
- FB-54-SS-A-005 你如何平衡技术债与业务需求?
- FB-54-SS-A-006 你如何学习一项新技术?
- FB-54-SS-A-007 你如何看待公司价值观或文化匹配?
- FB-54-SS-A-008 你的职业规划是什么?
- FB-54-SS-A-009 请介绍一个你最有成就感的项目。
- FB-54-SS-A-010 请描述一次你与同事产生冲突的经历,以及你是如何处理的。
- FB-54-SS-A-011 请介绍一次你失败的经历,以及你从中学到了什么。
- FB-54-SS-A-012 请描述一次你在压力下完成任务的经历。
- FB-54-SS-A-013 请描述一次你带领团队完成目标的经历。
- FB-54-SS-A-014 请描述一次你提出创新想法并被采纳的经历。
- FB-54-SS-A-015 请描述一次你不得不适应快速变化的需求的经历。
简历与面试技巧(15 道)
- FB-55-CP-A-012 如何准备作品集与技术博客?
- FB-55-RI-A-001 请介绍一下你简历上这个项目的背景和你的职责。
- FB-55-RI-A-002 这个项目的技术难点是什么?你是如何解决的?
- FB-55-RI-A-003 你在项目中做了哪些性能优化?效果怎么样?
- FB-55-RI-A-004 你在项目中是如何做代码质量保障的?
- FB-55-RI-A-005 你在这个项目中与后端/产品的协作方式是怎样的?
- FB-55-RI-A-006 请介绍一下你参与过的最有技术挑战的项目。
- FB-55-RI-A-007 你在这个项目中遇到的最大技术难点是什么?
- FB-55-SC-A-013 不同面试轮次(HR 面、技术面、交叉面、总监面)分别应如何准备?
- FB-55-SS-A-009 面试中如何向面试官提问?
- FB-55-SS-A-010 如何准备常见行为面试题?
- FB-55-SS-A-011 面试中遇到不会的问题怎么办?
- FB-55-SS-A-014 面试失败后的调整策略是什么?
- FB-55-SS-A-015 跳槽时如何评估时机与风险?
- FB-55-SS-A-016 面试中常见的认知误区有哪些?
行业特化(15 道)
- FB-56-CO-A-001 云原生趋势如何影响前端部署与工程化?
- FB-56-CO-A-008 如何判断一个行业技术趋势的成熟度?
- FB-56-CP-A-007 行业特点如何影响前端技术选型?
- FB-56-EN-A-006 跨行业迁移时如何评估技术栈复用性?
- FB-56-IN-A-001 你如何看待当前前端行业的发展趋势?
- FB-56-IN-A-002 你对我们公司所在的行业有什么了解?
- FB-56-IN-A-003 你认为前端工程师在数字化转型中扮演什么角色?
- FB-56-IN-A-004 你怎么看待低代码/无代码对前端岗位的影响?
- FB-56-IN-A-005 你如何看待前端工程化的重要性?
- FB-56-IN-A-006 你如何看待前端在企业级 SaaS 中的价值?
- FB-56-IN-A-007 你怎么看待 Web 应用和原生应用的竞争关系?
- FB-56-PE-A-005 游戏行业前端性能优化的关键维度有哪些?
- FB-56-SC-A-002 电商大促场景下前端稳定性保障要点有哪些?
- FB-56-SC-A-003 金融行业前端如何应对监管与合规要求?
- FB-56-SC-A-004 toB 产品如何做好权限设计与数据隔离?
深入题(1123 道)
JavaScript(24 道)
- FB-01-CA-P-001 下面代码的输出是什么?
- FB-01-CA-P-002 下面代码的输出顺序是什么?catch 能否捕获到错误?
- FB-01-CD-P-001 手写一个符合 Promise/A+ 规范的 Promise。
- FB-01-CD-P-002 手写一个 LRU Cache。
- FB-01-CD-P-003 手写一个 Generator 自动执行器,支持 yield Promise。
- FB-01-CD-P-004 如何实现一个响应式系统(类似 Vue3 的 reactive)?
- FB-01-CD-P-005 手写一个符合 Promise/A+ 规范的 Promise,关键点有哪些?
- FB-01-CD-P-006 手写一个带并发限制的异步任务调度器
- 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 的哪些问题?
- FB-01-CP-P-001 解释一下 Proxy 和 Reflect,为什么 Vue3 选择 Proxy 而不是 Object.defineProperty?
- FB-01-PE-P-001 V8 引擎是如何执行 JavaScript 的?解释 Ignition、TurboFan、隐藏类、内联缓存。
- FB-01-SC-P-001 什么是 Error Cause?在实际项目中如何构建分层的错误处理体系?
- FB-01-SC-P-002 设计一个前端路由拦截与权限校验系统
- FB-01-SD-P-001 设计一个支持取消的 Promise,并解释实现原理。
- FB-01-SD-P-002 如何设计一个高可靠的前端埋点 SDK?从错误监控、性能采集、数据上报等角度分析。
TypeScript(28 道)
- FB-02-CD-P-001 手写一个类型安全的 Promise.all
- FB-02-CD-P-002 手写一个类型安全的事件总线(Event Bus)
- 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 类型体操的度在哪里?如何保持可维护性?
- FB-02-CP-P-001 satisfies 与类型注解 :T、类型断言 as T 有什么区别?
- FB-02-PE-P-001 如何优化大型 TypeScript 项目的编译性能?
- FB-02-SC-P-001 解释 declare、namespace、module 的区别与使用场景。
- FB-02-SC-P-002 TypeScript 编译配置 strict: true 会开启哪些检查?实际项目中如何取舍?
- FB-02-SD-P-001 如何设计一个类型安全的前端 API 请求层?
Browser(22 道)
- 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?它对前端开发者有什么意义?
- FB-03-PE-P-001 为什么 transform 和 opacity 动画通常比 top/left 动画性能更好?
- FB-03-PE-P-002 长任务(Long Tasks)如何影响性能?如何检测和拆分?
- FB-03-PE-P-003 浏览器是如何保证渲染进程安全的?什么是站点隔离(Site Isolation)?
- FB-03-PE-P-004 如何分析并优化首屏加载时间(FCP/LCP)?
- FB-03-SC-P-001 设计一个浏览器端图片懒加载与占位方案。
- FB-03-SC-P-002 浏览器的内存泄漏常见场景有哪些?如何排查?
- FB-03-SC-P-003 如何设计浏览器端的安全架构防御 XSS、CSRF、点击劫持?
- FB-03-SD-P-001 如何设计一个高性能的虚拟列表(Virtual List)?
- FB-03-SE-P-001 Content Security Policy(CSP)如何限制 XSS 攻击?有哪些常用指令?
计算机网络(28 道)
- 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 的设计差异
- FB-04-CP-P-001 TCP 的滑动窗口、流量控制和拥塞控制有什么区别?
- FB-04-CP-P-002 TLS 1.2 和 TLS 1.3 握手过程有什么区别?为什么 TLS 1.3 更快?
- FB-04-CP-P-003 DNS 劫持和 HTTP 劫持有什么区别?如何防御?
- FB-04-PE-P-001 将前端项目从 HTTP/2 迁移到 HTTP/3 需要考虑哪些性能与安全因素?
- FB-04-PE-P-002 前端网络性能优化可以从哪些层面入手?
- FB-04-PE-P-003 前端如何测量和优化 TTFB?
- FB-04-SC-P-001 如何设计一个支持高并发的 WebSocket 聊天室?
- FB-04-SC-P-002 如何设计 RESTful API 的幂等性、版本控制与分页?
- FB-04-SC-P-003 区分以下 HTTP 状态码的使用场景:200、201、204、301、302、400、401、403、404、429、500、502、503、504。
- FB-04-SC-P-004 设计一个高并发短链服务的前后端接口
- FB-04-SC-P-005 设计一个断点续传上传组件
- FB-04-SD-P-001 如何设计一个高可用的前端网络请求层?
- FB-04-SE-P-001 CSP、SameSite Cookie 与安全响应头如何协同防御前端攻击?
- FB-04-SE-P-002 网络层 DDoS 攻击的原理与防御思路
Web 安全(23 道)
- FB-05-CA-P-001 分析下面代码是否存在原型污染漏洞,并修复。
- FB-05-CO-P-001 什么是 Prototype Pollution?如何防御?
- FB-05-CO-P-002 WebAuthn / Passkeys 的基本原理和优势是什么?
- FB-05-SC-P-001 在 SPA 中实现 OAuth 2.0 + PKCE,请描述安全细节。
- FB-05-SE-P-001 深入分析 DOM 型 XSS 的触发原理与防御难点。
- FB-05-SE-P-002 什么是原型污染(Prototype Pollution)?前端如何利用或防御?
- FB-05-SE-P-003 什么是 DOM Clobbering?它如何绕过某些安全控制?
- FB-05-SE-P-004 什么是 MIME Sniffing / Content Sniffing 攻击?如何防御?
- FB-05-SE-P-005 什么是开放重定向(Open Redirect)?前端如何参与防御?
- FB-05-SE-P-006 XSS 过滤/转义有哪些常见绕过手法?如何设计更健壮的防御?
- FB-05-SE-P-007 什么是供应链攻击?前端项目中有哪些典型风险点?
- FB-05-SE-P-008 除了 X-Frame-Options,点击劫持还有哪些高级防御手段?
- FB-05-SE-P-011 什么是供应链安全?前端项目如何做好依赖安全?
- FB-05-SE-P-012 OAuth 2.0 隐式授权模式有什么问题?PKCE 如何解决?
- FB-05-SE-P-013 什么是刷新令牌轮换(Refresh Token Rotation)?
- FB-05-SE-P-014 CSP 的 script-src、style-src、img-src 等指令如何配置?
- FB-05-SE-P-015 如何防御 DOM Clobbering 攻击?
- FB-05-SE-P-016 前端密钥管理有哪些原则和最佳实践?
- FB-05-SE-P-017 Secure Cookie 与 SameSite=None 的兼容处理
- FB-05-SE-P-018 什么是 Trusted Types?如何缓解 DOM XSS?
- FB-05-SE-P-019 如何对富文本进行安全过滤?
- FB-05-SE-P-020 npm 恶意包有哪些典型攻击手法与防御?
- FB-05-SE-P-021 如何安全地实现前端端到端加密(E2EE)?
HTML/CSS(13 道)
- FB-06-CA-P-001 分析下面复杂选择器的性能问题。
- FB-06-CD-P-001 使用 CSS Grid 实现一个圣杯布局(Holy Grail Layout)。
- 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 的关系?
- FB-06-CP-P-001 CSS 作用域和模块化的演进路线是怎样的?
- FB-06-PE-P-001 什么是关键 CSS(Critical CSS)?如何提取和优化?
- FB-06-SC-P-001 设计一个企业级多主题切换系统。
可访问性(a11y)(13 道)
- FB-07-CD-P-001 实现一个可访问的模态对话框(Modal Dialog)。
- 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)添加无障碍文本?
- FB-07-PE-P-001 无障碍性对页面性能有什么影响?如何优化?
- FB-07-SC-P-001 如何为一个复杂的自定义组件(如 Autocomplete)设计无障碍方案?
- FB-07-SS-P-001 无障碍合规审计流程与整改闭环如何建立?
数据结构与算法(17 道)
- FB-08-CD-P-001 最长递增子序列。
- FB-08-CD-P-002 0-1 背包问题。
- FB-08-CD-P-003 编辑距离。
- FB-08-CD-P-004 全排列和子集。
- FB-08-CD-P-005 N 皇后问题。
- FB-08-CD-P-006 Top K 问题。
- FB-08-CD-P-007 数据流中的中位数。
- FB-08-CD-P-008 合并 K 个有序链表。
- FB-08-CD-P-009 图的 BFS 和 DFS 遍历。
- FB-08-CD-P-010 岛屿数量。
- FB-08-CD-P-011 合并区间。
- FB-08-CD-P-012 手写一个最小堆 / 优先队列
- FB-08-CD-P-013 手写 Trie(前缀树)
- FB-08-CD-P-014 手写并查集
- FB-08-CO-P-001 位运算有哪些常见技巧?在前端中有哪些应用?
- FB-08-SC-P-001 设计一个支持撤销重做的编辑器状态系统
- FB-08-SC-P-002 实时协作编辑的 OT 或 CRDT 简版思路
设计模式(14 道)
- FB-09-CD-P-001 用装饰器模式实现日志记录和权限校验。
- FB-09-CD-P-002 用 Proxy 实现一个简易的响应式系统。
- 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 桥接模式解决了什么问题?
- FB-09-SC-P-001 如何设计一个可扩展的电商促销计算引擎?
构建工具(31 道)
- FB-10-CD-P-001 手写一个 Webpack Plugin,在构建完成后输出所有 chunk 文件名。
- FB-10-CD-P-002 手写一个 Rollup 插件,将多个 JSON 文件合并为虚拟模块导出
- FB-10-CD-P-016 手写一个 Vite/Rollup 插件,支持直接导入 Markdown 文件为 HTML 字符串。
- FB-10-CD-P-017 手写一个 Webpack Plugin,输出构建产物体积报告
- 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 有什么区别?
- FB-10-EN-P-018 前端项目如何治理依赖版本、Lockfile 和 Changelog?
- FB-10-EN-P-019 如何编写一个支持 Tree Shaking 的 npm 库?
- FB-10-PE-P-001 大型前端项目构建性能优化实战方案。
- FB-10-PE-P-002 如何设计一个大型前端项目的增量构建方案?
- FB-10-PE-P-017 大型 Monorepo 的构建性能优化有哪些关键手段?
- FB-10-PE-P-018 如何优化 Vite 生产构建速度?
- FB-10-SC-P-001 在微前端项目中,构建工具应该如何配合设计?
- FB-10-SC-P-002 构建工具如何配合微前端实现独立部署与共享依赖?
- FB-10-SC-P-003 如何在构建阶段实现国际化资源的分包和按需加载?
- FB-10-SC-P-019 微前端多技术栈项目的构建隔离与共享依赖如何设计?
- FB-10-SC-P-020 如何为大型项目设计渐进式构建迁移方案?
Monorepo(31 道)
- FB-11-CO-P-001 Monorepo 中的版本一致性策略有哪些?
- FB-11-CP-P-022 如何评估和降低 Monorepo 中的“单点失败”风险?
- FB-11-CP-P-023 Monorepo 中如何处理 Breaking Change?
- FB-11-EN-P-001 Turborepo 和 Nx 的核心差异是什么?如何选择?
- FB-11-EN-P-002 Nx 的 affected 命令原理是什么?
- FB-11-EN-P-003 如何设计 Monorepo 的 build caching 策略?
- FB-11-EN-P-004 Lerna 在现代 Monorepo 中的定位是什么?
- FB-11-EN-P-005 Rush 如何解决大型 Monorepo 的依赖一致性问题?
- FB-11-EN-P-006 如何处理 Monorepo 中的循环依赖?
- FB-11-EN-P-007 workspace protocol 与相对路径引用内部包有什么区别?
- FB-11-EN-P-008 深入解析 pnpm 的 content-addressable store 原理。
- FB-11-EN-P-009 如何在 Monorepo 中实现跨包类型检查?
- FB-11-EN-P-010 详细说明 changesets 的 fixed 与 independent 模式内部实现差异。
- FB-11-EN-P-011 pnpm 的 patch 机制在 Monorepo 中如何使用?
- FB-11-EN-P-012 如何分析 Monorepo 中的依赖图并优化构建顺序?
- FB-11-EN-P-013 如何处理 Monorepo 中大型二进制产物或 generated code 的缓存?
- FB-11-EN-P-014 如何实现自定义 Turborepo remote cache backend?
- FB-11-EN-P-015 深入解析 pnpm 的 dedupe 机制。
- FB-11-EN-P-017 如何自己实现一个 affected 检测机制?
- FB-11-EN-P-018 大型 Monorepo 如何优化 Git 性能?
- FB-11-EN-P-020 如何处理跨包类型导出导致的 tree-shaking 问题?
- FB-11-EN-P-021 如何保证 Monorepo 中 generated files 在 CI 中的幂等性?
- FB-11-EN-P-022 如何优化 Monorepo 的 install 和 build 性能?
- FB-11-SC-P-001 多包版本策略:fixed mode vs independent mode
- FB-11-SC-P-002 多团队 Monorepo 中如何防止包依赖失控?
- FB-11-SC-P-003 设计 Monorepo 下多包联合调试方案。
- FB-11-SC-P-016 如何设计和执行 Monorepo 的包拆分或重构?
- FB-11-SC-P-017 Monorepo 中如何设计子包的测试策略?
- FB-11-SD-P-001 如何设计 Monorepo 的模块边界规则?
- FB-11-SD-P-019 如何设计 Monorepo 下的包级权限模型?
- FB-11-SD-P-020 如何设计 Monorepo 的变更影响分析?
CI/CD(31 道)
- FB-12-CO-P-025 什么是 CI/CD 中的 observability?
- FB-12-CP-P-024 如何设计蓝绿部署的 CI/CD 流水线?
- FB-12-EN-P-001 如何设计一套环境晋升(Environment Promotion)策略?
- FB-12-EN-P-003 如何优化前端 CI/CD 构建流水线的性能?
- FB-12-EN-P-004 如何优化前端 Docker 构建与镜像体积?
- FB-12-EN-P-005 如何在 CI/CD 中设置有效的质量门禁(Quality Gates)?
- FB-12-EN-P-006 CI/CD 中的回滚策略有哪些?如何设计快速回滚?
- FB-12-EN-P-007 如何保障 CI/CD 软件供应链安全?
- FB-12-EN-P-008 GitHub Actions 的 Reusable Workflow 与 Composite Action 有什么区别?
- FB-12-EN-P-009 CI/CD 中如何识别和治理 Flaky Test?
- FB-12-EN-P-010 如何防止 Pipeline as Code 被恶意 PR 篡改或滥用?
- FB-12-EN-P-011 如何在 CI/CD 中实现动态测试环境(Ephemeral Environment)?
- FB-12-EN-P-012 如何在大型团队统一和治理 npm/yarn/pnpm 在 CI 中的使用?
- FB-12-EN-P-013 如何在 CI/CD 中安全管理和上传 Source Map?
- FB-12-EN-P-014 如何为 Monorepo 设计自动化版本发布和 Changelog 生成?
- FB-12-EN-P-015 如何在 CI/CD 中使用 OIDC 实现云厂商免密登录?
- FB-12-EN-P-016 如何构建 CI/CD 流水线的可观测性体系?
- FB-12-EN-P-017 SSR 或边缘渲染项目的 CI/CD 有哪些特殊考虑?
- FB-12-EN-P-019 如何识别和治理 CI 中的 Flaky Test?
- FB-12-EN-P-022 如何设计基于 Changesets 的自动化版本发布?
- FB-12-EN-P-024 如何在 CI 中实现前端视觉回归测试?
- FB-12-EN-P-026 如何在 CI/CD 中实现精细化权限与审批?
- FB-12-EN-P-027 如何优化 CI 的缓存命中率?
- FB-12-EN-P-028 如何设计多环境(dev/staging/prod)部署策略?
- FB-12-SD-P-002 如何设计一个完整的前端 CI/CD 平台?
- FB-12-SD-P-018 如何优化大型前端 Monorepo 的 CI/CD 效率?
- FB-12-SD-P-020 如何设计前端私有 npm Registry 与 CI 集成方案?
- FB-12-SD-P-023 如何为大型前端团队设计 CI/CD 自助平台?
- FB-12-SD-P-025 如何设计跨云 CI/CD 架构?
- FB-12-SE-P-021 如何保障 CI/CD 软件供应链安全?
- FB-12-SE-P-022 CI 中如何实现灰度发布?
代码质量与测试(35 道)
- FB-13-CA-P-001 下面异步测试代码存在什么问题?如何修复?
- FB-13-CA-P-002 下面的测试代码存在什么时序问题?如何修复?
- FB-13-CA-P-003 下面这段异步测试代码存在竞态条件吗?
- 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?
- FB-13-CP-P-021 如何制定代码规范落地策略?
- FB-13-EN-P-001 如何在 CI/CD 流程中设计前端测试流水线?
- FB-13-EN-P-002 如何在 CI/CD 中实现前端测试失败自动分类与告警?
- FB-13-EN-P-003 如何在 Monorepo 中设计增量测试策略?
- FB-13-EN-P-004 如何在 CI/CD 中实现测试失败自动重试与 flaky 标记?
- FB-13-EN-P-017 如何设计可维护的测试用例?
- FB-13-PE-P-001 前端如何做性能测试?请列举指标和工具。
- FB-13-PE-P-002 如何对前端构建产物进行体积回归测试?
- FB-13-SC-P-001 测试不稳定(Flaky Test)有哪些常见原因?如何解决?
- FB-13-SC-P-002 E2E 测试中如何设计可维护的页面对象(POM)?
- FB-13-SC-P-003 如何设计一个前端 Mock 平台供多个团队使用?
- FB-13-SC-P-004 如何为一个多步骤表单 Wizard 设计 E2E 测试?
- FB-13-SC-P-005 如何为一个基于 WebSocket 的实时消息列表设计测试?
- FB-13-SC-P-006 如何设计质量门禁(Quality Gate)?
- FB-13-SE-P-018 如何做前端安全测试?
设计系统与组件库(24 道)
- 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 与运行时性能?
- FB-14-SC-P-001 组件库出现破坏性变更(Breaking Change)时应如何处理?
- FB-14-SC-P-002 如何设计可扩展的主题系统,支持业务线二次定制?
- FB-14-SC-P-003 组件库大版本升级时,如何制定迁移方案?
- FB-14-SC-P-004 组件库的性能优化有哪些手段?
- FB-14-SC-P-005 如何设计一个支持动态表单的 Form Engine?
- FB-14-SC-P-006 组件库如何做 API 兼容与废弃治理?
- FB-14-SC-P-007 如何设计支持国际化的组件库?
- FB-14-SC-P-008 组件库与低代码平台如何结合?
- FB-14-SC-P-009 如何设计组件库的插件与扩展机制?
- FB-14-SC-P-010 大型组件库如何做版本灰度与 AB 实验?
- FB-14-SC-P-011 如何设计一个可拖拽的组件?
- FB-14-SC-P-012 如何设计组件库的国际化文案管理?
- FB-14-SC-P-013 如何设计组件库的错误边界和降级策略?
- FB-14-SC-P-014 组件库如何支持微前端下的样式隔离?
- FB-14-SC-P-015 如何设计组件库的埋点与可观测性?
- FB-14-SD-P-001 如何从 0 到 1 设计一个企业级组件库?
React(26 道)
- 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 有什么作用?
- FB-15-FS-P-018 React Fiber 架构解决了什么问题?请简述它的两个阶段。
- FB-15-FS-P-019 setState 是异步还是同步的?React 18 的自动批量更新有什么变化?
- FB-15-FS-P-020 React 的 Diff 算法是如何工作的?key 在其中起什么作用?
- FB-15-FS-P-021 React 18 的 Concurrent 特性有哪些?useTransition 和 useDeferredValue 怎么用?
- FB-15-FS-P-023 什么是 React Server Components(RSC)?它和 Client Components 有什么区别?
- FB-15-FS-P-024 Suspense 是什么?如何与数据获取、Error Boundary 配合使用?
- FB-15-FS-P-025 React 19 的 Server Actions 和 useOptimistic 解决了什么问题?
- FB-15-FS-P-026 什么是 Hydration?Hydration Mismatch 有哪些常见原因和解决办法?
- FB-15-FS-P-048 React 的 Reconciliation 是什么?和 Diff 有什么关系?
- FB-15-FS-P-049 React Scheduler 是如何调度任务的?
- FB-15-FS-P-050 为什么 Hooks 必须在顶层调用?
- FB-15-FS-P-051 React 的双缓冲机制是什么?
- FB-15-FS-P-053 React Compiler 是什么?它能解决什么问题?
- FB-15-FS-P-054 React 19 的 use 特性有什么作用?
- FB-15-FS-P-056 React 19 还有哪些值得关注的新特性?
- FB-15-FS-P-057 React 18 的 automatic batching 原理是什么?
- FB-15-FS-P-058 React 的 useDeferredValue 使用场景是什么?
- FB-15-FS-P-059 React 的 SuspenseList 是什么?
- FB-15-PE-P-052 React 中如何实现虚拟列表优化长列表?
- FB-15-PE-P-055 如何优化 React 应用的首屏加载性能?
- FB-15-PE-P-056 React 中如何实现虚拟列表优化长列表?
- FB-15-PE-P-057 React 中如何避免 context 导致的性能问题?
- FB-15-PE-P-058 React 中的代码分割策略有哪些?
Vue(25 道)
- FB-16-CA-P-001 分析异步组件与 Suspense 的错误处理行为
- FB-16-CD-P-001 手写一个 useEventListener Composable
- 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
- FB-16-CP-P-001 Vue 与 React 生态选型时应考虑哪些因素?
- FB-16-EN-P-001 如何使用 Vite 构建一个支持 Tree Shaking 的 Vue 组件库?
- FB-16-FS-P-018 Vue 3 的响应式原理是什么?为什么用 Proxy 替代 Object.defineProperty?
- FB-16-FS-P-019 Vue 3 的编译器做了哪些优化?PatchFlag 和静态提升是什么?
- FB-16-FS-P-020 Vue 中常见的响应式“坑”有哪些?如何避免?
- FB-16-FS-P-021 Vue 的 Diff 算法是怎么工作的?
- FB-16-FS-P-024 Vue 3 的 Teleport、Suspense、Fragment 分别是什么?
- FB-16-FS-P-025 Vue SSR / Nuxt 3 中有哪些需要注意的问题?
- FB-16-FS-P-026 Vue 3 的 effectScope 是什么?有什么作用?
- FB-16-FS-P-027 Vue 3 的 Compiler 优化细节有哪些?
- FB-16-FS-P-028 Vue 的响应式系统如何处理数组和集合?
- FB-16-FS-P-029 Vue 3 的 scheduler 和 flush 模式是什么?
- FB-16-PE-P-023 Vue 应用有哪些性能优化手段?
- FB-16-PE-P-024 Vue 应用首屏加载性能如何系统优化?
- FB-16-PE-P-025 Vue 长列表虚拟滚动实现
- FB-16-PE-P-026 Vue 应用构建产物优化
- FB-16-SC-P-001 如何设计一个可拖拽排序的 Vue 列表组件?
- FB-16-SE-P-001 Vue 应用中如何防御 CSRF 攻击?
跨端技术(22 道)
- FB-17-CD-P-053 手写一个跨端网络请求库封装
- FB-17-CO-P-019 Flutter 中常见的状态管理方案有哪些?如何选择?
- FB-17-FS-P-016 小程序的底层渲染原理是什么?Skyline 和 WebView 渲染有什么区别?
- FB-17-FS-P-017 React Native 新架构(New Architecture)解决了什么问题?
- FB-17-FS-P-018 Flutter 的渲染管线是怎样的?三棵树分别负责什么?
- FB-17-FS-P-048 小程序 Skyline 渲染引擎相比 WebView 有哪些改进?
- FB-17-FS-P-049 React Native 的 JSI 和 TurboModules 解决了什么问题?
- FB-17-FS-P-050 Flutter 的渲染管线是怎样的?Impeller 替代 Skia 有什么意义?
- FB-17-FS-P-054 Electron 的进程模型和上下文隔离机制是怎样的?
- FB-17-FS-P-055 小程序 Skyline 的架构演进是怎样的?
- FB-17-FS-P-056 React Native 的 Fabric 和 TurboModules 解决了什么问题?
- FB-17-FS-P-057 Flutter Impeller 渲染引擎是什么?
- FB-17-PE-P-020 跨端动画性能如何保证一致性?
- FB-17-PE-P-051 跨端应用的内存优化和泄漏治理怎么做?
- FB-17-PE-P-056 跨端应用的包体积优化有哪些深入手段?
- FB-17-PE-P-057 跨端应用包体积优化有哪些深入手段?
- FB-17-SC-P-021 跨端应用如何做好路由管理和深层链接(Deep Link)?
- FB-17-SC-P-022 如何为 React Native / Flutter / Electron 开发原生模块?
- FB-17-SC-P-023 跨端应用如何适配不同屏幕尺寸、安全区和暗黑模式?
- FB-17-SC-P-055 跨端应用中的音视频播放方案如何设计?
- FB-17-SC-P-056 跨端应用中的 JSBridge 设计
- FB-17-SD-P-052 如何设计一个跨端组件库?
AI 工程化(42 道)
- FB-18-CA-P-052 分析以下 RAG 索引代码的召回率问题
- FB-18-CD-P-051 实现一个 RAG 检索结果的引用渲染组件
- 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 策略?
- FB-18-CP-P-021 如何评估 LLM 应用的效果?
- FB-18-CP-P-024 LLM 应用如何做 A/B 测试?
- FB-18-CP-P-025 如何为大厂前端文档系统设计 RAG 搜索?
- FB-18-CP-P-026 如何设计 LLM 应用的离线评估与在线监控闭环?
- FB-18-CP-P-058 如何看待 LLM 幻觉问题在产品设计中的兜底方案?
- FB-18-CP-P-059 什么是 MCP?它与 Function Calling 有什么区别?
- FB-18-CP-P-060 AI 应用如何做用户反馈闭环?
- FB-18-EN-P-022 LLM 应用有哪些缓存策略?
- FB-18-EN-P-023 如何构建前端 AI 组件库与 Prompt 市场?
- FB-18-EN-P-055 如何为 LLM 应用设计语义缓存层?
- FB-18-FS-P-018 LangChain / LlamaIndex 的核心抽象是什么?前端如何选择?
- FB-18-FS-P-019 浅析 Vercel AI SDK 的 streamText / generateObject 实现原理
- FB-18-PE-P-020 多模态 AI 和 Edge AI 如何在前端落地?
- FB-18-PE-P-021 如何对 LLM 应用做全链路性能剖析?
- FB-18-PE-P-057 如何对 LLM 推理链路进行性能剖析与优化?
- FB-18-PE-P-058 大模型应用的性能优化有哪些手段?
- FB-18-PE-P-059 如何保证 LLM 返回的结果可以被前端稳定渲染?
- FB-18-SC-P-053 设计一个前端 AI Copilot 的意图识别模块
- FB-18-SD-P-017 如何设计一个前端 RAG 客服系统?
- FB-18-SD-P-018 如何设计一个支持多模态输入的 AI 创作工作台?
- FB-18-SD-P-019 如何设计一个实时协作的 AI 编程助手?
- FB-18-SD-P-054 设计一个支持多模态输入的前端 AI 交互系统
- FB-18-SD-P-055 如何设计一个支持多模型切换的 AI 应用层?
- FB-18-SD-P-056 设计一个支持 Agent 工作流的前端交互框架。
- FB-18-SD-P-057 设计一个 LLM 可观测性方案,前端需要关注哪些指标?
- FB-18-SD-P-058 如何设计 AI Agent 的工作流?
- FB-18-SE-P-023 什么是 Prompt Injection?如何防御?
- FB-18-SE-P-024 如何设计 AI 应用的内容安全审核与越狱防御体系?
- FB-18-SE-P-056 如何构建企业级 AI 应用的权限与审计体系?
- FB-18-SE-P-057 如何保障 AI 应用的内容安全与合规?
- FB-18-SE-P-058 如何防止 AI 应用中的 Prompt 注入和数据泄露?
- FB-18-SE-P-059 AI 应用中的内容审核怎么做?
Node.js / BFF(29 道)
- FB-19-CD-P-018 请手写一个简版 Koa 洋葱圈中间件模型
- FB-19-CD-P-052 请手写一个基于 Redis 的分布式限流器
- 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 使用场景
- FB-19-FS-P-017 NestJS 的装饰器(Decorator)原理是什么?如何手写一个装饰器?
- FB-19-FS-P-048 NestJS 中 Guard、Interceptor、Pipe、ExceptionFilter 的执行顺序是什么?
- FB-19-FS-P-049 NestJS 依赖注入原理是什么?
- FB-19-PE-P-050 如何定位并优化 Node.js 服务的 CPU 高占用问题?
- FB-19-PE-P-055 Node.js 中如何对大文件进行流式上传、下载与断点续传?
- FB-19-PE-P-056 Node.js 服务如何做性能调优?
- FB-19-PE-P-057 Node.js 高并发优化
- FB-19-SC-P-051 BFF 层如何对下游微服务进行统一超时、重试、降级与缓存?
- FB-19-SC-P-054 如何设计 BFF 层的统一错误码与响应结构?
- FB-19-SC-P-055 Deno 和 Bun 与 Node.js 相比各有什么优缺点?什么场景下会选择它们?
- FB-19-SC-P-056 tRPC 和 gRPC 各适用于什么场景?在 BFF 中如何选择?
- FB-19-SC-P-057 在 BFF 中使用消息队列有哪些典型场景?如何保证消息不丢失?
- FB-19-SC-P-058 BFF 层统一响应结构设计
- FB-19-SD-P-001 如何设计一个 Node.js 微服务或 BFF 的日志与链路追踪方案?
- FB-19-SE-P-020 Node.js 服务常见的安全漏洞有哪些?如何防御?
- FB-19-SE-P-049 Node.js 服务如何防御 CSRF、XSS、SQL 注入等常见 Web 攻击?
- FB-19-SE-P-050 如何保障 Node.js/BFF 服务的安全性?
- FB-19-SE-P-051 Node.js 服务安全加固
Git 工作流与变更管理(22 道)
- 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 各适用于什么场景?
- FB-20-CP-P-024 在团队协作中,如何约定 rebase 和 merge 的使用策略?
- FB-20-CP-P-052 跨团队协作时,如何约定分支命名、权限和合并策略?
- FB-20-CP-P-053 跨团队协作时如何约定分支命名、权限和合并策略?
- FB-20-EN-P-017 Monorepo 中如何使用 Changesets 管理版本和发布?
- FB-20-EN-P-022 Git 如何与 CI/CD 流水线集成?
- FB-20-EN-P-049 partial clone 和 sparse checkout 能解决什么问题?
- FB-20-EN-P-053 Git 工作流如何与 npm/yarn/pnpm 变更联动?
- FB-20-EN-P-057 如何设计 Git 操作的原子性和可回滚脚本?
- FB-20-EN-P-058 Git 工作流如何与 npm/yarn/pnpm 变更联动?
- FB-20-PE-P-018 面对超大型仓库,Git 有哪些优化手段?
- FB-20-PE-P-050 面对超大型仓库,有哪些 Git clone 加速策略?
- FB-20-PE-P-055 shallow clone 和 git filter-repo 各适用于什么场景?
- FB-20-PE-P-056 超大型仓库 clone 加速策略
- FB-20-SE-P-021 Git 中如何保障提交安全和防止敏感信息泄露?
- FB-20-SE-P-051 客户端 Git Hooks 能被绕过,如何保证规范落地?
- FB-20-SE-P-056 Git 仓库中发生密钥泄露后,完整的应急处理流程是什么?
- FB-20-SE-P-057 Git 仓库密钥泄露后的完整应急流程
开发者体验与工程效能(31 道)
- FB-21-CA-P-001 分析一段 GitHub Actions 工作流,找出影响 CI 反馈时间和一致性的问题
- FB-21-CD-P-001 请手写一个 pre-commit 钩子脚本,对变更文件运行受影响的最小测试集
- FB-21-CO-P-001 Webpack 构建过程的可观测性指标有哪些?如何通过 stats 与 telemetry 实现
- FB-21-CP-P-021 DORA 指标和 SPACE 框架分别衡量什么?如何把它们用于前端工程效能改进?
- FB-21-CP-P-050 如何评估一项新技术是否值得引入团队?
- FB-21-CP-P-055 如何度量前端团队的整体工程效能?
- FB-21-CP-P-081 如何构建数据驱动的 DX 改进闭环?
- FB-21-CP-P-082 如何结合 Babel 代码转换与 Playwright 测试实现自动化兼容性验证
- FB-21-EN-P-018 代码生成(Code Generation)在前端工程中的应用场景和边界是什么?
- FB-21-EN-P-019 Dev Container 如何解决本地开发环境一致性?给出一个 .devcontainer/devcontainer.json 配置示例。
- FB-21-EN-P-022 远程开发环境(Remote Development)在大型前端项目中的优势和落地挑战是什么?
- FB-21-EN-P-049 Monorepo 中如何实现版本发布自动化?
- FB-21-EN-P-054 如何实现前端依赖的安全扫描与自动化修复?
- FB-21-EN-P-080 大型前端项目如何设计模块联邦或微前端的构建协同?
- FB-21-EN-P-084 如何设计前端资产的发现与复用机制?
- FB-21-EN-P-085 如何在组件库文档站点中落地 Design Token 以实现代码与设计同步
- FB-21-FS-P-001 Prettier 的 AST 打印流程是什么?如何为文档站点定制代码格式化插件
- FB-21-PE-P-051 大型项目构建缓存失效的常见原因有哪些?如何应对?
- FB-21-PE-P-082 如何系统性地优化前端测试的执行速度和稳定性?
- FB-21-SC-P-023 如何为新成员设计高效的 onboarding 流程?请给出 30-60-90 天计划框架。
- FB-21-SD-P-017 如何设计一个内部开发者门户(Internal Developer Portal)?核心模块和衡量指标是什么?
- FB-21-SD-P-048 如何设计一个前端工程化度量平台?
- FB-21-SD-P-052 如何设计一个可插拔的前端 CLI 工具?
- FB-21-SD-P-056 如何设计一个前端错误追踪与诊断平台?
- FB-21-SD-P-079 如何设计一个前端运行时性能监控与诊断平台?
- FB-21-SD-P-080 如何设计可在 Storybook 文档中实时格式化示例代码的 Prettier Playground 组件
- FB-21-SE-P-001 Monorepo 使用 Turborepo 远程缓存时的安全风险与访问控制
- FB-21-SS-P-020 如何推动团队从“各自为政”的开发环境迁移到统一的 DX 平台?
- FB-21-SS-P-053 如何建立可持续的技术债治理流程?
- FB-21-SS-P-083 如何在业务高压下推动工程师文化和 DX 建设?
- FB-21-SS-P-084 请分享一次你主导的前端工程化或 CI/CD 改进项目
部署与 SRE(22 道)
- FB-22-CA-P-001 下面一段 SSG/边缘渲染配置与缓存策略代码输出什么?请分析其对性能的影响。
- FB-22-CD-P-001 请手写一个用于前端 Incident Response 的健康检查与熔断决策函数。
- FB-22-CO-P-022 如何设计前端监控告警体系?
- FB-22-CO-P-023 请解释 Kubernetes Ingress/Service 流量切分的工作原理,及其在前端容器化部署中的应用。
- FB-22-CO-P-024 Kubernetes Ingress 流量切分
- FB-22-CP-P-021 Incident Response 流程与 Runbook 如何落地?
- FB-22-CP-P-022 结合高可用架构与告警体系,谈谈前端服务的故障发现与止损实践。
- FB-22-CP-P-023 前端故障发现与止损
- FB-22-EN-P-017 如何用容器化方式部署前端应用?
- FB-22-EN-P-018 Kubernetes 基础与前端无状态服务部署
- FB-22-EN-P-024 前端 Monorepo 多包部署策略
- FB-22-EN-P-025 如何在 DevOps 流程中落地前端 HTTPS 全链路安全与证书自动化管理?
- FB-22-EN-P-026 前端容器化部署最佳实践
- FB-22-FS-P-001 Lighthouse CI 如何集成到部署流水线中实现性能门禁与零停机发布?
- FB-22-PE-P-002 前端高可用灰度发布性能优化
- FB-22-PE-P-023 容量规划在前端场景如何应用?
- FB-22-SC-P-002 SSR 前端部署策略
- FB-22-SC-P-019 Serverless 与边缘部署如何落地前端 SSR/SSG?
- FB-22-SC-P-020 大规模前端缓存失效策略有哪些?
- FB-22-SD-P-001 如何设计一个 SSR 前端应用的部署策略系统,支持灰度、回滚与降级?
- FB-22-SE-P-001 使用 Vercel/边缘平台托管前端时,监控与可观测性方面有哪些安全风险?如何防御?
- FB-22-SS-P-001 请分享一次你主导前端容灾演练或 Feature Flag 紧急关闭故障的经历。
包管理与供应链安全(21 道)
- FB-23-CA-P-022 分析一个依赖版本冲突场景
- FB-23-CA-P-023 分析以下插件依赖声明代码的输出与原因
- FB-23-CD-P-001 手写一个解析依赖图中某包所有引入路径的工具函数
- FB-23-CO-P-019 什么是依赖地狱?如何解决版本冲突、循环依赖与依赖分身?
- FB-23-CO-P-020 node_modules 体积膨胀的原因及包管理器层面的优化原理
- FB-23-CO-P-021 node_modules 体积优化原理
- FB-23-CP-P-023 如何为一个团队选择包管理器?请给出决策矩阵。
- FB-23-CP-P-024 lockfile 如何与前端工具链(CI、Docker、Renovate)协同管理?
- FB-23-CP-P-025 包管理器标准化实践经验
- FB-23-EN-P-020 私有 Registry / Verdaccio 如何企业级部署?
- FB-23-EN-P-021 React/Vue 组件库作为宿主依赖项目,如何管理 package-lock.json 与 peerDependencies?
- FB-23-EN-P-022 lockfile 与 Renovate 协同管理
- FB-23-FS-P-017 pnpm 的 content-addressable store 与 hard link 机制是如何工作的?
- FB-23-FS-P-018 license-checker 等工具如何扫描 node_modules 并识别许可证冲突?
- FB-23-FS-P-019 pnpm 的 workspace 协议是什么?
- FB-23-SD-P-001 如何为 yarn 项目设计 SBOM(软件物料清单)生成与合规审计系统?
- FB-23-SE-P-018 Sigstore、Provenance 与 NPM 发布签名是什么?它们如何提升供应链安全?
- FB-23-SE-P-021 SBOM 是什么?如何做许可证合规?
- FB-23-SE-P-022 如何建立第三方依赖的漏洞修复 SLA 与版本维护策略?
- FB-23-SE-P-023 私有 registry 有哪些安全风险与加固?
- FB-23-SS-P-001 如何优化大型 Monorepo 的 npm install / pnpm install 流程?
前端运维与监控(7 道)
- FB-24-CO-P-002 如何制定前端 SLI/SLO?
- FB-24-CP-P-007 如何通过用户终端分布分析驱动运维决策?
- FB-24-EN-P-005 前端版本管理与缓存失效如何设计?
- FB-24-PE-P-004 如何通过监控优化资源加载与 LCP?
- FB-24-SD-P-001 如何设计一个前端可观测性平台?
- FB-24-SE-P-006 前端限流与客户端防护如何设计?
- FB-24-SS-P-003 线上故障的 Incident Response 流程和 Runbook 应该怎么设计?
系统架构设计(31 道)
- 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 的取舍
- FB-25-CP-P-004 你所在团队要引入一个新的前端框架或工具链,请描述完整的决策过程
- FB-25-CP-P-014 如何做技术债管理与架构演进路线图?
- FB-25-CP-P-015 前端架构中的延迟决策原则如何实践
- FB-25-EN-P-007 描述一个前端架构从单体应用到微前端再到模块化架构的演进过程
- FB-25-EN-P-015 Monorepo 中的构建性能优化与远程缓存架构
- FB-25-EN-P-016 前端如何实现可重复可审计的构建与发布
- FB-25-SC-P-002 设计一个 SDUI(Server-Driven UI)系统
- FB-25-SC-P-005 设计一个插件化的前端应用,支持第三方扩展
- FB-25-SC-P-009 设计一个支持百万级数据的表格前端架构
- FB-25-SC-P-010 设计一个前端国际化架构
- FB-25-SC-P-011 设计一个前端权限架构(RBAC/ABAC)
- FB-25-SC-P-012 前端如何应对高并发秒杀活动的流量峰值
- FB-25-SC-P-013 微服务架构下前端的数据一致性策略
- FB-25-SC-P-014 设计一个支持离线使用的复杂表单系统
- FB-25-SD-P-001 设计一个低代码/搭建平台的前端架构
- FB-25-SD-P-008 设计一个金融级前端安全收银台架构
- FB-25-SD-P-009 设计一个电商系统的前端状态管理方案,说明如何组织状态。
- FB-25-SD-P-010 如何设计一个可扩展的前端组件库?
- FB-25-SS-P-016 如何设计并落地前端技术委员会机制?
- FB-25-SS-P-017 你在项目中如何落地模块化?遇到的最大挑战是什么?
- FB-25-SS-P-018 如何评估一个项目是否需要引入微前端?
- FB-25-SS-P-019 你如何处理前端项目中的“技术债”?
微前端(24 道)
- FB-26-CD-P-020 手写一个基于 Proxy 的简易 JS 沙箱。
- 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 微前端中的公共状态管理反模式
- FB-26-CP-P-023 微前端下的监控和异常隔离应该怎么做?
- FB-26-CP-P-024 Module Federation 中,host 和 remote 有什么区别?shared 配置有什么用?
- FB-26-CP-P-025 何时应该选择微前端,何时不应该
- FB-26-EN-P-021 微前端公共依赖版本冲突如何解决?
- FB-26-EN-P-022 微前端子应用的构建产物如何组织
- FB-26-FS-P-017 qiankun 沙箱存在哪些逃逸风险?多实例场景下如何处理副作用?
- FB-26-FS-P-018 微前端子应用内存泄漏如何定位与治理
- FB-26-PE-P-001 请描述 qiankun 的加载和生命周期流程。
- FB-26-PE-P-002 微前端如何治理公共依赖版本
- FB-26-SC-P-022 如何对微前端子应用做灰度发布?
- FB-26-SC-P-023 微前端下如何保障全链路质量
- FB-26-SC-P-024 微前端中如何处理第三方脚本与全局组件
- FB-26-SD-P-018 微前端下全局状态应该如何设计?单一 Store 还是各自 Store + 事件同步?
- FB-26-SD-P-019 微前端路由协调的深入问题有哪些?如何解决?
- FB-26-SD-P-020 如果微前端子应用需要共享状态,你会如何设计?
- FB-26-SD-P-021 设计微前端下的路由与导航体系
- FB-26-SS-P-001 你会如何评估一个项目是否需要引入微前端?
- FB-26-SS-P-002 微前端项目中如何做错误隔离和降级?
性能工程(26 道)
- FB-27-CD-P-004 实现一个基于 requestIdleCallback 的任务调度器
- FB-27-CO-P-005 实验室数据(Lab Data)和真实用户数据(Field Data / RUM)有什么区别?分别适用于什么场景?
- FB-27-CO-P-006 Resource Hints 的使用场景
- FB-27-CO-P-007 浏览器合成器线程与主线程的关系
- FB-27-EN-P-006 Service Worker 有哪些缓存策略?如何选择?
- FB-27-PE-P-001 浏览器渲染管线是怎样的?如何利用合成层(Compositor Layer)优化渲染性能?
- FB-27-PE-P-002 如何优化 JavaScript 执行性能?请从任务调度、长任务拆分、主线程释放等角度说明。
- FB-27-PE-P-003 如何排查和优化前端内存泄漏?
- FB-27-PE-P-007 字体加载优化有哪些策略?FOUT、FOIT、FOF 分别是什么?
- FB-27-PE-P-008 你如何分析一个页面的性能瓶颈?
- FB-27-PE-P-009 Service Worker 如何提升性能?有哪些注意事项?
- FB-27-PE-P-010 什么是关键渲染路径?如何优化?
- FB-27-PE-P-011 图片优化有哪些常用手段?
- FB-27-PE-P-012 如何优化首屏加载时间?
- FB-27-PE-P-013 什么是长任务(Long Task)?如何优化?
- FB-27-PE-P-014 你如何制定性能预算(Performance Budget)?
- FB-27-PE-P-015 如何优化大型列表渲染性能
- FB-27-PE-P-016 如何减少 JavaScript 执行时间
- FB-27-PE-P-017 CSS 性能优化与渲染层管理
- FB-27-PE-P-018 内存泄漏的常见原因与排查
- FB-27-PE-P-019 前端性能监控指标体系设计
- FB-27-PE-P-020 如何优化大量 marker 的地图性能
- FB-27-PE-P-021 Web Worker 在性能优化中的应用
- FB-27-SC-P-001 如何优化大量 DOM 操作的动画
- FB-27-SC-P-002 如何设计性能回归测试
- FB-27-SC-P-003 如何优化可交互大屏的渲染性能
质量保障(28 道)
- FB-28-CA-P-020 分析下面这段 ESLint 配置,指出潜在问题
- 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 什么是左移测试
- FB-28-CP-P-001 如何选择前端测试框架和工具?
- FB-28-EN-P-024 如何设计质量门禁?
- FB-28-EN-P-025 前端单元测试如何设计有效的断言
- FB-28-EN-P-026 如何防止前端代码中的安全漏洞
- FB-28-EN-P-027 前端测试数据管理策略
- FB-28-PE-P-019 如何提升 E2E 测试的稳定性?
- FB-28-SC-P-021 灰度发布中如何保障前端质量?
- FB-28-SC-P-022 蓝绿部署与金丝雀部署有什么区别?前端如何选择?
- FB-28-SC-P-023 故障演练与混沌工程在前端如何落地?
- FB-28-SC-P-024 线上出现 Bug 后,除了修复,你还应该做什么?
- FB-28-SC-P-025 前端 E2E 测试不稳定如何治理
- FB-28-SC-P-026 前端如何做视觉回归测试
- FB-28-SC-P-027 如何治理前端技术债
- FB-28-SC-P-028 如何设计前端错误监控的质量闭环
- FB-28-SC-P-029 如何建立前端 bug 预防机制
- FB-28-SD-P-001 如何设计一个高效的 Code Review 流程?
- FB-28-SS-P-017 如何处理代码评审中的分歧?
数据与状态管理(23 道)
- FB-29-CD-P-022 如何手写一个简化的状态管理库(类似 Zustand)?
- 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模式
- FB-29-FS-P-017 Redux 中间件原理是什么?请手写一个 logger 中间件
- FB-29-FS-P-018 React Query 的缓存和失效机制底层是怎么工作的?
- FB-29-SC-P-001 Redux Toolkit、Zustand、Jotai、Recoil 的适用场景分别是什么?
- FB-29-SC-P-002 如何处理前端表单复杂状态
- FB-29-SC-P-003 如何设计前端权限状态与路由联动
- FB-29-SC-P-004 前端如何处理多标签页状态同步
- FB-29-SC-P-005 前端如何处理服务端推送状态
- FB-29-SD-P-001 设计一个支持离线编辑的协同文档应用的数据层。
- FB-29-SD-P-002 如何设计一个大型前端应用的状态管理架构?
- FB-29-SD-P-003 设计一个前端配置化表单状态引擎
可观测性(18 道)
- 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
- FB-30-CP-P-024 发生线上 P0 故障时,如何利用可观测性数据快速定位根因?
- FB-30-EN-P-023 日志脱敏与合规(PII/敏感信息)在前端如何处理?
- FB-30-EN-P-024 如何构建前端稳定性保障体系?
- FB-30-PE-P-019 如何基于 Web Vitals + Performance API 做首屏/交互性能监控?
- FB-30-PE-P-020 前端异常如何归因到具体发布
- FB-30-SC-P-020 告警策略如何设计?如何解决告警风暴与降噪?
- FB-30-SC-P-022 如何在微前端/跨端场景下统一可观测性?
- FB-30-SC-P-023 如何设计前端告警策略
- FB-30-SC-P-024 如何设计监控采样策略
- FB-30-SD-P-017 设计一个前端全链路可观测平台
- FB-30-SD-P-018 如何设计前端全链路追踪方案?
- FB-30-SD-P-019 如何设计前端性能预算和告警体系?
安全架构(18 道)
- FB-31-CD-P-001 如何设计一个前端安全 SDK?
- 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 与前端安全
- FB-31-SE-P-001 前端零信任架构的核心原则是什么?
- FB-31-SE-P-002 CSP 有哪些常见绕过方式?如何构建深度防御?
- FB-31-SE-P-003 什么是前端运行时应用自保护(RASP)?
- FB-31-SE-P-004 内容安全策略 CSP 如何配置
- FB-31-SE-P-005 前端供应链安全治理
- FB-31-SE-P-006 前端如何处理富文本安全
- FB-31-SE-P-007 前端如何防止敏感信息泄露
- FB-31-SE-P-008 前端如何防御 DOM Clobbering
- FB-31-SE-P-009 前端如何做权限校验才安全
- FB-31-SE-P-010 Web Storage 安全使用指南
- FB-31-SE-P-011 如何防御 JSONP 相关安全风险
实时与协同(14 道)
- 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 在前端实时系统中的应用
- FB-32-PE-P-001 实时系统如何实现水平扩展?
- FB-32-PE-P-002 实时数据流中的背压(Backpressure)如何处理?
- FB-32-PE-P-003 实时列表的渲染优化
- FB-32-SC-P-001 网络分区对实时系统的影响
- FB-32-SC-P-002 实时系统中如何做消息去重
- FB-32-SC-P-003 实时系统中的断线补偿策略
- FB-32-SE-P-001 实时协同中的安全与权限如何设计?
国际化(14 道)
- 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 货币与数字格式化
- FB-33-CP-P-001 多语言 A/B 测试如何设计?
- FB-33-PE-P-001 语言包体积如何优化?
- FB-33-SC-P-001 如何处理 ICU 复数与插值
- FB-33-SC-P-002 如何设计组件库的多语言支持
- FB-33-SC-P-003 国际化项目的测试策略
- FB-33-SC-P-004 如何处理多语言下的 SEO 与预渲染
- FB-33-SD-P-001 如何设计大规模多语言前端平台?
可视化与图形(14 道)
- 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 可视化中的坐标系与投影
- FB-34-CP-P-017 为一款 BI 数据产品选择底层渲染技术,如何权衡 Canvas/SVG/WebGL/WebGPU?
- FB-34-FS-P-018 D3.js 的 join 模式、数据绑定与 enter/update/exit 在 v5/v6/v7 中有何演进?
- FB-34-PE-P-019 地理/地图可视化中,如何处理大规模 GeoJSON、投影变换与瓦片化?
- FB-34-PE-P-022 可视化动画与性能:requestAnimationFrame、补间、时间轴与 Web Animations API 如何选型?
- FB-34-PE-P-023 可视化大屏的渲染性能优化
- FB-34-PE-P-024 Canvas 高清屏渲染优化
- FB-34-SC-P-021 实时数据流驱动的可视化大屏每秒新增数千点,如何保证不丢帧?
- FB-34-SC-P-022 如何设计交互式地图应用
- FB-34-SC-P-023 如何设计可视化组件的测试策略
Serverless/Edge(16 道)
- 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 容器
- FB-35-SC-P-001 设计一个基于边缘的 SSR 渲染方案
- FB-35-SC-P-002 Serverless 下如何管理环境变量和密钥
- FB-35-SC-P-003 Serverless 函数的测试策略
- FB-35-SC-P-004 Serverless 下的数据库连接管理
- FB-35-SE-P-001 Edge 上的认证与授权如何设计?
前端数据工程(18 道)
- FB-36-CD-P-001 如何设计一个前端埋点 SDK?
- 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 数据工程中的隐私与合规
- FB-36-SC-P-001 前端如何做数据清洗与校验
- FB-36-SC-P-002 前端如何处理大数据表格
- FB-36-SC-P-003 前端如何做数据导出与下载
- FB-36-SC-P-004 前端如何支持多维分析(OLAP)
- FB-36-SC-P-005 如何设计数据权限在前端的体现
- FB-36-SC-P-006 前端数据异常如何自动发现
- FB-36-SE-P-001 前端数据隐私合规有哪些深度措施?
业务洞察(26 道)
- 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 如何理解“技术债”与“业务债”?前端如何管理这两类债务?
- FB-37-CP-P-001 结合一个你熟悉的业务,阐述如何用价值链分析找到前端技术的发力点。
- FB-37-CP-P-003 当业务要求“短期变现”与“长期用户体验”冲突时,前端架构师如何决策?
- FB-37-CP-P-006 在 B2B 与 B2C 业务中,前端架构的差异主要体现在哪些方面?
- FB-37-CP-P-007 如何用“技术驱动业务创新”?请举例说明前端技术如何创造新的商业模式或收入增长点。
- FB-37-CP-P-008 如何设计一套面向业务方的自助式 A/B 实验平台前端?
- FB-37-CP-P-009 如何评估并优化一个多边平台(Two-Sided Marketplace)的匹配效率?
- FB-37-CP-P-010 SaaS 产品的 PLG(产品驱动增长)模式下,前端应重点优化哪些体验?
- FB-37-CP-P-011 如何为一个跨境电商平台设计本地化的前端策略?
- FB-37-CP-P-012 如何向 CFO/CEO 汇报一次前端性能优化的业务价值?
- FB-37-SC-P-002 设计一个支持 A/B 实验的前端实验平台,需要哪些核心模块?
- FB-37-SC-P-005 如何构建面向业务指标的实时数据看板?前端在数据采集与展示上的关键设计是什么?
- FB-37-SC-P-006 作为前端负责人,你如何决定一个创新项目是“加大投入”还是“及时止损”?
- FB-37-SC-P-007 如何为一个内容平台设计创作者经济体系的前端支撑?
- FB-37-SC-P-008 如何利用前端数据帮助业务方识别高价值用户并优化运营策略?
- FB-37-SC-P-009 面对流量红利见顶,前端如何帮助业务实现“存量深耕”?
- FB-37-SC-P-010 如果业务方要求你同时支撑多个战略方向,但资源有限,你如何决策?
- FB-37-SC-P-011 如何设计一个面向销售团队的前端工具,提升成单效率?
团队领导力(15 道)
- FB-38-CP-P-002 团队中资深成员不愿接受新流程,作为 leader 你如何推动变革?
- FB-38-CP-P-005 远程团队跨时区协作,如何平衡异步沟通与同步会议?
- FB-38-CP-P-007 如何在业务高压下保持技术文化不滑坡?
- FB-38-SC-P-001 设计一套可量化的前端团队绩效评估体系
- FB-38-SC-P-003 如何搭建人才梯队与继任计划,降低关键岗位单点风险?
- FB-38-SC-P-004 在裁员或低绩效淘汰场景下,如何合法合规并维护团队信任?
- FB-38-SC-P-007 团队内部出现“小团体”现象,影响协作,你怎么处理?
- FB-38-SC-P-008 如何在团队中推广“Ownership”文化?
- FB-38-SC-P-009 你如何管理一位比你资历更深、技术更强的下属?
- FB-38-SS-P-006 冲突管理中的 Thomas-Kilmann 模型如何应用于技术团队?
- FB-38-SS-P-007 作为管理者,你如何判断自己是否应该继续走管理路线还是转回 IC(Individual Contributor)?
- FB-38-SS-P-008 如何在团队中推行“失败复盘”文化而不变成甩锅大会?
- FB-38-SS-P-009 你如何培养团队中的潜在管理者?
- FB-38-SS-P-010 团队扩张过快导致文化稀释,你会如何应对?
- FB-38-SS-P-011 如何在团队中实现真正的 diversity(多样性)与 inclusion(包容)?
技术战略(15 道)
- FB-39-CP-P-005 如何量化技术投入对业务的价值?
- FB-39-CP-P-006 当公司战略发生重大变化时,你如何快速调整前端技术战略?
- FB-39-CP-P-007 如何评估一次大型前端架构升级的必要性和时机?
- FB-39-CP-P-008 如何在技术战略中考虑 AI 对前端工作的影响?
- FB-39-CP-P-009 如何为前端团队制定有效的技术风险应对策略?
- FB-39-CP-P-010 技术战略规划中,如何处理“遗留系统”?
- FB-39-EN-P-003 如何在高速迭代中管理技术债,避免系统崩溃?
- FB-39-EN-P-004 如何设计前端团队的工程化指标体系?
- FB-39-SC-P-002 如何评估一个新技术是否值得引入生产环境?
- FB-39-SC-P-006 如何制定企业的开源战略并规避法律与供应链风险?
- FB-39-SC-P-007 当核心技术人员离职或关键供应商停止维护时,如何保障技术连续性?
- FB-39-SC-P-008 如何设计一个既有技术前瞻性又能落地的年度技术规划?
- FB-39-SD-P-001 请设计一套前端技术选型决策框架。
- FB-39-SD-P-004 请设计一个前端中台的演进路线与治理机制。
- FB-39-SD-P-005 如何为一个快速增长的公司设计可演进的前端架构蓝图?
沟通表达(12 道)
- FB-40-SC-P-001 如何准备一场高质量的技术宣讲/分享?
- FB-40-SC-P-002 跨文化团队出现沟通误解,你如何排查与修复?
- FB-40-SC-P-003 如何在资源有限时说服管理层投入技术基建?
- FB-40-SC-P-004 线上事故后,如何组织复盘并撰写事故报告?
- FB-40-SC-P-006 团队内部出现“谁来做这个脏活”的推诿,你如何推动解决?
- FB-40-SS-P-005 如何建立可持续的文档写作文化?
- FB-40-SS-P-007 组织变动期间,如何保持团队士气与信息透明?
- FB-40-SS-P-008 如何在一次高层汇报中争取前端团队的资源?
- FB-40-SS-P-009 如何应对高层对前端工作的误解(认为前端只是“做页面”)?
- FB-40-SS-P-010 如何在技术债务和业务需求之间进行“艰难对话”?
- FB-40-SS-P-011 如何向团队传达一个不受欢迎但必要的决定?
- FB-40-SS-P-012 如何在全球化团队中跨越文化和时区差异进行有效沟通?
项目管理(18 道)
- FB-41-CP-P-001 如何在业务交付压力与技术重构之间取得平衡?
- FB-41-CP-P-004 项目复盘会议怎么开?如何确保复盘结论真正落地?
- FB-41-CP-P-008 从 0 到 1 启动一个中台组件库项目,你的立项与推进计划是什么?
- FB-41-EN-P-007 如何建立前端工程效能指标体系?请给出指标分层与采集方式。
- FB-41-SC-P-003 多项目并行时,如何识别资源冲突并制定优先级策略?
- FB-41-SC-P-005 前端项目如何制定并管理项目预算与 ROI?
- FB-41-SC-P-006 如何管理一个跨团队、跨地域的大型前端项目?
- FB-41-SC-P-007 项目范围不断蔓延(Scope Creep),你如何应对?
- FB-41-SC-P-008 如何在敏捷开发中做好版本规划和发布管理?
- FB-41-SC-P-009 项目资源不足时,你如何调整项目计划?
- FB-41-SD-P-002 设计一个前端技术项目的治理框架(Governance Framework)。
- FB-41-SD-P-003 如何从 0 到 1 建立前端项目的风险管理体系?
- FB-41-SS-P-006 面对强势干系人(如高管客户)的不合理 deadline,你如何沟通?
- FB-41-SS-P-007 如何在项目中管理“不确定性”和“未知风险”?
- FB-41-SS-P-008 作为项目经理,你如何处理团队内部对估算的分歧?
- FB-41-SS-P-009 如何在高压项目中保持团队士气?
- FB-41-SS-P-010 如何在项目中有效管理外部依赖(如第三方服务、其他团队)?
- FB-41-SS-P-011 项目成功后,你会如何分配功劳?
招聘(16 道)
- FB-42-CP-P-018 如何构建数据驱动的招聘仪表盘?
- FB-42-CP-P-022 校园招聘与社会招聘的策略差异是什么?
- FB-42-CP-P-023 如何减少面试中的偏见,提高招聘公平性?
- FB-42-CP-P-024 如何设计有效的校招前端人才培养和面试体系?
- FB-42-CP-P-025 如何在面试中识别候选人的“Owner 意识”?
- FB-42-CP-P-026 如何面试一位比你更资深的前端工程师?
- FB-42-SC-P-020 背调与定薪的流程和关键注意点有哪些?
- FB-42-SC-P-024 如何在雇主品牌建设中落地技术招聘?
- FB-42-SD-P-017 如何设计一套可扩展的面试官认证体系?
- FB-42-SD-P-021 如何设计技术面试题库与分级体系?
- FB-42-SS-P-019 如何通过面试识别候选人的工程文化和价值观?
- FB-42-SS-P-023 如何评估候选人的成长潜力而非只看当前技能?
- FB-42-SS-P-024 如何设计针对前端负责人的面试评估?
- FB-42-SS-P-025 如何在招聘中识别候选人的团队协作能力?
- FB-42-SS-P-026 如何设计面试中的“行为问题”以预测未来表现?
- FB-42-SS-P-027 如何评估候选人对前端性能优化的真实经验?
技术品牌与布道(9 道)
- FB-43-CP-P-003 一次技术公关危机(如线上故障被外部放大)中,技术品牌团队应如何响应?
- FB-43-CP-P-006 如何为前端框架/工具设计开发者体验(DX)以提升技术品牌?
- FB-43-SC-P-002 开源项目从“没人用”到“有人用、有人贡献”的冷启动策略有哪些?
- FB-43-SC-P-004 如何打造一支“技术明星团队”,既出业务结果又出行业影响力?
- FB-43-SC-P-005 技术布道的内容如何从“自嗨”变成“对用户/开发者真正有价值”?
- FB-43-SD-P-001 设计一个“前端团队技术影响力度量体系”。
- FB-43-SS-P-007 技术 Leader 如何帮助团队成员建立个人技术品牌,同时避免明星个人离开带来的品牌断层?
- FB-43-SS-P-008 如何策划一场有影响力的技术发布会或产品技术日?
- FB-43-SS-P-009 如何建立一个可持续的技术布道团队?
技术治理与合规(12 道)
- FB-44-CP-P-001 技术规范如何从制定到失效进行全生命周期管理?
- FB-44-SC-P-001 如何建立前端开源合规治理体系?
- FB-44-SC-P-002 如何设计和实施前端 IT 内控?
- FB-44-SC-P-003 如何处理历史遗留系统的数据治理与隐私合规?
- FB-44-SC-P-004 如何设计前端审计与风控日志体系?
- FB-44-SC-P-005 如何设计前端的技术债治理机制?
- FB-44-SC-P-006 如何建立前端性能的持续治理机制?
- FB-44-SC-P-007 前端如何实现可访问性(Accessibility)治理?
- FB-44-SC-P-008 如何建立前端的数据埋点治理机制?
- FB-44-SC-P-009 如何设计前端架构评审流程?
- FB-44-SD-P-001 设计一个前端技术治理平台。
- FB-44-SD-P-002 如何设计前端灾备与业务连续性方案?
小程序(16 道)
- FB-45-FS-P-001 小程序 Exparser 组件框架和虚拟 DOM 渲染原理是什么?
- FB-45-FS-P-004 小程序自定义组件的 behaviors、relations 和 slot 实现机制是什么?
- FB-45-FS-P-005 小程序的同层渲染原理是什么?解决了什么问题?
- FB-45-FS-P-006 微信小程序的双线程模型是什么?有什么影响?
- FB-45-FS-P-007 微信小程序的自定义组件渲染机制是什么?
- FB-45-FS-P-008 微信小程序的启动性能优化有哪些手段?
- FB-45-FS-P-009 微信小程序的长列表优化方案有哪些?
- FB-45-FS-P-010 微信小程序的跨平台框架(如 Taro、uni-app)有哪些优缺点?
- FB-45-PE-P-002 小程序启动性能优化和白屏优化有哪些方案?
- FB-45-PE-P-003 小程序包体积优化有哪些手段?如何分析体积?
- FB-45-PE-P-006 小程序 SSR、预渲染和骨架屏的实践方案是什么?
- FB-45-SC-P-007 小程序全局状态管理有哪些方案?如何选择?
- FB-45-SC-P-008 微信小程序如何实现一个复杂的表单页面?
- FB-45-SC-P-009 微信小程序如何做状态管理?
- FB-45-SC-P-010 微信小程序如何实现支付功能?
- FB-45-SC-P-011 微信小程序如何做版本更新处理?
鸿蒙 ArkTS / HarmonyOS(14 道)
- FB-46-CD-P-023 请手写一个鸿蒙网络请求与状态管理结合的示例。
- 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 鸿蒙的方舟编译器有什么特点?
- FB-46-FS-P-017 ArkUI 的渲染原理是什么?状态变化后如何触发 UI 更新?
- FB-46-FS-P-024 鸿蒙与 Android / iOS / 小程序 / Flutter 在技术范式上有哪些本质差异?
- FB-46-FS-P-025 鸿蒙 ArkUI 的声明式 UI 与传统命令式 UI 有什么区别?
- FB-46-FS-P-026 鸿蒙的服务卡片(Widget)如何开发?
- FB-46-PE-P-018 鸿蒙应用如何进行性能与功耗优化?
- FB-46-SE-P-021 鸿蒙应用的安全架构是怎样的?如何做好权限治理?
Flutter(12 道)
- FB-47-CO-P-007 Flutter 的测试体系是怎样的?Unit、Widget、Integration 测试各负责什么?
- FB-47-CP-P-002 Flutter 状态管理方案众多,Provider、Riverpod、BLoC、GetX 各适合什么场景?如何选型?
- FB-47-FS-P-001 Impeller 的渲染管线是怎样的?相比 Skia 在哪些环节做了优化?
- FB-47-FS-P-005 Platform Channel 的编解码机制是怎样的?如何实现自定义 Codec?
- FB-47-FS-P-006 StatefulWidget 的生命周期与 Element 的复用机制是怎样的?
- FB-47-FS-P-007 Flutter 的渲染原理是什么?为什么性能高?
- FB-47-FS-P-008 Flutter 的 Key 有什么作用?什么时候需要使用 Key?
- FB-47-FS-P-009 Flutter 中的 InheritedWidget 是什么?与 Provider 有什么关系?
- FB-47-FS-P-010 Flutter 中如何与平台原生代码交互?
- FB-47-FS-P-011 Flutter 的热重载(Hot Reload)和热重启(Hot Restart)有什么区别?
- FB-47-PE-P-004 Flutter 性能调优实战:如何定位并解决卡顿、掉帧、内存泄漏?
- FB-47-SC-P-003 在现有原生 App 中嵌入 Flutter(Add-to-App)有哪些技术方案和挑战?
Electron(11 道)
- FB-48-CD-P-004 请手写一个带超时控制和类型安全的 IPC 调用封装
- FB-48-CO-P-005 Electron 如何集成原生模块(Native Addon)?
- FB-48-CP-P-006 如何设计 Electron 的崩溃报告与错误监控方案?
- FB-48-FS-P-001 Electron 的进程模型与 Chromium 有什么关系?
- FB-48-PE-P-003 Electron 如何进行内存管理与泄漏排查?
- FB-48-SC-P-007 Electron 跨平台兼容性如何处理?
- FB-48-SC-P-008 Electron 应用的性能优化有哪些方向?
- FB-48-SC-P-009 Electron 应用如何做进程间状态共享?
- FB-48-SC-P-010 Electron 如何集成 WebRTC 或音视频能力?
- FB-48-SC-P-011 Electron 应用如何做国际化(i18n)?
- FB-48-SE-P-002 preload 与 contextIsolation 的底层安全模型是怎样的?
WebAssembly(15 道)
- FB-49-CP-P-007 WASI 是什么?它和 WebAssembly 有什么关系?
- FB-49-CP-P-008 WebAssembly 如何实现多线程?
- FB-49-CP-P-009 WebAssembly 如何实现异常处理?
- FB-49-CP-P-010 WebAssembly 的 SIMD 是什么?有什么应用?
- FB-49-CP-P-011 WebAssembly 与 WASI 有什么关系?
- FB-49-EN-P-006 如何调试 WebAssembly?有哪些工具和方法?
- FB-49-FS-P-001 WebAssembly 模块的二进制格式结构是怎样的?
- FB-49-FS-P-002 WebAssembly 的验证(Validation)和实例化(Instantiation)过程是怎样的?
- FB-49-FS-P-003 WebAssembly 如何实现动态链接和模块间调用?
- FB-49-FS-P-005 WebAssembly 的内存管理与垃圾回收机制是怎样的?
- FB-49-FS-P-006 WebAssembly 的运行时生命周期是怎样的?
- FB-49-FS-P-007 WebAssembly 的 GC 提案是什么?有什么意义?
- FB-49-FS-P-008 WebAssembly 的 Component Model 是什么?
- FB-49-FS-P-009 WebAssembly 在边缘计算中的应用有哪些?
- FB-49-SE-P-004 WebAssembly 的安全模型与沙箱机制是怎样的?
WebGPU / 图形学(12 道)
- FB-50-CD-P-018 请手写一个 WebGPU Compute Shader 实现矩阵乘法。
- FB-50-CD-P-023 如何用 WebGPU 实现后处理流程?
- 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?
- FB-50-PE-P-021 如何用 WebGPU 设计一个高性能粒子系统?
多媒体(Multimedia)(20 道)
- FB-51-CD-P-020 如何用 requestVideoFrameCallback 实现精确的视频帧处理?
- 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?
- FB-51-CP-P-024 MSE(Media Source Extensions)在流媒体播放器中的作用是什么?
- FB-51-CP-P-025 如何实现音频可视化效果?
- FB-51-CP-P-026 如何实现浏览器端录音并导出音频文件?
- FB-51-CP-P-027 如何实现视频转码或格式转换?
- FB-51-CP-P-028 如何实现视频直播的低延迟播放?
- FB-51-CP-P-029 浏览器端如何实现视频剪辑功能?
- FB-51-CP-P-030 如何实现 360 度全景视频播放?
- FB-51-CP-P-031 多媒体前端开发中如何处理不同浏览器的格式兼容性?
- FB-51-FS-P-017 HLS 直播低延迟优化方案(LL-HLS)的原理是什么?
- FB-51-FS-P-023 Web Audio 中的 AudioWorklet 和 ScriptProcessorNode 有什么区别?
- FB-51-FS-P-024 如何实现图片/视频的懒加载和预加载策略?
- FB-51-FS-P-025 浏览器端如何处理大文件上传?
- FB-51-PE-P-018 WebRTC 中的延迟、抖动和拥塞控制如何实现?
- FB-51-PE-P-021 图片和视频的前端压缩方案对比?
- FB-51-SC-P-022 如何实现一个支持多音轨切换的视频播放器?
- FB-51-SC-P-023 如何在 Web 端实现音视频剪辑功能?
低代码(16 道)
- FB-52-CD-P-004 请实现一个 JSON Schema 到 React 组件的简易出码器
- FB-52-CO-P-003 低代码平台的出码(Code Generation)和二次开发如何设计?
- FB-52-CP-P-008 低代码开发和传统 ProCode 开发的边界在哪里?
- FB-52-CP-P-009 低代码平台如何支持逻辑编排?
- FB-52-CP-P-010 低代码平台如何保证生成应用的性能?
- FB-52-CP-P-011 低代码平台如何版本管理和回滚?
- FB-52-CP-P-012 低代码平台如何与现有业务系统集成?
- FB-52-CP-P-013 低代码平台中的表达式引擎如何设计?
- FB-52-EN-P-007 低代码平台的多人协作与实时同步如何实现?
- FB-52-FS-P-001 低代码渲染引擎的核心原理是什么?
- FB-52-PE-P-006 如何优化低代码平台中大数据量表格的性能?
- FB-52-SC-P-005 如何设计一个低代码流程设计器?
- FB-52-SC-P-006 如何保证低代码生成的代码质量和可维护性?
- FB-52-SC-P-007 低代码平台如何支持多端渲染?
- FB-52-SD-P-002 如何设计一个低代码页面渲染引擎?
- FB-52-SD-P-003 低代码平台的数据权限模型如何设计?
计算机基础(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 有什么区别?
行为面试(18 道)
- FB-54-SS-P-001 描述一次你带领团队完成目标的经历
- FB-54-SS-P-002 如何处理团队中的低绩效或冲突成员?
- FB-54-SS-P-003 在资源不足的情况下,你如何保证项目交付?
- FB-54-SS-P-004 如何影响没有汇报关系的同事?
- FB-54-SS-P-005 当你的技术方案被推翻或需要重大变更时,你怎么处理?
- FB-54-SS-P-006 你如何建立团队的技术氛围?
- FB-54-SS-P-007 当你准备离职时,如何做好交接和知识沉淀?
- FB-54-SS-P-008 请描述一次你不得不做出艰难决策的经历。
- FB-54-SS-P-009 请描述一次你收到负面反馈后如何改进的经历。
- FB-54-SS-P-010 请描述一次你处理多任务并行的情况。
- FB-54-SS-P-011 请描述一次你帮助团队成员成长的经历。
- FB-54-SS-P-012 你为什么想加入我们公司?
- FB-54-SS-P-013 你最大的优点和缺点分别是什么?
- FB-54-SS-P-014 请描述一次你协调多个团队合作完成复杂项目的经历。
- FB-54-SS-P-015 请描述一次你处理客户或用户投诉的经历。
- FB-54-SS-P-016 请描述一次你如何设定并达成一个具有挑战性的目标。
- FB-54-SS-P-017 请描述一次你在资源有限情况下完成项目的经历。
- FB-54-SS-P-018 请描述一次你建立或被建立信任的经历。
简历与面试技巧(17 道)
- FB-55-CP-P-017 如何在简历和面试中呈现复杂项目的全局贡献?
- FB-55-CP-P-018 面试中如何展示技术深度而不陷入炫技?
- FB-55-CP-P-020 如何向面试官解释职业空窗期或频繁跳槽?
- FB-55-RI-P-001 如果你重新做这个项目,你会在哪些方面做出不同选择?
- FB-55-RI-P-002 你在这个项目中遇到的最大挑战是什么?你如何带领团队克服的?
- FB-55-RI-P-003 你简历上提到精通/熟悉某技术,能深入讲一下原理吗?
- FB-55-RI-P-004 你的项目中有哪些体现你架构能力的点?
- FB-55-RI-P-005 你在项目中的数据驱动决策有哪些案例?
- FB-55-RI-P-006 请介绍一下你简历上提到的某个开源贡献或技术分享。
- FB-55-RI-P-007 你在项目中的角色是如何演变的?
- FB-55-RI-P-008 你如何评价自己的技术深度和广度?
- FB-55-RI-P-009 你为什么离开上一家公司?
- FB-55-RI-P-010 你对我们这个岗位有什么期待?
- FB-55-SS-P-019 如何准备和应对薪资谈判?
- FB-55-SS-P-021 如何准备技术演讲或架构汇报型面试?
- FB-55-SS-P-022 如何在面试中展现跨团队协作能力?
- FB-55-SS-P-023 模拟面试与复盘的方法有哪些?
行业特化(17 道)
- FB-56-CO-P-005 Web3/区块链对前端开发的影响与挑战
- FB-56-CP-P-002 如何拆解一个行业标杆产品的技术架构?
- FB-56-CP-P-007 行业技术生态竞争分析方法
- FB-56-IN-P-001 你怎么看待前端安全在行业中的重要性?
- FB-56-IN-P-002 你认为云原生和 Serverless 对前端有什么影响?
- FB-56-IN-P-003 你怎么看待前端岗位的天花板和职业发展路径?
- FB-56-IN-P-004 你对我们公司的产品有什么建议?
- FB-56-IN-P-005 你怎么看待国内互联网行业“35岁危机”这一现象?
- FB-56-IN-P-006 你如何看待远程办公和分布式团队对前端协作的影响?
- FB-56-IN-P-007 你如何看待 AI 对前端开发的替代作用?
- FB-56-IN-P-008 你如何看待前端在医疗健康行业的应用?
- FB-56-IN-P-009 你怎么看待物联网(IoT)行业对前端的需求?
- FB-56-IN-P-010 你如何看待前端在内容创作和自媒体行业的角色?
- FB-56-SC-P-004 电商实时数据大屏的技术方案
- FB-56-SC-P-006 toB 复杂业务表单配置化方案
- FB-56-SD-P-001 设计一个支持多行业的低代码平台前端架构
- FB-56-SE-P-003 金融级前端安全体系设计
架构题(772 道)
JavaScript(5 道)
- FB-01-CP-R-001 从架构师角度,如何为大型前端团队制定 JavaScript 代码规范?
- FB-01-SC-R-001 在低代码平台中,如何安全执行用户自定义的 JavaScript 逻辑?
- FB-01-SD-R-001 如何设计一个前端代码执行沙箱?
- FB-01-SD-R-002 如何设计一个前端脚本加载器?
- FB-01-SD-R-003 如何设计一个前端错误监控 SDK?
TypeScript(8 道)
- FB-02-CP-R-001 如何在类型安全与开发效率(DX)之间取得平衡?
- FB-02-EN-R-001 Monorepo 中 TypeScript 配置应该如何设计?
- FB-02-PE-R-001 如何优化大型 TypeScript 项目的编译性能?
- FB-02-SC-R-001 如何制定一个从 JavaScript 迁移到 TypeScript 的方案?
- FB-02-SD-R-001 如何为大型前端项目设计类型系统架构?
- FB-02-SD-R-002 如何设计类型安全的 API Client?
- FB-02-SD-R-003 如何在企业级应用中合理使用 Decorators?
- FB-02-SD-R-004 TypeScript Compiler API 可以做什么?请设计一个应用场景。
Browser(11 道)
- FB-03-SC-R-001 如何设计浏览器端的前端监控与可观测性体系?
- FB-03-SD-R-001 设计一个大型 SPA 的首屏性能优化体系。
- FB-03-SD-R-002 如何设计浏览器端的安全架构以防御 XSS、CSRF、点击劫持和数据窃取?
- FB-03-SD-R-003 设计一个基于 Service Worker 的前端缓存与离线可用架构。
- FB-03-SD-R-004 针对高交互 Web 应用,如何设计 60fps 动画与输入响应保障方案?
- FB-03-SD-R-005 如何设计跨窗口/跨 Tab 的前端状态同步方案?
- FB-03-SD-R-006 设计一个浏览器端前端监控与可观测性体系。
- FB-03-SD-R-007 如何设计浏览器端资源加载策略以平衡性能与实时性?
- FB-03-SD-R-008 针对微前端架构,浏览器端隔离方案如何设计?
- FB-03-SD-R-009 设计一个浏览器端内存优化与防泄漏方案。
- FB-03-SD-R-010 如何设计一个多环境、多角色的前端权限与安全模型?
计算机网络(3 道)
- FB-04-CP-R-001 从架构师视角,如何构建零信任前端安全架构?
- FB-04-SD-R-001 如何设计一个面向全球用户的 CDN + 多活静态资源分发架构?
- FB-04-SD-R-002 如何设计一个前端 API 网关 / BFF 层?
Web 安全(13 道)
- FB-05-SC-R-001 如何设计"零信任"视角下的前端安全架构?
- FB-05-SC-R-002 如何安全地集成第三方脚本、iframe 和广告?
- FB-05-SD-R-001 如何为大型企业级前端应用设计一套完整的安全体系?
- FB-05-SD-R-002 如何设计一个企业级 SSO/OIDC 认证架构?
- FB-05-SD-R-003 如何为大型站点设计和分阶段部署 CSP?
- FB-05-SD-R-004 如何从前端视角设计一个安全的 API Gateway?
- FB-05-SE-R-001 如何在团队中落地安全 SDL(安全开发生命周期)?
- FB-05-SE-R-002 如何治理前端供应链安全风险?
- FB-05-SE-R-003 前端加密与密钥管理有哪些原则和最佳实践?
- FB-05-SE-R-004 前端隐私合规(GDPR/个保法)需要关注哪些技术点?
- FB-05-SE-R-005 如何建立企业级前端安全运营指标体系?
- FB-05-SE-R-006 如何在团队内建立前端安全红蓝演练机制?
- FB-05-SE-R-007 零信任视角下如何实现前端持续认证与设备绑定?
HTML/CSS(7 道)
- FB-06-CP-R-001 原子化 CSS 与语义化类名如何权衡与选型?
- FB-06-EN-R-001 如何在大型前端项目中管理 CSS?
- FB-06-EN-R-002 在 Monorepo 中如何组织样式代码和防止样式污染?
- FB-06-PE-R-001 设计一个首屏渲染 CSS 优化方案。
- FB-06-SC-R-001 如何设计一个支持 RTL、暗黑模式、多尺寸的主题系统?
- FB-06-SD-R-001 设计一个企业级组件库的 CSS 架构。
- FB-06-SD-R-002 设计一个跨团队的 Design Token 体系。
可访问性(a11y)(7 道)
- FB-07-CP-R-001 如何将无障碍测试集成到前端工程化与 CI/CD 中?
- FB-07-CP-R-002 如果线上出现无障碍合规诉讼或用户投诉,你会如何处理与修复?
- FB-07-CP-R-004 如何度量前端产品的可访问性成熟度?
- FB-07-SD-R-001 如何为大型企业级前端制定可访问性治理策略?
- FB-07-SD-R-002 如何设计一个可访问的组件库 / 设计系统?
- FB-07-SD-R-003 面向全球用户的产品的国际化(i18n)与无障碍如何协同设计?
- FB-07-SS-R-001 如何推动团队建立无障碍文化并获得资源支持?
数据结构与算法(8 道)
- FB-08-CP-R-001 如何为大型前端应用设计一套数据结构来管理状态?
- FB-08-CP-R-002 如何在前端实现一个高效的搜索/过滤系统?
- FB-08-CP-R-003 前端算法选型的权衡:时间、空间、可维护性。
- FB-08-SC-R-001 设计一个前端 LRU 缓存。
- FB-08-SC-R-002 设计一个前端请求去重/合并系统。
- FB-08-SC-R-003 设计一个前端任务调度器。
- FB-08-SC-R-004 设计一个虚拟列表的算法方案。
- FB-08-SC-R-005 设计一个 Undo/Redo 系统。
设计模式(8 道)
- FB-09-CP-R-001 React 和 Vue 中体现了哪些设计模式?
- FB-09-CP-R-002 如何根据业务场景选择合适的设计模式?
- FB-09-CP-R-003 微前端架构中常用哪些设计模式?
- FB-09-SC-R-001 在设计大型前端组件库时,你会如何运用设计模式?
- FB-09-SC-R-002 如何将一个继承过深的组件体系重构为组合式架构?
- FB-09-SC-R-003 如何在大型前端项目中选择与应用设计模式?
- FB-09-SD-R-001 设计一个前端跨页面/跨 iframe 的事件总线。
- FB-09-SD-R-002 设计一个前端权限控制系统。
构建工具(29 道)
- 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 未来前端构建工具的发展趋势是什么?
- FB-10-CP-R-001 如何评估和迁移前端构建工具?
- FB-10-CP-R-002 前端构建工具选型时需要做哪些 POC 和迁移风险评估?
- FB-10-CP-R-011 如何建立前端构建工具选型的决策框架与 ROI 评估?
- FB-10-CP-R-012 如何评估是否值得将 Webpack 迁移到 Rspack?
- FB-10-EN-R-001 CI/CD 中的构建优化与并行化策略。
- FB-10-EN-R-002 如何设计前端构建的标准化流水线?
- FB-10-EN-R-009 如何构建前端产物安全与供应链安全体系?
- FB-10-EN-R-010 如何设计企业级前端构建平台的插件体系?
- FB-10-PE-R-001 如何在组织架构层面推动前端构建性能优化落地?
- FB-10-SC-R-001 设计一个支持多环境、多团队的前端构建平台。
- FB-10-SC-R-002 设计一个支持 A/B 测试的前端构建与发布方案
- FB-10-SC-R-003 设计一个前端依赖治理与构建安全审计流程
- FB-10-SC-R-010 多仓库/多团队统一构建规范与治理机制如何设计?
- FB-10-SC-R-011 如何设计支持微前端的构建方案?
- FB-10-SD-R-001 设计一个企业级前端构建体系。
- FB-10-SD-R-002 设计一个前端产物发布与回滚系统。
- FB-10-SD-R-003 设计一个前端组件库/Monorepo 的构建与发布流程。
- FB-10-SD-R-004 设计一个企业级前端构建产物质量门禁体系
- FB-10-SD-R-005 设计一个支持多构建工具统一配置的前端工程平台
- FB-10-SD-R-007 设计一个企业级 Monorepo 构建平台。
- FB-10-SD-R-008 设计一个前端构建产物分析平台
Monorepo(29 道)
- FB-11-CO-R-001 Monorepo 与 Polyrepo 在长期演进中的取舍
- FB-11-CP-R-001 比较各家 Monorepo 工具(Turborepo / Nx / Rush / Lerna / Bazel)的适用场景。
- FB-11-CP-R-002 Monorepo 的优劣及何时不应该使用 Monorepo?
- FB-11-CP-R-003 讨论 Monorepo 中"一个仓库"与"多个仓库"的决策框架。
- FB-11-CP-R-004 如何向管理层论证 Monorepo 的 ROI?
- FB-11-CP-R-013 Monorepo 与平台工程(Platform Engineering)有什么关系?
- FB-11-CP-R-015 如何评估 Monorepo 是否应该拆分为多个仓库?
- FB-11-CP-R-018 Monorepo 中如何平衡技术民主与技术治理?
- FB-11-CP-R-019 大型 Monorepo 中的权限和代码所有权如何设计?
- FB-11-EN-R-001 如何设计 Monorepo 的发布火车?
- FB-11-SC-R-001 如何设计 Monorepo 的文档和示例站点?
- FB-11-SD-R-001 设计一个大型前端 Monorepo 的整体架构。
- FB-11-SD-R-002 如何从 Multirepo 迁移到 Monorepo?
- FB-11-SD-R-003 设计 Monorepo 下的 CI/CD 流水线。
- FB-11-SD-R-004 Monorepo 下如何平衡代码共享与包独立发布?
- FB-11-SD-R-005 设计一个跨团队 Monorepo 的代码所有权与评审策略。
- FB-11-SD-R-006 如何设计 Monorepo 下的渐进式迁移与拆分策略?
- FB-11-SD-R-007 设计一个支持微前端聚合的 Monorepo 架构。
- FB-11-SD-R-008 如何设计 Monorepo 的依赖治理与自动化审计体系?
- FB-11-SD-R-009 设计支持多语言(前端 + Node + Python)的 Monorepo 架构。
- FB-11-SD-R-010 设计一个 Monorepo 下的共享服务与 API 治理方案。
- FB-11-SD-R-011 设计 Monorepo 下的文档站点与开发者门户。
- FB-11-SD-R-012 如何设计一个支持领域驱动设计(DDD)的 Monorepo 分层架构?
- FB-11-SD-R-014 如何设计 Monorepo 下的 release train 发布模式?
- FB-11-SD-R-016 如何设计 Monorepo 的安全供应链体系?
- FB-11-SD-R-017 如何设计 Monorepo 的构建可观测性体系?
- FB-11-SD-R-019 如何设计 Monorepo 下的 AI Coding 辅助策略?
- FB-11-SD-R-020 如何制定 Monorepo 的长期演进路线图?
- FB-11-SD-R-021 设计一个企业级 Monorepo 治理方案
CI/CD(29 道)
- FB-12-CO-R-001 CI/CD 的未来趋势是什么?
- FB-12-CP-R-004 如何在持续交付中平衡发布速度与稳定性?
- FB-12-CP-R-006 如何度量并提升 CI/CD 成熟度?
- FB-12-CP-R-015 如何看待 AI 在 CI/CD 中的应用?设计智能化流水线需要考虑什么?
- FB-12-CP-R-017 如何在组织中推动 CI/CD 文化转型?
- FB-12-CP-R-020 如何评估和选择 CI/CD 工具链?
- FB-12-CP-R-023 如何在 CI/CD 中落地 FinOps 成本优化?
- FB-12-CP-R-024 如何实现 CI/CD 中的安全左移?
- FB-12-EN-R-001 如何设计 CI/CD 的成本优化方案?
- FB-12-SC-R-001 如何设计 CI/CD 的灾难恢复方案?
- FB-12-SD-R-001 如何设计基于 GitOps 的前端持续交付系统?
- FB-12-SD-R-002 如何设计零停机全球前端部署方案?
- FB-12-SD-R-003 如何为微前端(Micro-Frontend)设计 CI/CD 流水线?
- FB-12-SD-R-005 如何设计企业级前端制品管理与发布火车?
- FB-12-SD-R-007 如何设计支持多租户、多区域的前端 CI/CD 平台?
- FB-12-SD-R-008 如何在 CI/CD 中落地 DevSecOps?
- FB-12-SD-R-009 如何设计发布编排系统,实现自动灰度、观测与回滚?
- FB-12-SD-R-010 如何设计前端制品的不可变性与全链路可追溯架构?
- FB-12-SD-R-011 如何进行企业级 CI/CD 治理,实现模板化与度量驱动?
- FB-12-SD-R-012 如何设计面向 Serverless 与边缘计算的 CI/CD 架构?
- FB-12-SD-R-013 大型 Monorepo 下如何协调 CI/CD、发布火车与版本兼容?
- FB-12-SD-R-014 如何设计 CI/CD 系统的灾难恢复与业务连续性方案?
- FB-12-SD-R-016 如何设计面向 AIOps 的智能 CI/CD 平台?
- FB-12-SD-R-018 如何设计前端制品的零信任安全架构?
- FB-12-SD-R-019 如何构建企业级 CI/CD 平台度量体系?
- FB-12-SD-R-021 如何设计 CI/CD 中的混沌工程实践?
- FB-12-SD-R-022 如何设计前端全链路可观测与发布联动?
- FB-12-SD-R-024 如何设计下一代云原生前端交付平台?
- FB-12-SD-R-025 设计一个多环境、多地域的部署平台
代码质量与测试(29 道)
- FB-13-CO-R-001 代码质量与交付速度如何平衡?
- FB-13-CP-R-001 如何在团队中推动质量左移(Shift-Left)文化?
- FB-13-CP-R-002 作为架构师,如何在业务压力下守住质量底线?
- FB-13-CP-R-003 如何在团队中推动“测试优先”的工程文化?
- FB-13-CP-R-004 历史项目测试覆盖率极低,如何制定分阶段治理方案?
- FB-13-CP-R-005 如何向非技术决策者证明质量投入的价值?
- FB-13-CP-R-006 如何在大型组织中推行代码质量文化?
- FB-13-EN-R-001 如何设计前端自动化回归测试体系?
- FB-13-SC-R-001 如何设计全链路质量度量体系?
- FB-13-SD-R-001 如何为大型前端项目设计一套完整的测试策略?
- FB-13-SD-R-002 Monorepo 中的测试策略与单仓库有什么不同?
- FB-13-SD-R-003 如何建立一个可观测的前端质量度量体系?
- FB-13-SD-R-004 如何理解测试金字塔与 Testing Trophy?前端应该如何取舍?
- FB-13-SD-R-005 微前端架构下如何做好测试?
- FB-13-SD-R-006 如何为大型前端项目设计分层测试架构?
- FB-13-SD-R-007 如何评估并提升团队测试成熟度?
- FB-13-SD-R-008 如何设计前端“测试即文档”体系?
- FB-13-SD-R-009 如何在大型组织中建立共享测试服务与平台?
- FB-13-SD-R-010 如何设计前端混沌测试与故障演练方案?
- FB-13-SD-R-011 AI 辅助编码下,前端测试策略应如何演进?
- FB-13-SD-R-012 如何为前端组件库设计测试策略?
- FB-13-SD-R-013 跨团队前端项目如何统一质量标准与门禁?
- FB-13-SD-R-014 如何为大型前端项目设计自动化回归测试体系?
- FB-13-SD-R-015 如何设计前端测试数据管理体系?
- FB-13-SD-R-016 如何在前端落地契约测试与 API 版本治理?
- FB-13-SD-R-017 如何设计前端灰度发布与线上质量验证机制?
- FB-13-SD-R-018 如何设计前端全链路可观测的质量保障体系?
- FB-13-SD-R-019 如何为前端低代码平台设计测试策略?
- FB-13-SD-R-032 设计一个前端质量保障平台
设计系统与组件库(24 道)
- FB-14-CP-R-001 展望未来 3-5 年,设计系统与组件库会如何演进?
- FB-14-SC-R-001 从 0 到 1 建设组件库,如何进行技术选型?
- FB-14-SC-R-002 如何从业务组件沉淀到通用组件库?
- FB-14-SC-R-003 如何平衡组件库的一致性与业务灵活性?
- FB-14-SC-R-004 组件库团队如何与产品、设计、业务团队协作?
- FB-14-SC-R-005 如何从设计系统沉淀业务设计语言?
- FB-14-SC-R-006 如何评估组件库的商业价值?
- FB-14-SD-R-001 如何设计一个跨框架(React/Vue/Svelte)的组件库?
- FB-14-SD-R-002 如何设计一套 DesignOps 与设计系统平台?
- FB-14-SD-R-003 如何建设组件库的文档与开发者生态?
- FB-14-SD-R-004 如何构建组件库的视觉回归测试体系?
- FB-14-SD-R-005 如何设计支持多品牌的设计系统主题架构?
- FB-14-SD-R-006 如何治理与度量大型组件库的健康度?
- FB-14-SD-R-007 如何保障设计与研发实现的一致性?
- FB-14-SD-R-008 如何构建组件库的可访问性工程化体系?
- FB-14-SD-R-009 如何设计一个企业级设计系统平台(Design System Platform)?
- FB-14-SD-R-010 如何构建跨团队的组件库贡献与 Review 流程?
- FB-14-SD-R-011 如何设计支持 AI 辅助的组件库生成与维护流程?
- FB-14-SD-R-012 如何设计组件库的长期演进与 Deprecation 战略?
- FB-14-SD-R-013 如何保障组件库在微前端架构下的样式与行为隔离?
- FB-14-SD-R-014 如何设计一套组件库的语义化版本自动化与变更管理?
- FB-14-SD-R-015 如何设计组件库的 CI/CD 与发布流水线?
- FB-14-SD-R-016 如何构建组件库的开发者体验(DX)?
- FB-14-SD-R-017 如何设计组件库的暗色/浅色主题自动切换?
React(21 道)
- FB-15-SD-R-027 大型 React 项目中如何选择状态管理方案?
- FB-15-SD-R-028 如何系统地对 React 应用做性能优化?
- FB-15-SD-R-029 微前端架构下使用 React 有哪些关键考虑点?
- FB-15-SD-R-030 如何设计一个高质量的 React 组件库?
- FB-15-SD-R-057 如何设计一个大型 React 前端工程体系?
- FB-15-SD-R-058 如何设计一个 React SSR/SSG 架构?
- FB-15-SD-R-059 React 应用如何与微服务后端集成?
- FB-15-SD-R-060 大型 React 项目的路由设计应注意什么?
- FB-15-SD-R-061 如何设计 React 组件库的 Monorepo 架构?
- FB-15-SD-R-062 React 项目中 TypeScript 架构规范应如何制定?
- FB-15-SD-R-063 如何设计一个基于 React 的 AI 应用前端架构?
- FB-15-SD-R-064 React 跨平台方案如何选型?
- FB-15-SD-R-065 React 项目的可观测性体系如何设计?
- FB-15-SD-R-066 设计一个 React 状态管理方案
- FB-15-SD-R-067 如何设计 React 应用的性能监控体系?
- FB-15-SD-R-068 设计一个 React 组件的低代码平台
- FB-15-SD-R-069 React 项目如何进行微前端改造?
- FB-15-SD-R-070 如何设计 React SSR 的缓存策略?
- FB-15-SD-R-071 React 组件库如何支持多框架?
- FB-15-SD-R-072 如何设计 React 应用的安全体系?
- FB-15-SD-R-073 React 项目如何做国际化架构?
Vue(23 道)
- FB-16-SD-R-026 如何设计一个大型的 Vue 前端应用架构?
- FB-16-SD-R-027 如何设计一个高质量的 Vue 组件库?
- FB-16-SD-R-028 微前端架构下使用 Vue 有哪些关键考虑点?
- FB-16-SD-R-029 Vue 2 项目如何迁移到 Vue 3?
- FB-16-SD-R-030 Vue 配合 TypeScript 有哪些最佳实践和挑战?
- FB-16-SD-R-031 如何基于 Vue 设计一个低代码表单引擎?
- FB-16-SD-R-032 如何设计 Vue 中后台管理系统的模块架构?
- FB-16-SD-R-033 Vue 应用全球化(i18n)架构如何设计?
- FB-16-SD-R-034 Vue 前端监控与错误追踪体系如何建设?
- FB-16-SD-R-035 Vue 3 + TypeScript + Monorepo 企业级工程架构如何设计?
- FB-16-SD-R-036 Vue 项目 CI/CD 与自动化发布流程如何设计?
- FB-16-SD-R-037 如何基于 Vue 设计一个可扩展的插件系统?
- FB-16-SD-R-038 Vue 服务端渲染(SSR)架构如何设计?
- FB-16-SD-R-039 Vue 中实现设计系统与主题定制的架构方案是什么?
- FB-16-SD-R-040 Vue 应用从 0 到 1 的技术选型与演进路线如何规划?
- FB-16-SD-R-041 Vue 设计系统与组件库架构
- FB-16-SD-R-042 Vue 应用性能监控体系
- FB-16-SD-R-043 Vue 微前端改造方案
- FB-16-SD-R-044 Vue SSR 缓存策略
- FB-16-SD-R-045 Vue 应用安全架构
- FB-16-SD-R-046 Vue 低代码平台设计
- FB-16-SD-R-047 Vue 组件库跨框架支持
- FB-16-SD-R-048 Vue 项目国际化架构
跨端技术(21 道)
- FB-17-SD-R-024 如何设计一个大型跨端应用的架构?
- FB-17-SD-R-025 跨端应用的数据层和状态共享如何设计?
- FB-17-SD-R-026 如何设计一个跨端组件库?
- FB-17-SD-R-027 跨端应用的性能监控和错误处理如何设计?
- FB-17-SD-R-028 跨端应用的 CI/CD 和热更新策略如何设计?
- FB-17-SD-R-029 如何将一个原生或 H5 项目迁移到跨端框架?
- FB-17-SD-R-030 设计一个从 URL 到小程序/H5/App 任意页面打开的通用跳转系统。
- FB-17-SD-R-057 如何设计跨端微前端架构?
- FB-17-SD-R-058 如何构建跨端统一设计系统?
- FB-17-SD-R-059 如何设计跨端应用的灰度发布和热更新平台?
- FB-17-SD-R-060 如何设计跨端应用的监控告警体系?
- FB-17-SD-R-061 跨端技术选型应该建立怎样的决策框架?
- FB-17-SD-R-062 跨端应用的国际化与本地化架构如何设计?
- FB-17-SD-R-063 跨端应用如何与原生应用形成混合架构?
- FB-17-SD-R-064 跨端应用如何建立性能度量体系和性能基线?
- FB-17-SD-R-065 跨端应用的长期演进和技术债务如何治理?
- FB-17-SD-R-066 跨端应用安全架构
- FB-17-SD-R-067 跨端应用 CI/CD 与热更新
- FB-17-SD-R-068 跨端应用性能度量体系
- FB-17-SD-R-069 跨端应用与原生应用混合架构
- FB-17-SD-R-070 跨端技术长期演进规划
AI 工程化(29 道)
- FB-18-CO-R-059 作为架构师如何界定大模型能力边界并据此设计前端架构?
- FB-18-CP-R-027 如何设计多模型路由与 Fallback 策略?
- FB-18-CP-R-030 AI 工程化的技术选型与落地路线如何规划?
- FB-18-CP-R-031 如何规划企业级 AI 知识平台的演进路线?
- FB-18-CP-R-032 如何设计 AI 应用的定价与商业化策略?
- FB-18-CP-R-033 AI 应用的商业化策略
- FB-18-CP-R-065 规划传统 Web 应用向 AI 原生应用演进
- FB-18-EN-R-028 如何建设 LLM 应用的可观测性体系?
- FB-18-EN-R-032 AI 工程化如何做 CI/CD、模型版本管理与合规治理?
- FB-18-EN-R-033 如何设计支持百万人同时在线的 AI 流式服务?
- FB-18-EN-R-034 如何设计 LLM 应用的异地多活与灾备架构?
- FB-18-EN-R-035 AI 工程化的 CI/CD 最佳实践
- FB-18-EN-R-062 如何建设企业级 AI 工程化的标准前端组件与平台能力?
- FB-18-EN-R-067 如何从治理角度保障企业 AI 工程化可持续发展?
- FB-18-PE-R-064 面对亿级 AI 调用,前端如何进行性能与成本治理?
- FB-18-SC-R-029 如何设计一个 Agent 系统?对比 ReAct 和 Plan-and-Execute
- FB-18-SC-R-030 如何设计一个面向复杂表单的 AI 自动填充 Agent?
- FB-18-SC-R-031 如何设计一个支持多人协作的 AI 白板系统?
- FB-18-SC-R-061 设计一个跨端 AI Agent 系统
- FB-18-SD-R-025 如何设计一个前端 AI Copilot 的架构?
- FB-18-SD-R-026 如何设计一个企业级 AI 中台?
- FB-18-SD-R-031 如何设计一个多租户 AI SaaS 平台?
- FB-18-SD-R-032 如何设计一个前端智能体的插件化生态?
- FB-18-SD-R-033 如何设计一个多模态 AI 中台?
- FB-18-SD-R-034 如何设计一个面向金融行业的可信 AI 前端架构?
- FB-18-SD-R-035 设计一个企业级 AI Agent 平台
- FB-18-SD-R-060 设计一个低延迟实时 AI 协作编辑器前端
- FB-18-SD-R-066 设计一个可插拔的多模型适配层
- FB-18-SE-R-063 如何设计覆盖全链路的 AI 安全架构?
Node.js / BFF(21 道)
- FB-19-EN-R-030 Node.js 服务如何做容器化部署与 CI/CD?
- FB-19-SD-R-024 如何设计一个高并发、高可用的 BFF 网关?
- FB-19-SD-R-025 如何设计一个基于 Node.js 的微服务架构?
- FB-19-SD-R-026 Serverless / Edge 场景下,BFF 应该如何设计?
- FB-19-SD-R-027 如何为 Node.js 服务设计一套完整的可观测性体系?
- FB-19-SD-R-028 BFF 如何进行分层与领域聚合设计?
- FB-19-SD-R-029 Deno、Bun 与 Node.js 相比各有什么优劣?如何选型?
- FB-19-SD-R-057 如何设计一个多租户、可水平扩展的 BFF 平台?
- FB-19-SD-R-058 如何为 Node.js BFF 设计完整的可观测性体系?
- FB-19-SD-R-059 如何为 BFF 设计统一的 API 版本治理与兼容性策略?
- FB-19-SD-R-060 如何设计一个支持多端(Web/H5/小程序/App)的 BFF 数据聚合网关?
- FB-19-SD-R-061 Node.js 服务在 Kubernetes 中如何做到优雅关闭、弹性伸缩与成本优化?
- FB-19-SD-R-062 如何设计基于事件驱动与 CQRS 的 BFF 数据同步架构?
- FB-19-SD-R-063 BFF 层如何与 API 网关、Service Mesh、鉴权中心协同工作?
- FB-19-SD-R-064 设计一个支持 Serverless / Edge 部署的 BFF 框架需要考虑哪些因素?
- FB-19-SD-R-065 单体 BFF 如何演进为领域驱动的微前端 + 微服务协同架构?
- FB-19-SD-R-066 设计一个多租户 BFF 平台
- FB-19-SD-R-067 Node.js 服务可观测性体系
- FB-19-SD-R-068 BFF 与 Service Mesh 协同
- FB-19-SD-R-069 Node.js 服务容器化与 CI/CD
- FB-19-SD-R-070 BFF 领域驱动设计
Git 工作流与变更管理(21 道)
- FB-20-CP-R-031 Git 工作流如何与合规审计要求结合?
- FB-20-CP-R-064 公司并购后,如何整合多代码平台的 Git 工作流?
- FB-20-CP-R-065 AI 辅助代码生成场景下如何治理 Git 提交和审查?
- FB-20-EN-R-027 如何构建 Git 工作流中的自动化质量门禁?
- FB-20-EN-R-030 Git 灾难恢复和备份策略应该如何设计?
- FB-20-EN-R-059 Git 工作流如何与 DORA 指标联动?
- FB-20-EN-R-062 GitOps 如何与 Git 工作流结合?
- FB-20-EN-R-065 AI 辅助代码生成场景下,如何治理 Git 提交和审查?
- FB-20-EN-R-066 GitOps 如何与 Git 工作流结合?
- FB-20-SD-R-025 如何为千人规模的前端团队设计 Git 分支策略?
- FB-20-SD-R-026 Monorepo 和 Polyrepo 如何选型?
- FB-20-SD-R-028 如何治理大规模 Git 仓库的性能和可维护性?
- FB-20-SD-R-058 如何为全球多地域团队设计 Git 工作流?
- FB-20-SD-R-060 多产品线的统一代码仓应该如何治理?
- FB-20-SD-R-063 微前端仓库应该如何拆分或统一管理?
- FB-20-SD-R-067 如何为全球多地域团队设计 Git 工作流?
- FB-20-SD-R-068 多产品线的统一代码仓应该如何治理?
- FB-20-SS-R-029 如何在团队中建立健康的代码审查文化?
- FB-20-SS-R-061 如何推动团队从旧工作流迁移到新 Git 工作流?
- FB-20-SS-R-066 如何在团队中构建 blameless 的提交与发布文化?
- FB-20-SS-R-067 如何推动团队从旧工作流迁移到新 Git 工作流?
开发者体验与工程效能(31 道)
- FB-21-CA-R-001 分析一段 GitHub Actions + Turborepo 的 CI 配置,指出远程缓存失效和任务并行化问题
- FB-21-CD-R-001 请手写一个将 Design Token JSON 转换为 CSS 自定义属性与 TypeScript 类型定义的 Node 工具函数
- FB-21-CO-R-001 Babel 插件体系的可观测性如何设计?如何度量转译耗时与插件影响
- FB-21-CP-R-026 如何在保证质量的前提下将 CI 反馈时间从 30 分钟降到 5 分钟?给出分层优化方案。
- FB-21-CP-R-028 如何从 DX 角度度量并改进自动化测试的投资回报率(ROI)?
- FB-21-CP-R-058 如何从 0 到 1 搭建前端平台工程(Platform Engineering)团队?
- FB-21-CP-R-060 大型企业前端工具链标准化应如何推进?
- FB-21-CP-R-064 前端工程化体系应如何持续演进?
- FB-21-CP-R-086 如何制定前端技术栈的长期演进和退役策略?
- FB-21-CP-R-090 如何在企业并购或技术整合中保障开发者体验不降级?
- FB-21-CP-R-091 引入 Turborepo 改造 Monorepo 时,如何设计迁移路径、治理策略和度量体系
- FB-21-FS-R-001 Design Token 的多平台转换原理是什么?如何设计可扩展的 Token 编译管线
- FB-21-PE-R-001 大型 TypeScript 仓库中 tsc 类型检查极慢,如何从架构层面系统排查与优化
- FB-21-SC-R-001 如何为前端团队设计基于 GitHub Actions 与 Docker 的云端开发/CI 一体化环境
- FB-21-SD-R-024 为百人前端团队设计一个平台工程(Platform Engineering)体系,关键能力、组织形式和度量指标是什么?
- FB-21-SD-R-025 如何设计一套可扩展的脚手架生态,支持多业务线、多技术栈?
- FB-21-SD-R-027 设计一个 Monorepo 构建缓存和分布式任务调度方案(remote cache + task graph)。
- FB-21-SD-R-029 设计一个前端组件/文档/示例一体化的内部工具链。
- FB-21-SD-R-057 如何设计一个支持多云部署的前端发布平台?
- FB-21-SD-R-059 如何设计一个前端资产(组件/页面)复用平台?
- FB-21-SD-R-061 如何设计一个前端研发效能数据中台?
- FB-21-SD-R-063 如何设计一个低代码搭建平台的开发者体验?
- FB-21-SD-R-065 如何设计一个全球化的前端研发协同平台?
- FB-21-SD-R-085 设计一个面向多 BU 的前端研效中台,核心模块和运营策略是什么?
- FB-21-SD-R-087 设计一个支持 A/B 实验和灰度发布的前端发布与回滚平台。
- FB-21-SD-R-089 设计一个前端工程化的“即服务”(DXaaS)平台。
- FB-21-SD-R-090 设计一个面向大型前端 Monorepo 的 Storybook 文档系统
- FB-21-SS-R-030 作为前端架构师,如何向管理层证明 DX 投入的业务价值?
- FB-21-SS-R-062 如何推动组织层面的 DX 文化变革?
- FB-21-SS-R-088 作为前端技术负责人,如何构建可传承的技术决策机制?
- FB-21-SS-R-089 作为技术负责人,你如何推动 Vite + TypeScript 迁移并管理团队的抵触情绪和学习成本
部署与 SRE(21 道)
- FB-22-CA-R-001 下面一段基于版本化策略的资源路由代码输出什么?请从 SRE 角度分析风险。
- FB-22-CD-R-001 请手写一个前端资源缓存策略决策函数,根据文件名和环境返回 Cache-Control 头。
- FB-22-CO-R-001 什么是自动扩容?它与前端 Web Vitals 性能指标有什么核心区别与联系?
- FB-22-CO-R-002 自动扩容与 Web Vitals 的关系
- FB-22-CP-R-028 SRE 文化如何在前端团队落地?
- FB-22-CP-R-030 从研发效率到稳定性,前端工程化体系如何建设?
- FB-22-CP-R-031 结合质量门禁与金丝雀发布,谈谈如何构建前端自动化发布风险控制体系。
- FB-22-CP-R-032 前端自动化发布风险控制
- FB-22-FS-R-001 请解释 DNS 域名解析的核心原理,及其与前端部署安全(如 RPO、DNS 劫持)的关系。
- FB-22-PE-R-001 如何排查并优化前端高可用灰度发布过程中的性能瓶颈?
- FB-22-PE-R-002 如何排查并优化前端高可用灰度发布中的性能瓶颈?
- FB-22-SC-R-001 在 Kubernetes 容器化场景下,如何为前端服务设计 Error Budget 与发布节奏?
- FB-22-SC-R-002 Kubernetes 前端 Error Budget 与发布节奏
- FB-22-SD-R-025 设计一个高可用的前端部署平台
- FB-22-SD-R-026 设计全球化多区域部署架构
- FB-22-SD-R-027 设计零停机前端发布架构
- FB-22-SD-R-029 前端灾备与多活架构设计
- FB-22-SD-R-031 SSR/SSG/CDN 混合部署架构
- FB-22-SD-R-032 如何设计一个支持多区域部署的 SSG 前端系统,兼顾数据合规与访问延迟?
- FB-22-SD-R-033 如何设计支持多区域部署的 SSG 前端系统?
- FB-22-SS-R-001 请谈谈你在跨地域容灾或 DNS 流量调度方面的架构决策经验。
包管理与供应链安全(21 道)
- FB-23-CA-R-001 分析以下 semver 范围解析代码的输出与原因
- FB-23-CD-R-001 手写一个包管理器选型决策矩阵评分函数
- FB-23-CO-R-001 包管理器选型与 workspace 机制有什么核心区别?
- FB-23-CO-R-002 包管理器选型与 workspace 机制的核心区别
- FB-23-CP-R-028 大前端团队如何进行包管理标准化与工具链建设?
- FB-23-CP-R-029 结合 node_modules 结构与包管理器选型,谈谈实践经验
- FB-23-CP-R-030 包管理器选型实践经验
- FB-23-FS-R-001 前端构建工具链如何处理 node_modules 的 bundle size 优化?
- FB-23-PE-R-001 大型 Monorepo 中 npm install 变慢,如何在保证安全校验的前提下优化性能?
- FB-23-SC-R-026 从 0 开始设计一个 Monorepo 包管理方案
- FB-23-SC-R-029 设计一个依赖漏洞应急响应流程
- FB-23-SC-R-030 如何设计前端构建产物供应链安全方案?
- FB-23-SC-R-031 如何设计前端构建产物供应链安全方案?
- FB-23-SD-R-024 如何设计企业级前端依赖治理体系?
- FB-23-SD-R-025 如何设计前端供应链安全防御体系?
- FB-23-SD-R-027 如何设计 lockfile 安全审计与自动化修复平台?
- FB-23-SD-R-030 如何设计前端构建产物的 SBOM 与可追溯体系?
- FB-23-SD-R-031 设计一个企业级前端依赖管理平台
- FB-23-SD-R-032 设计一个企业级前端依赖管理平台
- FB-23-SD-R-033 大型 Monorepo 中 install 性能优化
- FB-23-SS-R-001 谈谈你在 SemVer 治理与版本发布流程方面的实践经验
前端运维与监控(7 道)
- FB-24-CP-R-002 如何在前端开展混沌工程?
- FB-24-CP-R-007 大规模前端团队如何建立故障治理机制?
- FB-24-SD-R-001 如何设计前端 on-call 与告警升级系统?
- FB-24-SD-R-003 如何设计全球化的前端可观测性与成本优化架构?
- FB-24-SD-R-004 如何设计多 CDN 监控与自动切换?
- FB-24-SD-R-006 如何设计从前端到后端的全链路 Trace?
- FB-24-SS-R-005 如何让前端 SLO 与业务结果挂钩,并推动可靠性文化?
系统架构设计(34 道)
- 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 什么是反脆弱前端架构
- FB-25-CP-R-002 如何在大型组织中平衡前端技术栈的统一与团队的差异化需求?
- FB-25-CP-R-006 在复杂系统架构设计中,如何做权衡与取舍?
- FB-25-CP-R-012 如何在业务快速迭代中保持架构质量?
- FB-25-CP-R-013 如何评估与引入新兴技术(如 AI 编码、WebAssembly)到生产?
- FB-25-CP-R-014 什么时候应该选择 Server-Driven UI?它和低代码平台有什么区别?
- FB-25-CP-R-015 微内核架构和微前端有什么区别?
- FB-25-CP-R-016 面对一个复杂业务系统,你会如何选择前端架构模式?
- FB-25-CP-R-017 如何在组织中推进前端架构升级
- FB-25-CP-R-018 前端架构如何应对业务高速变化和不确定性
- FB-25-EN-R-002 谈谈你对“前端工程化”的理解,它在前端架构中处于什么位置?
- FB-25-EN-R-003 如何设计前端标准化工具链
- FB-25-SC-R-003 设计一个大型电商活动搭建平台的前端架构
- FB-25-SC-R-011 设计一个跨团队协作的组件共建与治理体系
- FB-25-SC-R-012 如果你发现一个项目的架构严重影响了业务发展,但重写成本极高,你会怎么做?
- FB-25-SD-R-001 设计一个组织级前端架构治理体系
- FB-25-SD-R-007 设计一个跨团队共享的前端能力平台
- FB-25-SD-R-008 设计一个全球化多端统一前端架构
- FB-25-SD-R-009 设计一个前端智能化研发平台架构
- FB-25-SD-R-010 设计一个高可用的大促前端保障体系
- FB-25-SD-R-011 假设你要从零设计一个日活千万级的内容社区前端架构,你会关注哪些关键点?
- FB-25-SD-R-012 你如何评价一个前端架构设计的好坏?
- FB-25-SD-R-013 设计一个支持多终端的 BFF 层
- FB-25-SD-R-014 设计一个前端组件库/设计系统架构
- FB-25-SD-R-015 设计一个前端性能监控与预警平台
- FB-25-SS-R-005 如何推动一个重大技术架构升级在多个业务线落地?
- FB-25-SS-R-014 如何推动组织级前端工程文化变革?
- FB-25-SS-R-015 如何在前端团队中推动架构规范的落地?
- FB-25-SS-R-016 作为前端架构师如何推动架构落地
微前端(19 道)
- FB-26-CO-R-001 你如何看待 iframe 作为微前端方案?
- FB-26-CO-R-002 在微前端架构中,主应用应该承担哪些职责?子应用应该承担哪些职责?
- FB-26-CP-R-026 面对不同业务场景,如何为团队选型 qiankun / Module Federation / Web Components / iframe?
- FB-26-CP-R-027 微前端拆分粒度如何把握
- FB-26-EN-R-028 微前端团队的 CI/CD 与仓库组织策略应该如何设计?
- FB-26-EN-R-029 微前端架构下的监控与可观测体系
- FB-26-PE-R-029 如何度量微前端的性能与用户体验?
- FB-26-PE-R-030 微前端上线后,如何进行性能优化?
- FB-26-PE-R-031 微前端大规模下的性能预算与治理
- FB-26-SC-R-001 微前端和 Monorepo 各适合什么场景?可以同时使用吗?
- FB-26-SC-R-002 如果未来浏览器原生支持更强大的应用隔离机制,微前端框架会消失吗?
- FB-26-SD-R-024 从巨石应用迁移到微前端的策略和步骤是什么?
- FB-26-SD-R-025 设计一个企业级微前端平台,需要包含哪些核心模块?
- FB-26-SD-R-026 设计一个支持 10 个团队同时开发的微前端平台,你会做哪些关键决策?
- FB-26-SD-R-027 设计一个企业级微前端基座
- FB-26-SD-R-028 设计一个支持离线能力的微前端应用
- FB-26-SD-R-029 设计一个无基座的去中心化微前端方案
- FB-26-SE-R-027 微前端安全架构需要考虑哪些风险与防御?
- FB-26-SS-R-030 微前端落地中的组织治理:团队边界、发布节奏、技术栈约束、回滚策略。
性能工程(16 道)
- FB-27-CP-R-004 假设你负责一个大型电商首页的性能优化,请给出整体优化策略。
- FB-27-CP-R-007 SPA、MPA、Islands 架构在性能上各有什么优劣?如何选择?
- FB-27-PE-R-001 性能优化中,Lab 数据和 RUM 数据有什么区别?应该如何结合使用?
- FB-27-PE-R-002 你如何处理第三方脚本对性能的影响?
- FB-27-PE-R-003 在团队中如何推动性能优化落地?
- FB-27-PE-R-005 现代前端框架(如 React 18)提供了哪些性能优化特性?
- FB-27-PE-R-006 如何平衡性能优化和开发效率?
- FB-27-PE-R-007 设计一个前端性能治理体系
- FB-27-PE-R-008 如何优化前端包体积
- FB-27-PE-R-009 前端性能优化的顶层方法论
- FB-27-SC-R-005 如何设计 CDN 缓存与边缘计算架构来优化前端性能?
- FB-27-SD-R-001 如何设计一个前端性能监控与告警系统?
- FB-27-SD-R-002 如何设计性能预算(Performance Budget)和 CI 门禁系统?
- FB-27-SD-R-003 如何为大型前端项目建立性能基线(Performance Baseline)?
- FB-27-SD-R-006 如何设计一个前端性能可视化大盘(Performance Dashboard)?
- FB-27-SD-R-007 设计一个面向百万级 DAU 的内容平台的性能优化体系。
质量保障(17 道)
- FB-28-CO-R-001 你如何平衡“快速迭代”和“高质量”?
- FB-28-CO-R-002 前端在 DevOps 中应该承担什么角色?
- FB-28-CO-R-003 前端质量保障中,最容易被忽视但影响巨大的问题是什么?
- FB-28-CP-R-027 如何评估自动化测试的 ROI?有哪些常见反模式?
- FB-28-CP-R-029 如何建立全链路质量度量体系?DORA 指标如何应用?
- FB-28-EN-R-001 设计前端工程化的质量门禁
- FB-28-SC-R-002 如果团队完全没有测试,你会如何推动测试落地?
- FB-28-SC-R-003 设计一个前端质量度量体系
- FB-28-SC-R-004 设计一个前端交付质量保障平台
- FB-28-SD-R-025 如何为一家中型互联网公司设计前端质量保障体系?
- FB-28-SD-R-026 微前端或 Monorepo 场景下如何制定测试策略?
- FB-28-SD-R-028 如何架构大规模 E2E 测试的并行与稳定性?
- FB-28-SD-R-031 如何设计一套生产环境发布策略?
- FB-28-SD-R-032 如何构建韧性工程质量体系?
- FB-28-SD-R-033 设计一个前端质量保障平台,你会包含哪些模块?
- FB-28-SS-R-030 如何设计 Bug 管理与复盘机制?
- FB-28-SS-R-031 如何建立团队的工程质量文化?
数据与状态管理(12 道)
- FB-29-CP-R-029 如何评估和选择状态管理库?请给出决策矩阵
- FB-29-PE-R-032 全局状态管理下如何进行性能优化?
- FB-29-SC-R-027 设计一个高并发的购物车状态管理方案
- FB-29-SC-R-028 如何设计多端状态同步方案(Web、小程序、App)?
- FB-29-SC-R-029 设计一个前端实时协作的状态系统
- FB-29-SD-R-025 如何设计一个前端数据层抽象层,支持多数据源切换和缓存?
- FB-29-SD-R-026 如何为大型 SPA 设计状态管理架构?
- FB-29-SD-R-030 设计一个支持离线优先的协作编辑状态同步系统
- FB-29-SD-R-031 如何设计前端 URL 状态管理方案?
- FB-29-SD-R-032 设计一个前端数据同步与状态管理方案
- FB-29-SD-R-033 设计一个支持 Undo/Redo 的前端状态系统
- FB-29-SD-R-034 设计一个跨页面共享的状态层
可观测性(11 道)
- FB-30-CP-R-027 如何评估并控制可观测性数据的生命周期与成本?
- FB-30-CP-R-030 请给出从“指标异常”到“根因定位”的完整可观测性工作流
- FB-30-EN-R-001 前端可观测工程的落地路径
- FB-30-SC-R-029 如何在大型前端工程中平衡监控覆盖度与性能开销?
- FB-30-SC-R-030 设计前端监控数据平台架构
- FB-30-SD-R-025 设计一个前端 RUM 指标体系与 Dashboard
- FB-30-SD-R-026 如何从零构建前端 SRE 值班(on-call)与事故响应机制?
- FB-30-SD-R-028 设计一个支持多租户、多环境的前端埋点与可观测中台
- FB-30-SD-R-031 设计一个前端灰度发布/回滚的可观测性方案
- FB-30-SD-R-032 设计前端全链路可观测平台
- FB-30-SS-R-032 作为前端架构师,你如何推动团队建立可观测性文化?
安全架构(10 道)
- FB-31-CO-R-001 前端零信任安全架构实践
- FB-31-CP-R-002 如何构建组织级前端安全能力平台?
- FB-31-CP-R-003 安全事件应急响应流程应该如何设计?
- FB-31-CP-R-004 安全架构评审清单与 ADR 应该怎么写?
- FB-31-SD-R-001 如何为大型企业设计前端安全架构?
- FB-31-SD-R-002 微前端场景下如何做好安全隔离?
- FB-31-SD-R-003 前后端安全边界应该如何划分?
- FB-31-SE-R-001 设计一个企业级前端安全体系
- FB-31-SE-R-002 设计前端安全开发生命周期
- FB-31-SS-R-001 如何推动团队提升安全意识?
实时与协同(10 道)
- FB-32-CP-R-001 多端实时状态一致性如何保证?
- FB-32-CP-R-002 实时系统的架构演进路径
- FB-32-SD-R-001 如何设计一个实时协同文档系统?
- FB-32-SD-R-002 如何设计一个实时聊天系统?
- FB-32-SD-R-003 如何设计一个实时视频会议系统?
- FB-32-SD-R-004 实时系统与离线同步如何结合?
- FB-32-SD-R-005 如何设计一个实时协同白板?
- FB-32-SD-R-006 实时系统的监控与降级策略如何设计?
- FB-32-SD-R-007 设计一个实时协作白板
- FB-32-SD-R-008 设计一个实时数据可视化大屏
国际化(8 道)
- FB-33-CP-R-001 国际化度量与监控应该关注哪些指标?
- FB-33-CP-R-002 跨团队国际化治理如何推进?
- FB-33-CP-R-003 合规与本地化法律要求如何影响前端架构?
- FB-33-SD-R-001 如何设计全球化前端架构?
- FB-33-SD-R-002 如何设计一条翻译流水线?
- FB-33-SD-R-003 如何设计国际化组件库?
- FB-33-SD-R-004 多语言内容管理系统(CMS)如何设计?
- FB-33-SD-R-005 设计一个可扩展的国际化架构
可视化与图形(9 道)
- FB-34-CP-R-027 在大型可视化项目中,如何制定可测试、可维护、可协同的工程规范?
- FB-34-CP-R-030 从 0 到 1 落地一个数据可视化产品,如何在业务价值、性能、团队成本、可维护性之间做权衡?
- FB-34-CP-R-031 可视化系统的性能与体验平衡
- FB-34-EN-R-029 大型可视化应用的构建、CI/CD、产物优化与多版本兼容策略如何设计?
- FB-34-SD-R-024 设计一个 BI 可视化平台的前端架构
- FB-34-SD-R-025 设计一个 3D 数字孪生大屏的渲染架构
- FB-34-SD-R-026 如何设计一个可扩展的可视化组件库?
- FB-34-SD-R-028 游戏图形中的场景图、ECS、渲染循环、LOD 对前端可视化架构有何启发?
- FB-34-SD-R-029 设计一个可视化搭建平台
Serverless/Edge(9 道)
- FB-35-CP-R-001 组织级 Serverless 治理如何推进?
- FB-35-CP-R-002 Serverless 成本控制策略有哪些?
- FB-35-CP-R-003 全球化边缘渲染平台如何设计?
- FB-35-SC-R-001 设计一个 Serverless 实时数据处理前端展示
- FB-35-SD-R-001 如何设计一个 Serverless 前端架构?
- FB-35-SD-R-002 如何设计一个 Edge 网关?
- FB-35-SD-R-003 Serverless 与容器/传统服务器如何取舍?
- FB-35-SD-R-004 如何设计边缘与中心协同架构?
- FB-35-SD-R-006 设计一个 Serverless 前端部署架构
前端数据工程(9 道)
- FB-36-CP-R-001 跨团队数据治理如何推进?
- FB-36-CP-R-002 如何评估前端数据工程的 ROI?
- FB-36-SC-R-001 设计一个前端自助分析平台
- FB-36-SD-R-001 如何设计一个前端数据平台?
- FB-36-SD-R-002 如何设计一个埋点与采集系统?
- FB-36-SD-R-003 如何设计一个用户行为分析系统?
- FB-36-SD-R-004 如何设计一个 A/B 实验平台?
- FB-36-SD-R-005 如何设计一个数据质量监控体系?
- FB-36-SD-R-006 如何设计一个实时数据看板?
业务洞察(7 道)
- FB-37-CP-R-003 作为前端架构师,你如何推动“业务需求优先级治理”落地?
- FB-37-CP-R-005 如何建立技术与业务的双向反馈机制,实现技术投入与业务结果的可量化对齐?
- FB-37-CP-R-007 请你从业务视角规划一个前端团队未来一年的技术路线图,并说明如何与业务战略对齐。
- FB-37-SD-R-001 如何设计一个可支撑多业务线(B2B、B2C、SaaS)的前端商业化中台架构?
- FB-37-SD-R-002 设计一套前端埋点与业务指标度量体系,覆盖 GMV、ARPU、LTV、CAC 等核心指标。
- FB-37-SD-R-004 设计一个支持快速试错与灰度发布的增长实验工程平台。
- FB-37-SD-R-006 设计一个面向 SaaS 产品的多租户、可配置、可定价的前端交付架构。
团队领导力(10 道)
- FB-38-CP-R-002 设计一套组织效能度量体系,用于评估前端团队的健康度与产出
- FB-38-CP-R-004 高管要求三个月内人效翻倍,作为前端负责人你如何回应与规划?
- FB-38-CP-R-006 技术骨干晋升管理岗后表现不佳,如何建立管理与专业双通道?
- FB-38-SC-R-003 业务扩张期,如何通过团队结构升级支撑多产品线并行?
- FB-38-SC-R-007 两个子团队各自为政、重复造轮子,如何打破壁垒建立共享平台?
- FB-38-SC-R-008 作为技术 VP / 前端负责人,你如何规划前端团队未来 1-3 年的技术战略?
- FB-38-SD-R-001 为一家 500 人前端组织设计分层技术治理与团队架构
- FB-38-SD-R-005 设计一个面向全球远程团队的技术文化与协作基础设施蓝图
- FB-38-SD-R-006 如何设计一个支撑多业务线、多地域的前端组织架构?
- FB-38-SD-R-007 如何从 0 到 1 搭建一个高绩效前端团队?
技术战略(10 道)
- FB-39-CP-R-002 作为前端架构负责人,你如何在降本增效的大背景下制定技术战略?
- FB-39-CP-R-004 如何制定云原生前端架构演进战略?
- FB-39-CP-R-006 如何通过技术战略形成可持续的竞争壁垒?
- FB-39-CP-R-007 请设计一个跨国/多 BU 前端组织的技术治理与协同战略。
- FB-39-CP-R-008 作为前端技术负责人,你如何决定未来 3 年技术栈演进方向?
- FB-39-SC-R-005 技术战略落地失败时,如何进行复盘与调整?
- FB-39-SC-R-006 全球化产品的前端技术战略应包含哪些关键要素?
- FB-39-SD-R-001 请设计一个 3 年前端技术战略,支撑业务从 0 到 100 的规模化增长。
- FB-39-SD-R-003 如何设计 AI 时代的前端技术战略?
- FB-39-SD-R-004 如何在技术战略层面规划前端与 AI、WebAssembly、边缘计算等新兴技术的结合?
沟通表达(10 道)
- FB-40-CP-R-001 如何制定组织级的技术沟通标准?
- FB-40-CP-R-003 如何在大型组织里建立技术影响力网络?
- FB-40-CP-R-005 如何评估并提升整个工程组织的沟通效能?
- FB-40-CP-R-006 技术宣讲/布道体系如何支撑组织的技术战略落地?
- FB-40-CP-R-007 面对媒体或外部演讲,你如何代表团队/公司传递技术品牌?
- FB-40-SD-R-002 设计一个技术方案评审与决策流程
- FB-40-SD-R-004 设计一套危机沟通预案
- FB-40-SD-R-007 设计一个跨部门重大技术项目的治理与沟通框架
- FB-40-SD-R-008 作为技术负责人,你如何处理与公司其他高管的分歧?
- FB-40-SD-R-009 如何在组织内建立前端团队的“话语权”?
项目管理(8 道)
- FB-41-CP-R-002 作为前端架构师,你如何推动组织级的敏捷转型?
- FB-41-CP-R-004 多项目共用同一前端团队时,如何设计资源池与调度机制?
- FB-41-CP-R-006 如何从项目治理角度防止“前端技术债雪球”越滚越大?
- FB-41-SC-R-005 项目交付后,如何量化前端项目对业务的实际价值?
- FB-41-SD-R-001 如何设计一个支持多业务线的前端项目组合管理(Portfolio)体系?
- FB-41-SD-R-003 设计一个大型前端项目的技术风险管理与灾备方案。
- FB-41-SS-R-007 前端负责人如何培养团队的自组织与持续改进文化?
- FB-41-SS-R-008 作为项目总监,你如何同时管理多个前端项目组合?
招聘(8 道)
- FB-42-CP-R-026 如何从组织战略出发制定年度招聘规划?
- FB-42-CP-R-028 如何设计招聘质量的事后评估与反馈闭环?
- FB-42-CP-R-030 技术 leader 如何从事务型招聘转向人才运营?
- FB-42-CP-R-032 如何在招聘中落地 DEI(多元化、公平与包容)战略?
- FB-42-SD-R-025 如何设计一个企业级招聘中台?
- FB-42-SD-R-027 如何设计全球化/远程团队的人才招聘体系?
- FB-42-SD-R-029 如何设计 AI 辅助招聘系统?需要注意哪些伦理问题?
- FB-42-SS-R-031 如何设计高管/架构师级别的面试评估框架?
技术品牌与布道(7 道)
- FB-43-CP-R-002 从战略层面看,技术品牌如何与业务增长、人才招聘、开源生态形成飞轮?
- FB-43-CP-R-004 全球化背景下,如何运营跨国技术品牌(multi-region tech branding)?
- FB-43-CP-R-006 面对竞对在技术品牌上的强势投入,如何制定差异化技术品牌策略?
- FB-43-CP-R-007 技术品牌建设的长期投入与短期业务压力冲突时,架构师/CTO 如何做出决策?
- FB-43-SC-R-005 如果公司决定 All-in 开源,前端团队应该如何制定 3 年技术品牌路线图?
- FB-43-SD-R-001 设计一个公司级技术品牌中台:整合博客、公众号、开源、社区、内部分享。
- FB-43-SD-R-003 设计一个“技术布道师团队”的编制、目标、考核与资源协作机制。
技术治理与合规(9 道)
- FB-44-CP-R-001 如何从 0 到 1 建立技术债治理长效机制?
- FB-44-CP-R-002 如何在大型前端组织推行架构治理?
- FB-44-CP-R-003 技术治理如何与公司战略、业务目标对齐?
- FB-44-SC-R-001 发生安全合规事件时,前端团队应如何应急响应?
- FB-44-SD-R-001 设计一个企业级前端合规体系。
- FB-44-SD-R-002 如何设计跨团队技术治理组织与运作机制?
- FB-44-SD-R-003 设计一个前端安全合规左移体系。
- FB-44-SD-R-004 如何在一个大型组织中推行统一的前端工程化标准?
- FB-44-SD-R-005 如何设计前端技术治理的度量指标体系?
小程序(7 道)
- FB-45-EN-R-002 小程序团队的工程化建设和 Monorepo 多包管理方案是什么?
- FB-45-SC-R-004 小程序 SEO / 搜索优化和内容索引方案如何设计?
- FB-45-SC-R-005 如何设计小程序的用户留存、分享裂变和运营增长方案?
- FB-45-SD-R-001 如何设计一个跨端小程序框架(如 Taro / UniApp 的思路)?
- FB-45-SD-R-003 如何构建小程序的监控、埋点与灰度发布体系?
- FB-45-SD-R-007 如何设计一个多平台小程序容器架构?
- FB-45-SE-R-006 小程序安全架构应考虑哪些方面?
鸿蒙 ArkTS / HarmonyOS(8 道)
- FB-46-CP-R-029 如何看待鸿蒙生态的发展?作为前端架构师应如何布局?
- FB-46-CP-R-030 设计一个鸿蒙多端协同的阅读应用架构。
- FB-46-PE-R-030 如何为鸿蒙应用建立一套完整的性能工程体系?
- FB-46-SD-R-025 如何设计一个鸿蒙多端协同的阅读应用?
- FB-46-SD-R-026 一个鸿蒙应用从 0 到 1,你会如何做技术选型?
- FB-46-SD-R-027 如何设计鸿蒙卡片与原子化服务的整体架构?
- FB-46-SD-R-028 将现有跨平台应用迁移到鸿蒙,你会如何制定策略?
- FB-46-SD-R-031 设计一个面向企业内部的鸿蒙办公协同平台架构。
Flutter(13 道)
- FB-47-EN-R-005 Flutter 项目的工程化与 CI/CD 应该如何设计?
- FB-47-PE-R-002 Flutter 应用包体积优化有哪些系统性的做法?
- FB-47-SC-R-004 Flutter Web 和桌面端(Windows/macOS/Linux)支持有哪些关键考虑?
- FB-47-SC-R-005 Flutter 大型项目如何组织代码架构?
- FB-47-SC-R-006 Flutter 跨平台开发中如何处理平台差异?
- FB-47-SC-R-007 Flutter 项目中如何做状态管理选型?
- FB-47-SC-R-008 Flutter 应用的测试策略如何设计?
- FB-47-SD-R-001 如何设计一个可维护、可扩展的 Flutter 大型应用架构?
- FB-47-SD-R-003 Flutter 国际化(i18n)和无障碍(a11y)应该如何架构?
- FB-47-SD-R-006 Flutter 大规模应用中,状态管理应该如何分层与治理?
- FB-47-SD-R-007 如何开发一个 Flutter 插件?Federated Plugin 和 PlatformView 分别解决什么问题?
- FB-47-SD-R-008 Flutter 混合开发(与原生项目集成)有哪些方案?
- FB-47-SD-R-009 Flutter Web 的性能优化和适配有哪些要点?
Electron(10 道)
- FB-48-CP-R-004 electron-builder 与 electron-forge 如何选型?
- FB-48-EN-R-006 如何设计 Electron 的 CI/CD、签名、公证与自动发布流水线?
- FB-48-SC-R-005 如何设计多窗口/多标签 Electron 应用的状态共享方案?
- FB-48-SD-R-001 如何设计一个大型 Electron 桌面应用的整体架构?
- FB-48-SD-R-002 如何设计一个安全的 Electron 应用架构?
- FB-48-SD-R-003 如何设计 Electron 的自动更新与灰度分发策略?
- FB-48-SS-R-007 作为技术负责人,你如何推动 Electron 项目落地与团队治理?
- FB-48-SS-R-008 Electron 与 Tauri 相比各有什么优缺点?
- FB-48-SS-R-009 Electron 应用的未来演进方向有哪些?
- FB-48-SS-R-010 设计一个 Electron 跨平台 IDE 的核心架构。
WebAssembly(9 道)
- FB-49-CP-R-007 WebAssembly 在前端架构中的取舍:什么时候该用,什么时候不该用?
- FB-49-SC-R-001 如何设计一个前端图像处理系统,引入 WebAssembly 进行计算加速?
- FB-49-SC-R-002 设计一个浏览器端视频编解码方案,WebAssembly 扮演什么角色?
- FB-49-SC-R-003 如何在大型前端项目中组织 WASM 模块的构建、加载与版本管理?
- FB-49-SC-R-004 WebAssembly 在游戏引擎/WebGL 渲染管线中如何落地?
- FB-49-SC-R-005 AI/ML 模型前端推理方案中,WASM 与 WebGPU/WebGL 如何协作?
- FB-49-SC-R-006 设计一个基于 WebAssembly 的浏览器端图片编辑器架构。
- FB-49-SC-R-007 WebAssembly 未来可能如何改变前端开发?
- FB-49-SD-R-006 设计一个跨语言的“WASM 插件平台”,支持前端动态加载第三方扩展
WebGPU / 图形学(13 道)
- FB-50-CP-R-026 在新建一个 3D 项目时,如何选择 WebGPU、WebGL、Three.js、Babylon.js 或自研引擎?
- FB-50-CP-R-029 你怎么看 WebGPU 未来的发展趋势和主要挑战?
- FB-50-CP-R-030 WebGPU 与 Three.js、Babylon.js 等引擎的关系是什么?
- FB-50-CP-R-031 设计一个基于 WebGPU 的浏览器端粒子系统。
- FB-50-CP-R-032 WebGPU 在 AI/机器学习推理中的应用有哪些?
- FB-50-CP-R-033 WebGPU 的安全性设计有哪些特点?
- FB-50-PE-R-027 如何对 WebGPU 应用进行 GPU 性能剖析与瓶颈定位?
- FB-50-SC-R-025 如何优化一个包含百万级对象的大型 3D 场景?
- FB-50-SC-R-030 如何为一个跨平台 3D 可视化产品选择 WebGPU 与 Native 图形方案?
- FB-50-SC-R-031 设计一个基于 WebGPU 的浏览器端 3D 数据可视化引擎。
- FB-50-SC-R-032 WebGPU 的未来发展趋势是什么?
- FB-50-SD-R-024 如何设计一个基于 WebGPU 的轻量级渲染引擎?
- FB-50-SD-R-028 如何设计 Three.js 与自研 WebGPU 引擎的集成架构?
多媒体(Multimedia)(7 道)
- FB-51-CP-R-031 多媒体前端技术未来 3-5 年的演进趋势是什么?
- FB-51-SC-R-028 如何实现跨浏览器的统一媒体录制方案?
- FB-51-SD-R-025 设计一个支持 HLS/DASH/WebRTC 的多协议播放器架构
- FB-51-SD-R-026 设计一个低延迟直播系统的前端方案
- FB-51-SD-R-027 设计一个浏览器端音视频剪辑工具的技术架构
- FB-51-SD-R-029 设计一个支持 DRM 的商业视频播放器安全架构
- FB-51-SD-R-030 如何评估和监控一个多媒体前端平台的质量?
低代码(11 道)
- FB-52-CP-R-006 企业应该自研低代码平台还是采购商业化产品?
- FB-52-SC-R-001 低代码平台与 ProCode 开发的边界在哪里?
- FB-52-SC-R-002 设计一个可扩展的低代码组件库体系。
- FB-52-SC-R-003 低代码平台的常见陷阱有哪些?如何避免?
- FB-52-SD-R-001 如何设计一个企业级低代码平台的整体架构?
- FB-52-SD-R-002 低代码平台如何与企业现有业务系统集成?
- FB-52-SD-R-003 如何建立低代码平台的平台化治理体系?
- FB-52-SD-R-005 如何设计 AI 辅助搭建能力?
- FB-52-SD-R-007 如何设计低代码平台的扩展性与插件化架构?
- FB-52-SE-R-008 如何设计低代码平台的安全架构?
- FB-52-SS-R-004 作为架构师,你如何推动业务团队使用低代码平台?
计算机基础(14 道)
- FB-53-CP-R-001 技术选型中如何权衡算法与数据结构?
- FB-53-CP-R-002 如何评估一个系统的可扩展性?
- FB-53-CP-R-003 前端如何实现 LRU Cache?
- FB-53-CP-R-004 什么是虚拟 DOM?它的优缺点是什么?
- FB-53-CP-R-005 前端如何实现大文件分片上传?
- FB-53-CP-R-006 如何设计一个前端路由系统?
- FB-53-CP-R-007 如何实现一个 Promise.all?
- FB-53-SD-R-001 如何设计一个短链服务?
- FB-53-SD-R-002 从系统架构角度如何设计一个秒杀系统?
- FB-53-SD-R-003 如何设计一个实时排行榜?
- FB-53-SD-R-004 高并发下的限流与降级策略如何设计?
- FB-53-SD-R-005 分布式一致性基础有哪些?
- FB-53-SD-R-007 设计一个前端缓存策略系统。
- FB-53-SD-R-008 前端如何实现一个简单的前端框架(类 React/Vue)?
行为面试(7 道)
- FB-54-SS-R-001 如何从 0 到 1 搭建一个前端体系?
- FB-54-SS-R-002 如何做技术决策与业务目标的权衡?
- FB-54-SS-R-003 如何处理组织级技术债务?
- FB-54-SS-R-004 如何处理跨团队冲突升级?
- FB-54-SS-R-005 描述一次你处理线上危机或重大事故的经历
- FB-54-SS-R-006 如何构建技术影响力与个人品牌?
- FB-54-SS-R-007 你的薪资期望是多少?
简历与面试技巧(7 道)
- FB-55-CP-R-024 作为前端架构师,你如何在面试中展示自己的技术判断力?
- FB-55-CP-R-025 如何在面试中讲述一次失败的架构决策?
- FB-55-CP-R-026 面试中如何讲述自己对团队或组织的长期价值?
- FB-55-CP-R-027 人脉与内推在面试求职中如何发挥作用?
- FB-55-CP-R-028 如何判断一个 Offer 是否值得接?
- FB-55-CP-R-029 薪资谈判中,如何处理“给不了你期望”的情况?
- FB-55-CP-R-030 架构师面试中,如何展示自己的领导力?