乐趣区

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

jiezi

没有通过零碎的学习、演绎和总结，任何常识都是把握不牢固的。

对于始终要放弃学习的程序员来说，学习的新技术不仅要进行实际，还要常常进行反思和复盘，而后通过笔记或者博客将本人的思考记录下来，只有这样做能力真正把握新技术。

前端开发是十分非凡的一个职业，在大学没有前端开发业余，大部分做前端开发的同学都是学计算机或者其余业余通过自学而入行的，这样科班出身就会造成一个问题，前端的根底不牢固，把握的常识也没有造成体系，无奈将所有前端相干的常识串起来，而且工作之后大部分工夫可能都在写业务代码，如果工作之外又没有进行思考或者总结的话，那么未来被淘汰、被他人取代是必然的。

本文就从前端开发基础知识到高级利用、再到前端项目管理各个方面来聊聊如何构建本人的前端常识体系。本文既适宜筹备转行前端的同学浏览，也适宜刚入行前端的同学浏览，更适宜做前端开发 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. 前端埋点

程度无限，文中不免有不足之处，欢送大家与我交换。（前端民工）

退出移动版