前端分阶段学习路线|晨愈昼

我的订阅号
我开通订阅号啦！关注即可获得海量学习资料！

java

说明（认真看！！！）

这个路线都是我的个人总结，肯定不够全面，如果你有好的资源和知识点请在评论区讨论或者私信我，让我们一起来共同维护这个路线
基本上知识点我都覆盖了学习资源，并且都是不容易和谐的免费的资源
下图的资料和路线足够你完成学习，收集制作不易

思维导图

嫌屏幕小也可以点击在线查看密码是我的名字

第一个阶段（看看能不能学走）

开发环境搭建

开发工具
- vscode
- webstorm
- hbuilder
基础的计算机命令

html

常用标签（不同刻意去背）
表单
语义化
多媒体
- audio
- video
一些常用的api
- 文件读取
- 网络状态
- 本地缓存
- 拖放
- 定位
Dom（重点）
自定义属性

css

基础语法
几种样式定义的区别和优先顺序
- 行内
- 行外
- 外部样式
css层叠规则
盒模型
常见的布局方式
响应式布局
- 媒体查询
- bootstrap
动画和过渡效果

JavaScript（重中之重）

基础语法
常用的数据结构（必须先学）
- 数组
- 集合
- 堆栈
- 队列
- 链表
- 哈希
- 树
- 学习资料
JavaScript的执行机制（了解一下）
面向对象（重点，多语言通用知识点）
原型链
实现继承的几个方式
几个重点
- 类型转换
- 作用域
- 闭包
- 深浅拷贝
正则表达式
操作Dom和canvas绘制
常见的工具库的使用（可以参考一下我上一期发的推荐视屏）
- jquery（2020要学，花不了多少时间，了解一下链式编程和操作dom）
- loadsh
网络相关基础（重要）
- 常见的通信
  - HTTP/HTTPS
  - IP/UDP
    - websocket
      - 学习资料
- 常见的响应方式和状态码
  - Json
  - xml
  - 1xx 2xx 3xx
- ajax通信（重要）
- restful风格接口
  - 学习资料
- rpc风格
- GraphQL拓展
- 使用postman调试接口
- mock数据（重要）
  - 学习资料
最好还是学一点设计和切图
浏览器相关知识
- 兼容性
- SEO
  - 学习资料
- 控制台调试debug
  - 学习资料
  - 学习资料

学习资料

基础入门
- 前面没有注明学习资料的地方说明都在这面
- 黑马36期
- 鱼c小甲鱼
- 尚硅谷
- pink老师-网友推荐
推荐书籍
- 犀牛书
- 红宝书
- 新人看书很不容易看下来，可以后面再看
- 电子书合集
- 开源的电子书合集
- 免费的电子书合集

第二个阶段（开始正式踏入前端）

Git和Svn的版本管理

JavaScript进阶

基础算法的学习
- 排序
- 搜索
- ...
函数式编程
- 学习资料
es6+的学习（重点）
- 阮一峰
- 石川
模块化
- 学习资料
typescript
- 学习资料
防抖节流

学习框架相关

nodejs的基础
安装node的环境
- package.json
- npm cnpm yarn
- 学习资料
打包和构建
- webpcak（重点）
- 学习资料
  - 学习资料
- 学习资料
- gulp
- grunt
- babel
- 学习资料
css预处理
- less
- sass
- stylus
- 学习资料
JavaScript
- 学习框架之前的准备
  - 了解mvc、mvp、mvvm的架构区别
  - 了解服务端渲染和spa框架
- 三大框架
  - vue全家桶（适合入门）
    - 基础语法
    - router
    - vuex
    - vuecli脚手架
    - 学习资源
  - react（也是必学，跳不过的）
    - 基础语法
    - router
    - redux
    - hooks
    - crate-react脚手架
    - 学习资源
  - angular
    - 学习资源
    - 学习资源
  - 网络
    - axios
    - umi-request
    - 学习资料
  - ssr
    - 学习资料
    - 学习资料
  - 单元测试
    - 学习资源
  - 框架主题库（千万别去背，能用就行）
    - antd
    - element
- 可视化
  - svg
    - 学习资源
  - webgl（难，非必学，可以作为职业定位）
  - canvas
    - 报表
    - 海报
    - 大屏
    - 学习资源
    - 学习资源
  - 移动端开发
    - 小程序
      - 学习资源
      - 学习资源
  - 跨平台（只要框架基础打好，入手很快）
    - react native
    - weex（不建议）
    - uniapp
    - taro
    - flutter（作为拓展学习，成本较高）
    - 学习资源
  - 小游戏开发（可以作为职业定位）
    - cocos
      - 极客学院
    - 白鹭
      - 官网回放

第三阶段（前端的进阶和大前端）

前端进阶
- 性能优化‘
- 框架的源码阅读
- 浏览器原理
- 造简单的轮子
- 设计模式
服务器相关
- linux基础
  - 学习资料
- nginx
  - 学习资料
- docker/Jenkins
  - 学习资料
  - 学习资料
服务端开发（你完全可以再学一门后端语言，但是成本较高，当然我们这里以JavaScript为例，学习其他可以看我前面的视频）
- 了解serverless
  - 学习资料
  - 学习资料
- 数据库知识
  - 关系型
    - mysql
  - 非关系型
    - MongoDB
  - 学习资料
  - 学习资料
node的网络框架
- express
  - koa
  - egg
  - nestJs（优先）
  - 学习资料
session/cookie
权限管理和认证
缓存框架
- redis
- memcached
文档检索
- elasticsearch
webassembly（可以去了解一下，可能要火）