MasteringFE
Home
Skill Map
Plan 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
技术选型方法论
Foundation
版本控制与 Git
分支策略、交互式变基、提交规范、Git Hooks 与 Code Review 实践。团队协作的工程基础设施。
Topics
Git 基础操作
理解 Git 三层架构与对象模型,掌握日常操作背后的机制,建立版本控制的工程直觉。