没有经过系统的学习、归纳和总结，任何知识都是掌握不牢固的。

对于始终要保持学习的程序员来说，学习的新技术不仅要进行实践，还要经常进行反思和复盘，然后通过笔记或者博客将自己的思考记录下来，只有这样做才能真正掌握新技术。

前端开发是非常特殊的一个职业，在大学没有前端开发专业，大部分做前端开发的同学都是学计算机或者其他专业通过自学而入行的，这样半路出家就会造成一个问题，前端的基础不牢固，掌握的知识也没有形成体系，无法将所有前端相关的知识串起来，而且工作之后大部分时间可能都在写业务代码，如果工作之外又没有进行思考或者总结的话，那么将来被淘汰、被别人取代是必然的。

本文就从前端开发基础知识到应用、再到前端项目管理各个方面来聊聊如何构建自己的前端知识体系。本文既适合准备转行前端的同学阅读，也适合刚入行前端的同学阅读，更适合做前端开发1~3年的同学。

基础知识

万丈高楼平地起，没有扎实的基础，前端开发这条路走不远。那么需要扎实掌握的基础知识有哪些呢？

编程基础

HTML(HTML5)
掌握常用标签、标签语义化的意义、meta属性、DOM、Canvas、前端存储CSS(CSS3)
掌握CSS选择器、布局、浮动与定位、BFC（块格式上下文）、CSS3动画

JavaScript

数据类型原型与原型链作用域与作用域链闭包this执行上下文call、apply、bind 方法事件冒泡、事件委托防抖与节流ajax 异步请求跨域浏览器事件循环机制，宏任务与微任务浏览器渲染原理、回流与重绘浏览器缓存策略、CDNHTTP 状态码

ES6

let、const箭头函数解构赋值模板字符串Symbol与Symbol属性Set和Map数据结构Iterator 和for...of 循环异步编程，Generator函数、Promise对象、async函数Class类，Class类、对象创建、继承、静态方法与属性Module模块化微信小程序

开发与调试工具

VS Code 常用快捷键Chrome 开发者工具PostmanFiddler 、Charles 抓包工具

类库与框架、组件库

jQueryBootstrapunderscoreLodash

Vue

vuevuexvue-routerelement-ui

React

reactreduxmobxreact-routerantd-designAngular小程序框架：taro、mp-vue、uni-app

进阶

仅仅掌握基础知识是远远还不够的，这些基础知识只能保证你能顺利完成日常开发工作。而想要进大厂，想要更好的工作，那就还得深入学习。

阅读框架源码

jQuery/underscore 等 JS 库的源码element-ui/Ant Design 等 UI 组件库的框架源码Vue 源码React 源码Webpack 源码

网络相关

OSI七层/四层模型HTTP协议HTTPS

前端安全

CSRF 攻击与防御XSS 攻击与防御

性能优化

性能指标

绘制（FP）内容绘制（FCP）有效绘制（FMP）每秒传输帧数（FPS）用户可交互时间DNS解析时间TCP连接时间HTTP请求响应时间

评估工具

LighthouseChrome 开发者工具

前端工程化

webpackgulp模块化组件化规范化自动化

设计模式

创建型：
抽象工厂模式、工厂模式、单例模式、建造者模式、原型模式结构型：
桥接模式、代理模式、装饰器模式、适配器模式、享元模式、组合模式、门面（外观）模式行为型：
观察者模式、模板模式、迭代模式、状态模式、命令模式、中介者模式、解释器模式、职责链模式、访问者模式、策略模式、备忘录模式

V8引擎机制

JS 执行机制V8垃圾回收V8优化

大前端

FlutterReact Native

软技能

学习能力知识储备知识分享技术能力解决问题带领新人

团队协作

沟通技巧

项目管理业务理解需求分析项目评估风险评估架构设计能力交互设计可用性扩展性安全性性能微前端前端基础建设前端性能监控前端埋点

水平有限，文中难免有不足之处，欢迎大家与我交流。