知识体系

废话不多说，花了2小时，终于写完了，以下是阿宽的知识体系，感兴趣的小伙伴可以参考一下，👏 欢迎大家查缺补漏，互相奥力给～

总感觉要学的远远不够，希望各位老铁大家给个建议，进行补充，又或者我哪个地方写错了，请指出 🤝

这是我目前所能涉及到的知识点了，有些没写进去，感觉够吃一壶了，我丢，欢迎大家补充👏 知识点继续压过来吧，债多不压身～

需要源文件 Xmind 的去我的Github下载，我没得自己服务器，百度网盘又懒得搞，就这样了，下载地址传送门: 👉 阿宽的知识体系 PNG、阿宽的知识体系Xmind

感觉会有公众号把 xmind 下载下来，然后改个名变成自己的，接着又搞关注公众号、进群领取详细的前端知识体系，我想说，你想改可以，评论区说一些: “老哥，我借用你的xmind了哈”，毕竟我也是很辛苦整理的好吧，打声招呼哈～

编程基础

HTML

SEO
行内元素/块级元素
语义化理解

CSS

CSS3新特性
清除浮动的几种方式
盒模型
Flex布局
BFC原理
position定位
水平垂直居中的几种方式
CSS优先级权重
transition/animation区别
border: none/border: 0区别
display:none/visibility: hidden/opacity: 0区别

Javascript

内置对象
typeof
instanceof
类型转换
new
this
闭包
原型与原型链
执行上下文
执行环境与作用域
深浅拷贝
- 深拷贝
- 浅拷贝
防抖与节流
- 原理掌握
- 动手实践
模块化
- CommonJS
- AMD
继承
- 原型链继承
- 借用构造函数继承
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承
- ES6 的 Class 继承
call、bind
- 原理掌握
- 如何动手实现一个bind、call函数
let 、const、var
Promise原理与实现
Generator原理与实现
Async/Await
Map、Set、FlatMap、Reduce
Proxy
0.1 + 0.2 !== 0.3

浏览器基础

事件机制

事件触发三个阶段
注册事件
事件委托/事件代理

跨域

JSONP
- 动手实现一个JSONP
CORS
- GET/POST有区别吗
Nginx
- 扩展负载均衡等知识点
PostMessage
document.domain + iframe

存储

cookie、localStorage、seesionStorage、indexDB
service worker

Event Loop

Node中的Event Loop
浏览器中的Event Loop

浏览器渲染原理

Load与DOMContentLoaded的区别
HTML Tree / CSS Tree
回流、重绘
如何减少回流重绘
- 哪些CSS属性会导致回流重绘

setTimeout、setInterval

网络基础

五层协议

应用层
运输层
网络层
数据链路层
物理层

PPP协议

CSMA/CD 协议

ARP 地址解析协议

ICMP 网际控制报文协议

UDP 用户数据报协议

不可靠
面向报文
高效
传输方式

TCP 传输控制协议

首部格式
- 序号
- 确认号
- 数据偏移
- 确认ACK
- 同步 SYN
- 终止 FIN
- 窗口
状态机
- 建立链接三次握手
- 断开链接四次挥手
ARQ协议
- 停止等待ARQ
- 连续ARQ
- 累计确认
滑动窗口
- Zero窗口
拥塞处理
- 慢开始算法
- 拥塞避免算法
- 快速重传
- 快恢复

UDP和TCP的区别

HTTP

常见状态码
- 2xx
- 3xx
- 4xx
- 5xx
HTTP首部字段
POST和GET区别

HTTPS

TLS
与hTTP区别

HTTP2.0

二进制传输
多路复用
Header压缩
服务端Push
QUIC
与HTTP1.0、HTTP1.1的区别

DNS

DNS可否使用TCP发送？
- 满足条件: 返回的响应超过 512 字节
- 满足条件: 区域传送
区域传送
- 完全区域传送
- 增量区域传送
DNS解析流程
- 本地host存在映射，解析结束
- 本地host不存在映射
  - 本地DNS服务器查询
    - 本地DNS服务器有缓存，解析结束
    - 本地DNS服务器无缓存
      - 迭代查询
      - 递归查询
DNS解析器原理
- Socket库解析器
DDNS、NAT技术、内网穿透
CDN
DNS负载均衡
DNS劫持，如何防止

从输入URL到页面加载

DHCP 配置主机信息
ARP 解析 MAC 地址
DNS 解析域名
HTTP Request，TCP 三次握手四次挥手
拿到HTML文档，进入浏览器渲染原理流程

软件开发

Git

remote
push、pull
stash、rebase
merge、cherry
reflog、reset

xshell

Linux命令

Nginx配置

host修改配置

类库框架

Vue

路由原理
状态管理
- Vuex原理及源码核心思想
框架核心
- VDOM
  - 为什么需要虚拟DOM
  - 虚拟DOM算法简述及实践
- MVVM
  - 脏数据检测
  - 数据劫持
  - Proxy与Object.defineProperty对比
- 生命周期
  - new Vue()实例化
  - init() 函数初始化
  - beforeCreatecreated 数据观测
  - created 和 beforeMounted ，编译
    - parse
      - 正则方式解析 templae 模板中的指令，生成一颗 AST 语法抽象树
    - optimise
      - 标记 static 静态节点，pacth 过程，diff 跳过静态节点，优化 patch 的性能
    - generate
      - AST 语法抽象树转化成 render function()字符串的过程
  - beforeMount 和 Mounted 之间，给 vue 实例对象添加$el 成员，并且替换掉挂载的 DOM 元素
  - beforeUpdated 和 updated ，数据改变时，通过 setter -> watcher -> update 流程修改视图，通过 patch 机制，经过 diff 算法算出差异
  - beforeDestory 钩子函数在实例销毁之前调用。
- nextTick原理
  - macrotasks
    - setImmediate
    - MessageChannel
    - setTimeout
  - microtasks
    - Promise
- diff算法原理
- watch原理
- computed与methods区别

React

状态管理
- Redux
  - 源码解读及编程艺术
  - 为什么要返回一个新的store
- Hox (扩展了解)
  - 源码解读与设计思想
  - 搭配hooks，下一代react状态管理
- react-redux
  - Provider原理
  - Connect原理
相关了解
- 什么是中间件
- redux-thunk
- redux-saga
- redux-logger
生命周期
- 初次渲染
- 更新阶段
- 卸载阶段
setState
合成事件
hooks 部分API原理
- useEffect
- useState、useMemo
- useCallback、useRef
类组件和无状态组件区别
shouldComponentUpdate内部原理

安全方面

XSS

如何攻击
如何防御
CSP

CSRF

如何攻击
如何防御
- SameSite
- Token
- 验证Referer

密码安全

加盐

数据结构

栈
队列
链表
树
堆

算法

时间复杂度
位运算
- 左移<<
- 算数右移动>>
- 按位操作

排序

冒泡排序
快速排序
选择排序
归并排序
堆排序

链表

反转单向链表

树

二叉树的先序、中序、后序
中序遍历的前驱后继节点
树的深度遍历
- DFS
- BFS

动态规划

斐波拉契数列
0-1背包问题
最长递增子序列

前端常用设计模式

单例模式
发布-订阅模式
代理模式
策略模式
装饰器模式
适配器模式
责任链模式

性能优化

网络相关

DNS预解析
缓存
- 强缓存
- 协商缓存
- 选择合适的缓存策略
HTTP2.0
预加载
预渲染

渲染过程优化

懒加载
懒执行

文件优化

图片优化
- 计算图片大小(压缩)
- 图片加载优化
其他文件优化
CDN

其他

Webpack优化项目
监控

Webpack

与grunt、gulp的不同
按需加载
热更新原理
如何配置单页、多页
常见Loader，解决什么问题
常见Plugin，解决什么问题
构建流程，如何提高构建速度
如何使用webpack进行性能优化
webpack-dev-server和nginx有什么不同

软技能

多看基础，扩展知识面
学点英语，读英文文档
做事之前，画图构思及设计
- 学会绘制流程图、原型图等
- 模块化、通用组件等，在做之前，先想清楚，做个评审及设计文档
列出每日Todo，坚持写日报和月报
反思和整理
社区贡献
- 每月坚持一篇高质量文章输出
- 多逛社区、Github等，积极提Issues、Merge Request
身体健康
- 每周两次健身
- 每周一次篮球

未来扩展

微前端
TS
WebGL
WebAssembly
多端(umi-app / taro / weex)