MasteringFE
HomeSkill MapPlan A

Overview

  • Skill Map
  • Plan A

第一编:准备方法与认知重建

  • 为什么社招面试让人产生"什么都没准备好"的错觉
  • 高级前端面试到底在筛什么
  • 校招式与社招式准备的本质差异
  • 什么叫知识骨架,什么叫零散记忆
  • 为什么材料越多准备反而越失控
  • 如何根据 JD 建立有优先级的准备系统
  • 如何面对项目经验不少但语言本体不稳的局面
  • 三轮技术面试通常分别在看什么
  • 急招流程与标准流程各自意味着什么
  • 如何建立自己的复盘机制与错题系统

第二编:JavaScript 语言本体

  • JavaScript 执行上下文与调用栈
  • 作用域链与闭包机制
  • `this` 绑定规则与四种场景
  • 原型链与 class 语法糖
  • Promise 与异步抽象演化

第三编:异步系统与事件循环

  • 事件循环与 JavaScript 执行模型
  • 宏任务与微任务的区别
  • Promise 与微任务队列
  • async/await 执行模型
  • Node.js 的事件循环
  • 浏览器渲染流水线与事件循环
  • 常见的异步模式与陷阱
  • 并发与并行的区别
  • Web Worker 与事件循环
  • 实际项目中的异步问题排查

第四编:浏览器、网络与渲染

  • 浏览器架构与渲染流水线
  • HTTP 协议与网络请求
  • DNS 解析与缓存
  • CDN 与边缘计算
  • 浏览器缓存机制
  • 强缓存与协商缓存
  • Service Worker 与离线存储
  • Prefetch 与 Preload
  • 性能指标与 Core Web Vitals

第五编:React 核心体系

  • React 解决的根本问题是什么
  • JSX 与 ReactElement 的本质
  • 函数组件为何成为主流
  • useState 与 useEffect 深度掌握
  • Hooks 的闭包陷阱
  • React 状态更新与批处理机制
  • Fiber 架构与可中断渲染
  • React 的调和算法与 Diff 策略
  • Context 与状态管理边界
  • 性能优化最佳实践
  • React 并发特性与 Suspense
  • 从源码理解 React 渲染流程

第六编:前端工程化与大型项目设计

  • 前端工程化概述
  • 构建工具详解
  • 模块化与组件化架构
  • CI/CD 与自动化部署
  • TypeScript 与类型系统
  • Webpack 高级配置
  • 测试策略与实践
  • 性能监控与优化
  • 大型项目架构设计
  • 前端安全
  • 容器化与 DevOps
  • 前端可访问性

第七编:Electron 与桌面端能力

  • Electron 核心概念与架构
  • 主进程与渲染进程通信
  • 桌面应用窗口管理
  • 系统托盘与菜单
  • 文件系统操作
  • 网络请求与数据存储
  • 系统通知与剪贴板
  • 自动更新
  • 打包与分发
  • 调试与性能优化
  • 安全最佳实践

第八编:项目表达与场景化作答

  • 为什么项目介绍经常失败
  • 如何讲一个从零到一的项目
  • 如何讲偏工程化建设的项目

第九编:冲刺、训练与实战

  • 如何做 30 天冲刺计划

Foundation

  • CSS
    • 盒模型与布局基础
    • CSS 动画与过渡
    • CSS Aspect Ratio
    • CSS 背景与边框
    • CSS 优先级与层叠机制
    • CSS 容器查询
    • CSS 自定义属性(CSS 变量)
    • CSS 显示类型与文档流
    • CSS Houdini 与 CSS-Typed-OM
    • CSS 滤镜与混合模式
    • CSS Font Feature Settings
    • CSS 数学函数
    • CSS Image Rendering
    • CSS 逻辑属性
    • CSS Motion 与动画原则
    • CSS 溢出与裁剪机制
    • CSS 定位与层叠上下文
    • CSS 伪类与伪元素
    • CSS Reset 与 Normalize
    • CSS 滚动驱动动画
    • CSS 滚动吸附
    • CSS 滚动条与滚动行为
    • CSS 选择器与优先级
    • CSS 形状与几何
    • CSS Subgrid
    • CSS 2D/3D 变换
    • CSS 排版与字体
    • CSS View Transitions
    • CSS 层叠与 z-index 机制
    • Flexbox 布局
    • Grid 布局
  • HTML 与 Web 平台
    • 无障碍基础
    • DOM API 与事件系统
    • HTML 可访问性与 ARIA
    • BroadcastChannel API
    • Canvas 2D API
    • 剪贴板与通知 API
    • Custom Elements 自定义元素
    • 数据属性与语义化 HTML
    • Device Orientation 事件
    • HTML 文档结构与渲染基础
    • 拖放 API 与 Pointer Events
    • HTML 编码与实体
    • File API 与文件操作
    • HTML 表单
    • HTML 表单深度理解
    • 地理位置 API
    • HTML head 元素详解
    • History API 与 SPA 路由
    • iframe 安全与沙箱
    • Intersection Observer API
    • Link 预加载与性能优化
    • MathML 数学标记
    • HTML 媒体元素
    • 消息通道与广播通信
    • Mutation Observer API
    • Network Information API
    • Notification API
    • Object 与 Embed 元素
    • Page Visibility API
    • Payment Request API
    • HTML 性能优化
    • Permissions API
    • Pointer Lock API
    • Resize Observer API
    • 脚本加载机制
    • HTML 语义元素深入理解
    • HTML SEO 基础
    • Server-Sent Events
    • Service Worker API
    • SharedWorker
    • Slot 内容分发
    • 浏览器存储 API
    • 内联 SVG
    • HTML 表格进阶
    • Template 与 Shadow DOM
    • 页面可见性与设备状态 API
    • Web Components
    • WebSocket
    • Web Workers API
    • 语义化 HTML
  • JavaScript
    • 异步编程(Promise / async-await)
    • ES6+ 语言特性
    • JavaScript 数组方法
    • JavaScript 异步生成器
    • JavaScript 原子操作
    • JavaScript BigInt
    • JavaScript BOM 与 DOM
    • JavaScript class 与面向对象
    • JavaScript ArrayBuffer 与 DataView
    • JavaScript 日期时间
    • JavaScript 装饰器
    • JavaScript 错误处理
    • 事件循环(Event Loop)
    • JavaScript 执行上下文
    • JavaScript 语言基础
    • JavaScript 全局 this
    • JavaScript 导入断言
    • JavaScript 国际化 API
    • JavaScript 迭代器与生成器
    • JavaScript JSON 序列化
    • JavaScript Map Set WeakMap WeakSet
    • JavaScript 内存模型
    • JavaScript 模块系统
    • JavaScript 数字类型
    • JavaScript Promise 静态方法
    • JavaScript Proxy 与 Reflect
    • JavaScript 队列与微任务
    • JavaScript 正则表达式
    • JavaScript 严格模式
    • JavaScript 字符串与编码
    • JavaScript Symbol 与知名符号
    • JavaScript 顶层 await
    • JavaScript Web API
    • 原型链与继承
    • 作用域与闭包
    • this 绑定规则
  • 版本控制与 Git
    • Git 基础操作

Core

  • 浏览器与网络
    • 浏览器存储
    • 同源策略与 CORS
    • HTTP 与缓存
    • 实时通信与传输选择
    • 浏览器渲染流水线
  • 工程化与构建工具
    • Source Maps
    • Vite 与 Webpack 深度对比
    • Webpack 深度解析
  • Next.js 与元框架
    • Next.js App Router:文件约定与路由架构
    • Next.js 缓存体系:多层缓存的深度解析
    • Next.js 渲染策略:SSG、SSR、ISR、CSR 的全景图
    • Next.js Server Actions:服务端逻辑的直接表达
  • React 核心
    • JSX 与 Virtual DOM
    • React 组件设计模式
    • React 组合模式
    • React 条件渲染
    • React Context 深入理解
    • React 受控组件与非受控组件
    • React useDeferredValue
    • React DevTools Profiler
    • React 错误边界
    • React 事件系统
    • React 表单处理
    • React Hooks 深度掌握
    • React 生命周期
    • React List Keys
    • React 性能优化:memo 与 PureComponent
    • React New Features 17-18
    • React 性能优化技术
    • React 性能反模式
    • React Portal 与 Dialog
    • React Portals and Fragments
    • React 协调与 Fiber 架构
    • React useReducer 高级模式
    • React Refs
    • React Router 与路由设计
    • React 服务端组件
    • React 状态管理
    • React Suspense 与并发特性
    • React useId
    • React useInsertionEffect
    • React useLayoutEffect
    • React useSyncExternalStore
    • React useTransition
  • React 生态
    • React 动画与 Framer Motion
    • Redux Toolkit
    • React Styling
    • React Testing Library
  • TypeScript
    • 高级类型编程
    • TypeScript 基础类型系统
    • tsconfig 深度配置
    • 声明文件与 .d.ts
    • 泛型
    • 大型项目 TS 架构模式
    • 运行时校验(Zod / Valibot)
    • 类型收窄与类型守卫
    • 内置工具类型
    • TypeScript × React 实战
  • Vue 生态
    • Pinia 状态管理:Vue 生态的官方推荐
    • Vue 3 Composition API:逻辑组织的新范式

Advanced

  • Node.js 与跨平台
    • AI × 前端
    • AI 辅助开发工具
    • BFF 架构模式
    • 数据库基础(Prisma/Drizzle)
    • Deno/Bun 新运行时
    • Edge Computing
    • 桌面应用(Electron/Tauri)
    • Node.js 基础
    • Stream 与文件处理
    • Node.js 内部原理
    • Progressive Web Apps
    • React Native
    • Serverless 函数
    • WebAssembly
  • 性能优化
  • 前端安全
    • 认证实现
    • 认证方案设计
    • Content Security Policy
    • CSRF 防护
    • 依赖安全与供应链攻击
    • HTTPS 与 TLS 基础
    • OWASP 前端安全
    • 敏感数据处理
    • XSS 攻击与防御
  • 测试与质量保障
    • 组件测试(Testing Library)
    • E2E 测试(Playwright)
    • 测试策略与测试金字塔
    • 单元测试(Vitest)
  • Web 生态与高级能力
    • 动画工程
    • Canvas 与 SVG
    • CRDT 与冲突解决
    • 数据可视化
    • 实时协作系统
    • 音视频处理
    • Web Audio API
    • Web Workers 与并行计算
    • WebGL 与 Three.js
    • WebRTC

Senior

  • 架构设计与工程领导力
    • 无障碍体系化建设
    • API 层设计
    • 组件架构设计
    • 设计系统建设
    • 错误边界与容错架构
    • 国际化方案
    • 线上故障应急
    • 遗留系统迁移
    • 技术辅导与团队成长
    • 微前端
    • 大型重构策略
    • RFC 与技术方案写作
    • 状态架构设计
    • 技术决策与 ADR
    • 技术选型方法论

Overview

  • Skill Map
  • Plan A

第一编:准备方法与认知重建

  • 为什么社招面试让人产生"什么都没准备好"的错觉
  • 高级前端面试到底在筛什么
  • 校招式与社招式准备的本质差异
  • 什么叫知识骨架,什么叫零散记忆
  • 为什么材料越多准备反而越失控
  • 如何根据 JD 建立有优先级的准备系统
  • 如何面对项目经验不少但语言本体不稳的局面
  • 三轮技术面试通常分别在看什么
  • 急招流程与标准流程各自意味着什么
  • 如何建立自己的复盘机制与错题系统

第二编:JavaScript 语言本体

  • JavaScript 执行上下文与调用栈
  • 作用域链与闭包机制
  • `this` 绑定规则与四种场景
  • 原型链与 class 语法糖
  • Promise 与异步抽象演化

第三编:异步系统与事件循环

  • 事件循环与 JavaScript 执行模型
  • 宏任务与微任务的区别
  • Promise 与微任务队列
  • async/await 执行模型
  • Node.js 的事件循环
  • 浏览器渲染流水线与事件循环
  • 常见的异步模式与陷阱
  • 并发与并行的区别
  • Web Worker 与事件循环
  • 实际项目中的异步问题排查

第四编:浏览器、网络与渲染

  • 浏览器架构与渲染流水线
  • HTTP 协议与网络请求
  • DNS 解析与缓存
  • CDN 与边缘计算
  • 浏览器缓存机制
  • 强缓存与协商缓存
  • Service Worker 与离线存储
  • Prefetch 与 Preload
  • 性能指标与 Core Web Vitals

第五编:React 核心体系

  • React 解决的根本问题是什么
  • JSX 与 ReactElement 的本质
  • 函数组件为何成为主流
  • useState 与 useEffect 深度掌握
  • Hooks 的闭包陷阱
  • React 状态更新与批处理机制
  • Fiber 架构与可中断渲染
  • React 的调和算法与 Diff 策略
  • Context 与状态管理边界
  • 性能优化最佳实践
  • React 并发特性与 Suspense
  • 从源码理解 React 渲染流程

第六编:前端工程化与大型项目设计

  • 前端工程化概述
  • 构建工具详解
  • 模块化与组件化架构
  • CI/CD 与自动化部署
  • TypeScript 与类型系统
  • Webpack 高级配置
  • 测试策略与实践
  • 性能监控与优化
  • 大型项目架构设计
  • 前端安全
  • 容器化与 DevOps
  • 前端可访问性

第七编:Electron 与桌面端能力

  • Electron 核心概念与架构
  • 主进程与渲染进程通信
  • 桌面应用窗口管理
  • 系统托盘与菜单
  • 文件系统操作
  • 网络请求与数据存储
  • 系统通知与剪贴板
  • 自动更新
  • 打包与分发
  • 调试与性能优化
  • 安全最佳实践

第八编:项目表达与场景化作答

  • 为什么项目介绍经常失败
  • 如何讲一个从零到一的项目
  • 如何讲偏工程化建设的项目

第九编:冲刺、训练与实战

  • 如何做 30 天冲刺计划

Foundation

  • CSS
  • HTML 与 Web 平台
  • JavaScript
  • 版本控制与 Git

Core

  • 浏览器与网络
  • 工程化与构建工具
  • Next.js 与元框架
  • React 核心
  • React 生态
  • TypeScript
  • Vue 生态

Advanced

  • Node.js 与跨平台
  • 性能优化
  • 前端安全
  • 测试与质量保障
    • 组件测试(Testing Library)
    • E2E 测试(Playwright)
    • 测试策略与测试金字塔
    • 单元测试(Vitest)
  • Web 生态与高级能力

Senior

  • 架构设计与工程领导力
Advanced

测试与质量保障

测试策略、单元/组件/E2E 测试、Mock 方案、DevTools 调试、错误监控与日志体系。构建从开发到生产的完整质量防线。

Topics

组件测试(Testing Library)

掌握 Testing Library 的核心理念与 API,学会以用户视角编写组件测试。涵盖查询优先级、用户事件模拟、异步组件测试、Context/Router 集成、MSW 网络 Mock 等完整实践。

E2E 测试(Playwright)

系统掌握 Playwright E2E 测试框架的核心架构、API 设计与工程实践。涵盖 Locator 策略、Auto-waiting 机制、Network Interception、Page Object Model、CI 集成与 Trace 调试。

测试策略与测试金字塔

深入理解测试分层模型(Testing Pyramid / Testing Trophy)的原理与工程实践,掌握 TDD/BDD 方法论、测试策略设计、ROI 分析,建立从单元到 E2E 的完整质量保障体系。

单元测试(Vitest)

系统掌握 Vitest 单元测试框架的核心 API、配置策略与工程实践。涵盖测试编写范式、Mock 机制、异步测试、快照测试、Coverage 集成,以及从 Jest 迁移的完整路径。

Mastering Greater Frontend — OpenSpec-driven