前端学习路径
HTML
- 所有标签
- 行内标签/块级标签
- Form表单元素
- Table相关元素
CSS
- css选择器
- css中的单位，权重，继承
- 块级元素/内联元素
- 盒模型
- 伪类 / 伪元素
- margin合并
- 浮动 float
- 定位 position
- BFC / IFC
- 传统布局/div+css/圣杯布局/双飞翼布局
- flex / grid
- 实现各种居中
- 字体图标/SVG图标
- 浏览器兼容
- CSS动画animation
- CSS3圆角border-radius
- 渐变radial-gradient,linear-gradient
- 阴影box-shadow
- 过渡transition
- 形变transform
Javascript
1, JS基础
- 变量
- 表达式
- 函数/箭头函数/匿名函数/立即执行函数/作用域
- 循环语句
- 字符串 String
- 数组 Array
- 对象 Object /null /undefined /内置对象
- 日期 Date
- Error
- 正则表达式 RegExp
- es6 class
2, DOM
- DOM的遍历
- DOM的增删改查移
- DOM的属性操作
- DOM的表单操作
- DOM宽高位置位移(各种位置)
- 事件绑定
- 事件流(捕获/冒泡)
- 常见事件(click，dbclick，scroll，change，keypress，keyup，keydown)
- 实现弹窗效果
- 实现Tab切换效果(css和js两种实现方式)
- Canvas
3, BOM
- Navigator
- LocalStorage/SessionStorage
- History
- document.cookie
4, 数据交互
- - Ajax/fetch
- Mock数据(这是什么？)
- JSONP
- CORS
- 跨域请求
- 操作文件
5, 代码套路
- 意大利面条式
- [ ]单例模式/模块模式
- 组件模式
6, 原生JS实现
- 实现图片懒加载
- 实现轮播效果
7, jQuery介绍
- jQuery对象 vs DOM对象
- jQuery的增删改查移
- jQuery动画
- jQuery事件
- jQuery.ajax
- jQuery插件
- 项目：实现豆瓣电影排行
8, 模块化
- AMD规范
- CMD规范
9, 生产环境的前端
** Webpack **
- 介绍
- 在项目中使用
- 写一个插件
- 写一个Loader
- 优化
** 转换器 **
- Sass
- Babel
10, Node.js
11, 原生JavaScript核心，重点
- 浏览器渲染机制 /加载顺序 /延迟加载 /reflow，repaint
- 垃圾回收机制
- ES6新增数据类型
- 运算符优先级
- 作用域链，闭包，柯里化
- 同步，异步调用，
- 回调函数，
- 递归
- 链式函数，
- promise,
- prototype,
- constructor,
- proto,
- async/await
- setTimeout，事件循环，队列任务
- 事件委托
- 防抖与节流
- 通过for in动态批量添加属性
- ES6 Proxy & Refect
- this
- new的过程
- 词法分析
- 原型链
- ES6模块化
- ES5/6继承
- CSS3之3D
- JSON(JSON.parse, JSON.stringify)
- 构造函数
- 数据属性，访问器属性
- call，apply，bind及其实现
12, 拓展：移动端
- 像素，像素比，viewport
- 适配方案(配体查询，动态rem，rem+viewport缩放，vw vh)
- 高清方案(图片高清方案,1px方案)
- 其他(300ms延迟，tap穿透)
13, 拓展：算法
- 冒泡排序
- 选择排序
- 插入排序
- 快速排序
- 希尔排序
- 归并排序
- 快速排序
- 堆排序
- 计数排序
- 桶排序
- 基数排序
- 线性搜索
- 二分搜索
- 广度优先搜索
- 深度优先搜索
- 翻转二叉树
14, 拓展：设计模式
- 单例模式
- 工厂模式
- 桥接模式
- 组合模式
- 外观模式
- 适配器模式
- 装饰者模式(装饰者模式，AOP切面编程，@decorator修饰符)
- 享元模式
- 观察者模式
- 命令模式
- 职责链模式
15， HTTP/HTTPS
** 网络模型与协议 **
- URI与URL
- OSI 7层模型与TCP / IP四层模型
- 理解应用层协议Http
- 传输层协议TCP的三次握手
- 传输层协议TCP的四步挥手
- TCP报文
- 在浏览器地址栏中输入g，并按下回车键后发生了什么
** Http方法 ** - http协议方法
- RESTfulAPI
** 报文，抓包，状态码 ** - 报文格式讲解
- 抓包与包结构
- 状态码详解
** 缓存 **