前端知识图谱
2020-08-10 11:19:26 1 举报AI智能生成
前端知识体系
作者其他创作
大纲/内容
基础知识
工具
开发工具
VS Code
Webstorm
......
调试工具
Chrome Dev Tools
Firebug
......
切图
PS
......
HTML
常用的语义标签（元素）
基础标签
媒体标签
图形标签
SVG
Canvas
语法规范
DOM
CSS
理解“流” - CSS 的设计核心
核心基础
CSS样式规则
引入
行内
内嵌
链入
导入
基础选择器
标记选择器
类选择器
id选择器
通配符：*、[]
文本样式
样式属性
核心基础
基础的图文样式
布局
inline、block、inline-block
盒子模型
margin 相关
float 相关
flex 布局
gird 布局
BFC
定义
float属性不为none
overflow不为visible（可以是hidden、scroll、auto）
position为absolute或fixed
display为inline-block、table-cell、table-caption
作用
清除内部浮动
垂直margin合并
创建自适应两栏布局
定位
position：relative、absolute、fixed
z-index：正负值、值越大越底
定位上下文
响应式
关于 viewport
rem（根元素html的font-size）、em（相对于父元素font-size）
vw、vh、%
新特性
渐变
动画
字体 iconfont
模块化
交互
Sass、Less、Scss
JS
基础语法
变量声明
在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。（变量提升）
ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。
变量作用域（全局、局部）：变量提升（先声明后赋值、后声明）
数据类型
String、Number、Boolean、Null、Undefined 和 Object 等。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。
ES6 新增了 Symbol 类型
函数
普通函数：直接调用时就是普通函数
构造函数：通过new创建对象时就是构造函数
对象方法：通过对象调用时就是方法内置函数
内置函数
控制语句
if else
for、for in、for of、while
switch case
事件
内置对象
Array
Map 和 Set
原型链
高级函数
数据类型的安全检测：typeof、instanceof
构造函数的安全作用域
惰性载入函数（表示函数执行的分支仅会发生一次）
函数的重写
变量接收自执行函数
函数绑定
函数柯里化
作用域
自由变量
闭包
this
异步ajax
JS源生请求方式：XMLHttpRequest
Fetch
浏览器同源策略
模版引擎
跨域解决方案：JSONP、proxy（cors）
promise
async/await：async函数、await使用
宏任务和微任务
event loop 模型
cookie、session、token
正则表达式
class 和继承
异常处理
模块化
ES6 Module（可对比 AMD、CMD、CommonJS）
DOM
DOM 结构
DOM 操作及性能考虑
事件特性及使用
冒泡模型
事件代理（委托）
BOM
window
location（获取 url）
navigator（获取 UA）
history（前端路由）
screen
存储
localStorage
sessionStorage
indexedDB
服务端编程
概念
数据交互格式：XML、JSON
JS&JQ插件
Typescript
类型
变量类型
函数参数类型
函数返回值类型
自定义类型
接口
泛型
枚举
函数重载
命名空间
进阶
网络通信
通讯协议
HTTP1.0/1.1/2.0/3.0
HTTPS
UDP
WebSocket
API风格
RESTFul
RPC
GraphQL
性能
性能指标
首次绘制（FP）
首次内容绘制（FCP）
首次有效绘制（FMP）
每秒传输帧数（FPS）
用户可交互时间
DNS解析时间
TCP连接时间
HTTP请求响应时间
评估工具
Page Speed
WebPagetest
PhantomJS
Lighthouse
JSPerf
Chrome dev tools
安全
XSS
CSRF
CSP
Same-origin Policy
浏览器
IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
Firefox (Gecko)
Chrome/Chromium (Blink)
Safari (WebKit)
Opera (Blink)
CDN
独立组件
调优
代码调优
性能调优
页面响应速度、页面反馈速
组件及框架
可视化
SVG
D3
Raphaël
Snap
Canvas 2D
Echarts
HighCharts
WebGL
Three
移动Web
React Native
Weex
Flutter
jQuery Mobile
Zepto
开发库/框架
Vue
Vuex
Vue-router
Vue-cli
Element UI
React
Redux
React-router
create-react-app
Ant design
Angular
Ember
Knockout
Backbone
UI框架
Bootstarp
ElementUI
Vux
Mint UI
MUI
......
工具库
jQuery
Zepto
Bootstrap
Prototype
Underscore
Lodash
RxJS
moment
计算机基础
计算机基础
计算机组成原理
冯诺依曼结构
二进制
算术运算和逻辑运算
各级存储器的区别
操作系统
进程和线程
CPU 调度算法
内存管理
文件系统和 IO
汇编语言
寄存器和内存模型
堆栈模型
CPU 指令
编译原理
编译器流程
AST
词法
文法
V8
计算机网络
TCP/IP 协议
UDP
DNS
HTTP/HTTPS
编码
ASCII 码
unicode 字符集
UTF-8 / UTF-16
数据结构
结构化与非结构化
逻辑结构与代码表现
栈（逻辑结构）可用数组、链表（代码）表示
队列（逻辑结构）可用数组（代码）表示
树（逻辑结构）可用对象（代码）表示
线性结构
向量
堆（Heap）
栈（Stack）
队列（Queue）
链表（Linked List）
数组（Array）
集合（Set）
哈希表（Map）
树（Tree）
普通树
二叉树
搜索树
AVL 树
红黑树
B 树
算法
复杂度
算法思想
二分
贪心
动态规划
递归思想（爆栈）
常用算法
线性结构
查找
线性搜索
二分查找
索引
深度优先搜索（DFS）
广度优先搜索（BFS）
排序
冒泡排序
选择排序
插入排序
快速排序
希尔排序
归并排序
堆排序
计数排序
基数排序
新增、删除
树
遍历
新增删除（平衡树）
图
搜索
最短路径
字符串
KMP 算法
前缀匹配
Diff
设计模式
创建型
单例模式
原型模式
工厂模式
抽象工厂模式
建造者模式
结构型
适配器模式
装饰器模式
代理模式
外观模式
桥接模式
组合模式
享元模式
行为型
观察者模式
迭代器模式
策略模式
模板方法模式
职责链模式
命令模式
备忘录模式
状态模式
访问者模式
中介者模式
解释器模式
编程模式
面向对象（OOP）
类和对象
三要素（继承、封装、多态）
UML 类图
面向切面编程（AOP）
函数式编程（FP）
高级函数
纯函数
curry
compose
响应式编程
程序设计
结构化程序
自顶向下
逐步求精
模块化
限制使用goto
面向对象程序
单一职责原则（S）
开放关闭原则（O）
里氏替换原则（L）
接口隔离原则（I）
依赖反转原则（D）
架构模式
MVC
MVP
MVVM
其他
SSR
大前端
微服务
Serverless
WebAssembly
Less code/No code
后端知识
Node
Express
Koa
Egg
编程语言
C/C++/Java/PHP/Ruby/Python/...
网页服务器
Nginx
Apache
Tomcat
数据库
SQL
MySQL
Oracle
SQL Server
PostgreSQL
DB2
NoSQL
MongoDB
CouchDB
Hbase
数据缓存
Redis
Memcached
工程开发
模块化
CSS Module
ES6 Module
CommonJS
SeaJS/CMD
RequireJS/AMD
版本管理
Git
Gitlab
Github
Svn
TortoiseSVN
依赖管理
npm
Yarn
Lerna
语言增强
CSS
less
Sass(Scss)
Stylus
Post css
JavaScript
TypeScript
CoffeeScipt
Flow
构建工具
Webpack
Gulp
Grunt
Rollup
转换器
Babel
Traceur
CI/CD
Git web hook
Jenkins
代码质量
质量检测
JSLint/JSHint/TSLint/ESLint
StyleLint
Sonar
单元测试
Chai/Expect/Should
Unit/Mocha/QUnit/Jasmine/Jest
Karma
Sinon
Istanbul
E2E测试
Nightwatch
Cypress
0 条评论
下一页
