知识体系流程图

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

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 代码管理

• git
• svn

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》

学习网站

• MDN
• github
• 菜鸟教程
• w3scholl
• 思否