前端知识体系梳理

知识体系流程图

前端知识体系主要分成四部分：基础知识、框架库、开发环境、运行环境。主要目的就是将所学的知识点串联起来，才能赋予知识于生机活力。对我而言，我基本上是零散的时间学习前端知识，对整个前端没有系统的学习，忽略很多基础知识。故而构建前端学习路线和方法，建立知识框架。
可能还不全，欢迎留言补充。

1.基础知识

1.1 HTML（超文本标记语言 [ Hyper Text Markup Language]）

语义化标签、属性
表单验证
data-* 属性
HTML多媒体
- video(视频)
- audio(音频)
SVG
Canvas
HTML5 拖放
Web Worker
游览器缓存机制
H5存储
HTML5 离线缓存
HTML 渲染流程
重绘和回流
地图
websocket

1.2 CSS(指层叠样式表 [Cascading Style Sheets])

选择器
盒模型
定位、浮动
BFC
动画
过渡
弹性布局
2D、3D转换
边框、圆角
背景、渐变
文本效果、字体
CSS3 多列
CSS 伪类
CSS HACK
媒体查询
CSS 预处理语言

1.3 JavaScript: 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

数据类型
- 基础类型
- 引用类型
流程控制语句
内置对象
变量、作用域
原型、原型链
函数
事件
this 指针
单线程与事件循环
DOM
BOM
表单脚本
面向对象
正则
Ajax和跨站技术
ES6
- let 和 const 命令
- 解构
- Symbol
- Set 和 Map 数据结构
- 箭头函数
- Proxy
- Promise
- Class 语法
- module
错误处理及调试
- 错误处理
- 调试技术
- 常见的错误

1.4 算法

1.5 数据结构

JSON
XML

1.6 面向对象

1.7 设计模式

单例模式
工厂模式
建造者模式
原型模式
观察者模式
策略模式
构造函数模式
混合模式

1.8 计算机基础

网络协议
http 协议
DNS

2. 框架与库

敏捷开发框架库
2.1 web库

jQuery、zepto、Swiper
Vue、React、Angular
UI组件库
- Bootstrap
- React: Ant-design、Blueprint 、Material-UI、React-Bootstrap
- Vue: Element、iview、vuetify、vue-beauty、Vux、Vant
- Angular: ng-zorro
- backbone
- WeUI
- layui
跨站平台
- react-native
- Flutter
- Electron
可视化组件
- Echarts
- D3
- chart
- Flot
- three
- HighCharts
- Sigma
- MyHeatMap
小程序
- WeUI
- iView WeApp
- Wux WeApp
- mpvue
- wepy
- Taro

2.2 node

Express
hapi
Koa
egg
Loopback
Keystone

3. 开发环境

3.1 代码管理

3.2 IDE

WebStorm
subline
vscode

3.3 构建工具

webpack
Grunt
Gulp

3.4 调试工具

谷歌
firebug

3.5 测试
3.6 部署提测
3.7 linux

4. 运行环境

4.1 响应式布局

4.2 性能优化

压缩
合并请求
缓存
避免重定向
...

4.3 web安全

同源策略
XSS跨站点攻击
CRSF跨站点请求伪造
SQL 注入
...

4.4 游览器兼容性

CSS hack
渐进增强、优雅降级
JavaScript

4.5 node

5.书籍推荐

《HTML5秘籍》
《CSS权威指南第三版》
《CSS实战手册》
《CSS禅意花园》
《JavaScript高级程序设计第三版》
《JavaScript权威指南（第六版）》
《JavaScript DOM编程艺术》
《ECMAScript6入门》
《你不知道的javascript 【上】【中】【下】》
《HTTP权威指南》
《深入浅出 node》