前端知识体系思维导图模板_ProcessOn思维导图、流程图

相关科目

数学思维

抽象

建模

流程严谨、死板无情

英语

国外问答网站（如stackoverflow.com）

github

英文文档

报错信息

编程基础

计算机基础

计算机组成原理

冯若依曼结构

二进制

算数运算和逻辑运算

操作系统

进程和线程

CPU调度运算

内存管理

文件系统和IO

汇编语言

寄存器和内存模型

堆栈模型

CPU指令

编译原理

编译器流程

AST

计算机网络

TCP/IP 协议

UDP

DNS

HTTP

编码

ASCII 码

unicode 字符集

UTF-8 / UTF-16

数据结构

结构化与非结构化的思维，重要

逻辑结构与代码表现（很多人分不清楚），例如

栈（逻辑结构）可用数组（代码）表示

栈（逻辑结构）可用链表（代码）表示

队列（逻辑结构）可用数组（代码）表示

树（逻辑结构）可用对象（代码）表示

等

线性结构

向量（如 C 语言的数组，length 不可变）

链表

栈

队列

树

普通树

二叉树（为何偏偏重点讲二叉树？而不是三叉树、四叉树……）

搜索树

AVL 树

红黑树

B 树

优先级队列

堆

词典（散列表）

图

算法

复杂度

算法思想

二分

贪心

动态规划

递归思想（爆栈）

常用算法

线性结构

查找

排序

新增、删除

树

遍历

新增删除（平衡树）

图

搜索

最短路径

字符串

KMP 算法

前缀匹配

leetcode 刷题

编程模式

面向对象 OOP

类和对象

三要素（继承、封装、多态）

UML 类图

面向切面编程 AOP

函数式编程 FP

高级函数

纯函数

curry

compose

设计

SOLID 设计原则

常见设计模式

工厂模式

单例模式

观察者

发布订阅

代理

装饰器，等等……

MVC

MVVM

语法和 API

业界标准

W3C

ECMA-262

XML

HTML

基础标签

媒体标签

video

audio

图形标签

SVG

Canvas

CSS

理解“流” - CSS 的设计核心

“流”实际上是 CSS 世界中的一种基本的定
位和布局机制

“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身
具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于
“自适应布局”。

“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭
窄得多。例如，表格布局也可以设置为 100%自适应，但表格和“流”不是一路的，并不属于“流
体布局”

基础的图文样式

布局

inline block 和 inline-block

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

content（内容区）：元素的宽和高；
border（边框区）：盒子的边缘；
padding（填充区）：为了使页面布局看起来美观大方，盒子里的内容区会用padding来解决父元素和子元素的位置关系；
margin（外边界区）：控制同辈元素之间的位置关系。

margin 相关

flex

float 布局

BFC

定位

relative

absolute

fixed

定位上下文

响应式

关于 viewport

rem

vw vh

选择器

css3

渐变

动画

字体 iconfont

模块化

BEM

css-in-js ，等等……

预编译器

less

sass

ES 语法

变量，表达式，函数等基础语法

作用域

自由变量

闭包

this

class 和继承

原型和原型链

异步编程

promise

async/await

宏任务和微任务

event loop 模型

Map 和 Set

Proxy 和 Reflect

装饰器 Decorator

常用 API

字符串

数组

对象

正则表达式

日期处理

异常处理

模块化

ES6 Module（可对比 AMD、CMD、CommonJS）

Typescript 语法

类型

变量类型

函数参数类型

函数返回值类型

自定义类型

接口

泛型

枚举

函数重载

命名空间

JS Web API

DOM 操作

DOM 结构

DOM 操作

DOM 操作的性能考虑

DOM 事件

事件绑定

冒泡模型

事件代理（委托）

BOM 操作

window

location（获取 url）

navigator（获取 UA）

history（前端路由）

screen

通讯

postMessage

BroadcastChannel

ajax

XMLHttpRequest

Fetch

浏览器同源策略

跨域请求

cors

jsonp

cookie

存储

localStorage

sessionStorage

indexedDB

webworker

JSON 格式

WebAssembly

Web RTC

网络和通讯

TCP/IP

什么是 IP

7 层模型

3 次握手，4次挥手

url 格式

DNS 解析（域名到 IP）

http

method（Restful API）

状态码

1xx 消息表明请求已被接受，须要继续处理这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束

2xx 成功表明请求已成功被服务器接收、理解、并接受

3xx 重定向这类状态码表明须要客户端采起进一步的操做才能完成请求。一般，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的Location域中指明

4xx 客户端错误这类的状态码表明了客户端看起来可能发生了错误，妨碍了服务器的处理

5xx 服务器错误表示服务器没法完成明显有效的请求

Request Header

Response Header（其中会有 gzip 压缩）

cookie

缓存策略

强制缓存

协商缓存

https

如何加密传输？

购买证书

websocket

实现原理

登录方案

session

jwt

鉴权方案

oauth2

sso

文件上传