【KT】构建自己的前端知识体系

知识体系

废话不多说，花了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)