技术点

使用方式建议：

• 阅读时逐条勾选 - [ ] → - [x]
• 若“能讲清原理 + 能落地实践 + 能回答追问”，再勾选该条

React 16+ 各版本区别 & React 核心原理

• 版本演进主线（必须能说清差异与收益）
  • React 16：Fiber 架构引入、Error Boundaries、Portal、Fragment
  • React 16.8：Hooks（状态/副作用/逻辑复用方式改变）
  • React 17：升级过渡（无破坏性为主）、事件委托从 document 下移（微前端更友好）
  • React 18：createRoot、Automatic Batching、并发渲染（可中断/可恢复）、startTransition、Suspense 更完善
• 渲染机制（要能讲清一次更新的链路）
  • render phase vs commit phase：可中断/可重做 vs 不可中断
  • Scheduler 调度：优先级、时间切片、让出主线程的意义
  • 更新入队与优先级：lane（18 重点，至少理解“不同更新优先级不同”）
• Diff 核心规则（要能讲清 key 的真实价值）
  • 同层比较、类型不同直接替换、列表 diff 基本思路
  • key 的稳定性：为什么不能用 index（状态错位/复用错误）
• Hooks 原理与常见坑（必须掌握）
  • Hooks 依赖“调用顺序一致”的原因（链表/索引）
  • 闭包陷阱与依赖数组：何时需要 useCallback/useMemo
  • StrictMode 下 effect 重复执行的目的与应对
• 工程落地（能说清取舍与边界）
  • 性能：memo 化边界、虚拟列表、拆分渲染、并发下使用 transition 的适用场景
  • 可靠性：Error Boundary 的使用边界（无法捕获哪些错误）
  • 调试：React Profiler 定位重渲染的套路（谁在 render、为什么、如何修）

Webpack 架构 & 与 Rollup、Vite 对比 & 核心原理

• Webpack 总体架构（必须掌握）
  • Entry → Module Graph → Chunk Graph → Runtime → Emit 的构建链路
  • Loader vs Plugin：职责边界与典型使用场景
  • HMR：热更新边界（状态保持、回退策略）
• 核心原理（能讲清“为什么这样设计”）
  • 依赖分析：如何解析 import/require 形成模块图
  • Code Splitting：动态 import 如何拆包、runtime 如何加载 chunk
  • Tree-shaking 条件：ESM 静态结构、sideEffects、为什么 CJS 难
  • 缓存与长期缓存：contenthash、runtime/manifest、filesystem cache
• 与 Rollup 对比（库 vs 应用）
  • Rollup：库打包更强、输出更干净、tree-shaking 更激进的原因
  • Webpack：工程能力更全面（多资源类型、复杂应用场景）
• 与 Vite 对比（开发态 vs 生产态）
  • Vite dev：原生 ESM + 依赖预构建（esbuild）实现秒启
  • Vite build：多用 Rollup，生产分包/共享依赖的策略如何选
• 自测题（建议你写成可复用的答题模板）
  • 你能解释“为什么拆 runtime/commons 能提升缓存命中”吗？
  • 你能设计一个 chunk 划分方案并说明取舍吗？

性能优化流程 & 从浏览器请求链路解释“为什么这么优化”

• 方法论（先量化后优化）
  • 指标体系：FCP/LCP/INP/CLS/TTFB 的含义与典型场景
  • 定位套路：网络 → 解析/编译 → 渲染 → JS 执行 → 框架渲染
  • 对照实验：基线、对比、回归（避免“优化错方向”）
• 从请求链路讲清楚（高频面试点）
  • DNS/TCP/TLS/TTFB：CDN、keep-alive、HTTP/2/3 对性能的影响
  • 缓存：强缓存/协商缓存、cache-control、etag、静态资源 hash
  • 资源优先级：preload/prefetch、关键 CSS、字体加载策略
  • 压缩与传输：gzip/brotli、图片格式（webp/avif）与压缩策略
• 工程落地清单
  • 构建：拆包、按路由/组件懒加载、产物体积分析、sourcemap 策略
  • 运行时：减少长任务、Web Worker、虚拟列表、事件节流与批处理
  • 监控：性能埋点、异常聚合、告警阈值、灰度与回滚策略
• 自测题
  • 给你 Performance 面板：你能定位长任务并验证修复效果吗？
  • 你能解释“TTFB 不变但 LCP 变差”的可能原因吗？

微前端对比 & 各方案实现原理

• 目标与边界（必须掌握）
  • 独立开发/部署、渐进迁移、技术栈隔离、统一基座治理
  • 典型治理项：路由、权限、埋点、错误隔离、资源加载、版本灰度
• 方案对比（至少掌握 2~3 个）
  • qiankun / single-spa：基于生命周期 + 路由切换的核心思路
  • iframe：隔离强但性能/体验/通信成本的取舍
  • Module Federation：运行时加载远程模块、依赖共享（适合组件/模块共享）
• 实现原理（要能讲清关键机制）
  • JS 沙箱：Proxy/快照/作用域隔离，如何防止全局污染
  • CSS 隔离：scoped、shadow dom、运行时前缀化的优缺点
  • 通信：事件总线、postMessage、共享状态（以及权限/版本治理）
  • 资源加载：HTML entry/脚本注入/预加载策略与性能取舍
• 自测题
  • React 17 事件委托变化为什么更利于微前端共存？
  • 子应用崩溃如何做到降级、隔离、不影响主应用？

低代码 & 核心原理

• 核心分层（必须掌握）
  • Schema/DSL：组件树、布局、属性、数据源、事件、动作（Action）
  • 渲染器：Schema → 运行时组件渲染（可插拔组件库）
  • 编辑器：拖拽/选中/对齐/画布缩放/撤销重做/多选
  • 运行时：表达式、条件渲染、动态绑定、权限与灰度
• 原理点（面试常问）
  • DSL 如何演进：版本兼容、迁移策略、变更影响面
  • 数据流：依赖图/计算属性、避免循环依赖、性能优化
  • 扩展机制：自定义组件/动作/面板扩展与协议设计
  • 安全：表达式执行沙箱、白名单能力、资源限制
• 自测题
  • 你能抽象一个“CRUD 表单 + 列表 + 弹窗”的最小 Schema 吗？
  • 新加一个自定义组件：编辑态与运行态分别要做什么？

热插拔插件系统对比 & 各方案实现原理差异

• 插件系统四件套（必须掌握）
  • 生命周期：register/activate/deactivate/dispose
  • 扩展点：菜单、路由、命令、UI Slot、数据源、Hook
  • 依赖与版本：依赖声明、冲突检测、semver、灰度与回滚
  • 隔离与安全：权限、沙箱、资源限制、错误边界
• 横向对比维度（答题口径统一）
  • 加载形态：编译期（静态）vs 运行时（动态）vs 远程模块
  • 隔离能力：同进程（快）vs iframe/worker（隔离强）
  • API 设计：面向能力（命令/服务）vs 面向组件（slot/容器）
  • 可观测性：错误、耗时、资源占用、降级策略、审计
• 自测题
  • 设计“菜单 + 路由 + 页面卡片”插件：你能定义扩展点契约吗？
  • 插件升级导致崩溃：如何快速回滚并保证兼容？

从 NestJS 全栈开发到 SSR & SSR 核心原理

• SSR 链路（必须掌握）
  • 请求进来 → 路由匹配 → 数据预取 → renderToString/stream → 返回 HTML → hydrate 接管
  • BFF 思维：接口聚合、减少瀑布流、契合页面数据形态
• 关键原理（要能讲清“为何会快/为何会慢”）
  • Hydration：一致性要求，为什么 mismatch 会出问题
  • Streaming SSR：边生成边输出，与 Suspense 的关系与收益
  • 缓存：页面缓存/片段缓存/CDN/边缘渲染，如何设计失效策略
• 常见坑
  • Node 与浏览器环境差异（window/document）、副作用处理
  • 双端数据一致性：时区、随机数、时间戳导致 mismatch
  • SSR 不等于“绝对更快”：TTFB 与 hydration 成本如何平衡
• 自测题
  • 你能解释“SSR 改善首屏但可能拖慢交互就绪”的原因吗？
  • 你能设计 SSR 的缓存分层与回源策略吗？

从 Vue2 到 Vue3 & 核心原理

• 变化主线（必须掌握）
  • 响应式：Vue2 defineProperty → Vue3 Proxy（能力与性能差异）
  • 编译优化：patch flag、静态提升、tree-shaking（为什么更快更小）
  • 组合式 API：逻辑复用方式与工程收益（对比 mixin）
• 原理点（能讲清响应式基本模型）
  • 依赖收集与触发更新：effect/track/trigger 的核心思路
  • patch 算法：编译标记如何减少运行时 diff 成本
• 自测题
  • 为什么 Proxy 让“新增属性也可响应”？
  • 组合式 API 相比 mixin 的收益与坑分别是什么？

代码规范 & Umi/ESLint 规范为什么这样设计 & 如何落地

• 规范的目标（必须掌握）
  • 一致性：减少风格争议，提升协作效率
  • 可维护性：限制高风险写法，降低 bug 密度
  • 工程化：把质量门禁前置到工具链与 CI
• 规则背后的“为什么”（能讲清工程风险）
  • ESLint：防 bug（未使用变量、Promise 误用、隐式 any 等）
  • Prettier：只管格式，降低团队摩擦
  • Umi 约定：目录/路由/工程约束带来的协作收益与边界
• 落地方案（建议写成团队规范 SOP）
  • 本地：editorconfig + prettier + eslint（必要时加 stylelint）
  • 提交：lint-staged + husky（只检查增量，保证体验）
  • CI：全量 lint + typecheck + 单测；失败即阻断
  • 例外机制：禁用规则的规范、技术债登记、规则分级（error/warn）
• 自测题
  • 你能把“为什么要禁用某些 any/未处理 Promise”讲成可量化风险吗？
  • 老项目迁移新规范：你能设计渐进策略避免一次性爆炸吗？