2021你应该了解的前端知识体系

Posted 2021-06-26 前端开发分享

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

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

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

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

基础知识

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

编程基础

• html(HTML5)
  掌握常用标签、标签语义化的意义、meta属性、DOM、Canvas、前端存储

• CSS(CSS3)
  掌握CSS选择器、布局、浮动与定位、BFC（块格式上下文）、CSS3动画

• javascript

  1. 数据类型
  2. 原型与原型链
  3. 作用域与作用域链
  4. 闭包
  5. this
  6. 执行上下文
  7. call、apply、bind 方法
  8. 事件冒泡、事件委托
  9. 防抖与节流
  10. ajax 异步请求
  11. 跨域
  12. 浏览器事件循环机制，宏任务与微任务
  13. 浏览器渲染原理、回流与重绘
  14. 浏览器缓存策略、CDN
  15. HTTP 状态码

• ES6

  1. let、const
  2. 箭头函数
  3. 解构赋值
  4. 模板字符串
  5. Symbol与Symbol属性
  6. Set和Map数据结构
  7. Iterator 和for...of 循环
  8. 异步编程，Generator函数、Promise对象、async函数
  9. Class类，Class类、对象创建、继承、静态方法与属性
  10. Module模块化

• 微信小程序

开发与调试工具

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

类库与框架、组件库

• jQuery
• Bootstrap
• underscore
• Lodash
• Vue
  1. vue
  2. vuex
  3. vue-router
  4. element-ui
• React
  1. react
  2. redux
  3. mobx
  4. react-router
  5. antd-design
• Angular
• 小程序框架：taro、mp-vue、uni-app

高级进阶

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

阅读框架源码

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

网络相关

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

前端安全

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

性能优化

• 性能指标

  1. 首次绘制（FP）
  2. 首次内容绘制（FCP）
  3. 首次有效绘制（FMP）
  4. 每秒传输帧数（FPS）
  5. 用户可交互时间
  6. DNS解析时间
  7. TCP连接时间
  8. HTTP请求响应时间

• 评估工具

  1. Lighthouse
  2. Chrome 开发者工具

前端工程化

• webpack
• gulp
• 模块化
• 组件化
• 规范化
• 自动化

设计模式

• 创建型：
  抽象工厂模式、工厂模式、单例模式、建造者模式、原型模式

• 结构型：
  桥接模式、代理模式、装饰器模式、适配器模式、享元模式、组合模式、门面（外观）模式

• 行为型：
  观察者模式、模板模式、迭代模式、状态模式、命令模式、中介者模式、解释器模式、职责链模式、访问者模式、策略模式、备忘录模式

V8引擎机制

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

大前端

• Flutter
• React Native

软技能

• 学习能力

1. 知识储备
2. 知识分享

• 技术能力

1. 解决问题
2. 带领新人

• 团队协作

  沟通技巧

• 项目管理

1. 业务理解
2. 需求分析
3. 项目评估
4. 风险评估

• 架构设计能力

1. 交互设计
2. 可用性
3. 扩展性
4. 安全性
5. 性能
6. 微前端
7. 前端基础建设
8. 前端性能监控
9. 前端埋点

水平有限，文中难免有不足之处，欢迎大家关注我的微信公众号。（前端民工）