Mastering Greater Frontend
Frontend Engineer Skill Map — 2026 Edition
Skill Map
架构设计与工程领导力
组件与状态架构、微前端、设计系统、API 层设计、国际化、技术选型、重构策略、RFC 写作、技术决策记录、故障应急、技术辅导。
浏览器与网络
HTTP 协议、浏览器渲染流水线、存储机制、缓存策略、跨域机制。连接前端代码与底层平台能力的关键知识层。
CSS
从盒模型到 Grid 布局，从响应式设计到容器查询，从 CSS 变量到原生嵌套。CSS 在 2024-2026 经历了一次能力跃迁。
工程化与构建工具
包管理、构建工具链、代码规范、Monorepo、CI/CD、容器化、设计系统工程化。从源码到交付物的完整工程管线。
HTML 与 Web 平台
语义化标记、DOM API、无障碍、Web Components 和现代平台能力。HTML 不只是标签，它定义了内容的结构和意义。
JavaScript
作用域与闭包、异步模型、模块系统、元编程、函数式模式。理解语言运行时机制，才能在复杂项目中精确定位问题。
Next.js 与元框架
App Router、渲染策略、Server Actions、缓存架构、中间件。全栈 React 的标准实现框架。
Node.js 与跨平台
Node.js 基础、Serverless、Edge Computing、数据库操作、PWA、React Native、桌面应用、WebAssembly、AI 集成。前端工程师的能力边界扩展。
性能优化
Core Web Vitals、Lighthouse 审计、包体积分析、图片与字体优化、渲染性能、React 性能、虚拟化、性能预算。
React 核心
React 函数组件核心 API 全图谱：Hooks 体系、JSX/Virtual DOM、组件模式、Refs、Context、性能优化、并发特性、错误边界。覆盖 React 面试高频 API 的完整深度解析。
React 生态
React 生态进阶主题：Server Components、服务端渲染、Suspense、Concurrent Mode、Redux Toolkit、TanStack Query、React Testing Library、Framer Motion 等高级库和框架级解决方案。
前端安全
XSS/CSRF/CSP 防御、认证方案设计与实现、HTTPS、依赖安全、OWASP 前端安全模型。
测试与质量保障
测试策略、单元/组件/E2E 测试、Mock 方案、DevTools 调试、错误监控与日志体系。构建从开发到生产的完整质量防线。
TypeScript
从基础类型标注到泛型设计，从类型收窄到条件类型，从声明文件到运行时校验。2026 年的前端项目，TypeScript 是默认选项。
版本控制与 Git
分支策略、交互式变基、提交规范、Git Hooks 与 Code Review 实践。团队协作的工程基础设施。
Vue 生态
Vue 3 核心、Composition API、响应式原理、Pinia 状态管理、Vue Router。深入理解 Vue 的设计选择和工程实践。
Web 生态与高级能力
Canvas/WebGL 可视化、WebRTC 实时通信、CRDT 协同编辑、动画工程、音视频处理、Web Workers 并行计算。浏览器平台的高级能力边界。