2020前端分阶段学习路线方法和资源汇总

前端分阶段学习路线和方法

想要高清离线文件可以来我的个人博客

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

开发环境搭建
- 开发工具
  - 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小甲鱼
  - 尚硅谷
- 推荐书籍
  - 犀牛书
  - 红宝书
  - 新人看书很不容易看下来，可以后面再看
  - 电子书合集
  - 开源的电子书合集
  - 免费的电子书合集

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

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
      - 学习资源
      - 学习资源](https://www.bilibili.com/video/BV1i741157Fj)
    - 网络
      - 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（可以去了解一下，可能要火）