前端学习路径图
2020-09-24 11:15:44 12 举报AI智能生成
前端学习路径图（全面）
作者其他创作
大纲/内容
前端全栈学习路径图
1、计算机网络基础
了解互联网是如何工作的？
HTTP是什么
浏览器的工作原理
DNS以及工作原理
什么是域名、主机
OSI七层模型
TCP/IP四层模型
传输层协议
IP协议
2、web前端基础
HTML+CSS
HTML
结构、规范、注释
常用标签：div、a、img、ul、li、table、input、heade、body等常用标签
CSS
CSS引入方式
优先级
常用选择器
继承性、层叠以及特殊性
字体属性和文本属性
盒子模型
浮动
定位
z-index
常见布局方案：栅格布局、流式布局等
HTML5+CSS3
HTML5
新增的语义/结构化标签
地理位置、本地存储、缓存
图形标签 svg canvas 二者区别
新的多媒体标签 video audio source
解决浏览器兼容性的HTML5shiv垫片
CSS3
CSS3新特性：背景、边框、文本效果
新选择器
渐变
2D/3D转换
transition过渡
animation 动画
@keyframes
多列布局
弹性盒布局flex
JavaScript
ECMAScript语法
引入js的方式
变量
基本数据类型：string、Number、undefined、boolean、null
复杂数据类型：Array、Object、Function函数、Date
条件判断
switch语句
循环
数组的常见方法
字符串的常见方法
Date日期对象的常见方法
对象的常见方法
Math数学对象的常见方法
正则表达式
DOM操作
DOM树的理解
节点的理解
获取元素节点的方法
节点属性操作
节点方法操作
样式如何设置
常用事件
BOM
window对象
定时器
location对象的方法和属性操作
3、JavaScript进阶
作用域
词法作用域理解
预解释
执行上下文环境理解
作用域链理解
闭包
如何正确理解闭包
立即执行函数IIFE
闭包常见的场景
this指向
默认绑定
隐式绑定
隐式丢失
显示绑定
new 绑定
严格模式
面向对象编程
创建对象的方式
constructor
原型对象、原型链
对象字面量方式
工厂模式
构造函数
原型模式
组合模式
原型链继承
组合继承
寄生组合式继承
多重继承
深浅拷贝的实现
模块化实现
ES6 新语法学习
TypeScript
4、前端库必备
jQuery
jQuery插件
underscore.js 、lodash.js
前端功能库必备，弥补了大量原生JS方法天生不足的缺陷
动画库 animate.css
动画库 Velocity.js
moment.js
5、移动端开发
viewport
媒体查询
rem自适应
flexiable.js
移动端事件
移动端库 zepto.js
swiper.js
移动端框架 Bootstrap
6、图形学&游戏开发
D3.js&tree.js
echart.js
cocos2d-x
7、前端工作流
git
三个打包工具
grunt
了解它，放弃它
glup
简单使用它，了解它
webpack
重点之重，进入BAT最重要的一个工具
前端模块化
require.js
sea.js
AMD/CMD
ES6 Module
Yoman脚手架工具 了解一下吧
8、打通任督二脉 Nodejs
HTTP/AJAX
Nodejs核心模块
Nodejs异步
Events
Timer
Event-loop
进程
进程和线程
Cluster
数据库
爬虫框架 node-crawler
数据持久化
Mysql
MongoDB
Redis
鉴权
cookie认证
token+jwt
第三方登录Oauth2
框架进阶
先学express入门
再去进攻Koa2
大型项目框架 使用eggjs
MVVM开发框架
SSR服务器渲染
常用linux命令要会
部署运维
上线流程要搞一遍吧~~~ 不然你都不知道自己写好的项目如何上线的
9、Vue 全家桶实战
Vue
常用指令
必会，这个都不会，下面的不要学了
表单处理
双向数据绑定
MVVM思想
组件化
必会
最好能自己编写自己的组件
生命周期
vue动画特效
Vue-router
路由基础
动态路由
嵌套路由
编程式导航
命名路由
重定向
路由组件传参
history模式
路由进阶
过渡特效
数据获取
滚动行为监听
路由懒加载
Vuex
state
getters
mutations
actions
modules
前后端分离思想
对比后端渲染页面和前后端分离
服务器渲染SSR
SEO的问题
SSR的原理
为什么要做SSR
何种类型的项目使用SSR
nuxt.js
常用框架
element-ui必会
下面三款，任选其一
Vux
iView
mint-ui
vue双向数据绑定的原理，手写出来
Vue3.0展望
提升
尝试自己手写一个vue
尝试自己手写一个vue-router
尝试自己手写一个vuex
使用Vue全家桶打造一款项目
项目不限于PC、移动、H5以及后台管理
10、React 全家桶实战
React基础+进阶
React基础语法，可以去它官网上看，https://react.docschina.org/docs/getting-started.html
官网脚手架Creat-react-app
JSX
虚拟DOM原理剖析
数据管理setState
组件化思想
动画特效
Fiber架构了解一下
Hooks了解一下
Redux状态数据管理
setState和属性传递管理数据的不足
单向数据流和双向数据流对比
Action
Reducer
Dispatch
React和Redux连接-》React-redux
Provider和connect
中间件
Redux-thunk中间件如何处理异步任务
React-router4单页应用
路由管理
路由和组件
路由声明周期
懒加载
Ant-design组件库
跟Vue的SSR类似了，如果你会了Vue的SSR，这个可以忽略
Typescript在React中实战
深入了解虚拟DOM的原理
使用React全家桶打开一款项目
项目不限于PC、H5还是后台管理
11、全栈云开发小程序
学微信小程序，会基本的html+css+js就可以快速入门
微信小程序实战
微信小程序中基本的api
页面结构组件
页面样式
基础组件
Flex布局
扫码
下拉刷新、上拉加载
轮播图
支付
开发自己的小程序
小程序生态
小程序适用场景分析
支付宝小程序
百度小程序
Taro、Mpvue 通用框架、uniapp的使用
再开发一款微信小程序项目（最好是原生的项目）
12、微信公众号开发
微信Api
消息中间件
音视频、图片、图文、ticket管理
微信支付接入
服务端如何接入微信后台
Nodejs后端接入
依赖微信jssdj开发业务
录音/地理位置，扫一扫
公众号开发
13、混合式App开发
React-navtive
基础
搭建开发环境
样式、布局、输入、事件、滚动视图、长列表
Props属性
状态
进阶
组件化开发
Platfrom模块
导航器
动画
手势
性能、调试
集成
ios应用扩展
Android应用扩展
单页应用
redux管理数据
react-router路由
第三方组件库
ant-design-mobile的使用
开发一款基于RN的项目吧~~
Flutter
搭建Flutter开发环境
布局类组件
容器类组件
可滚动组件
功能型组件
事件处理和通知
自定义组件
文件操作与网络请求
支持多语言和多主题
使用Flutter做一款移动APP项目
14、静态网站生成器
Next.js
GatsbyJS
Nuxt.js
Vuepress
Jekyll
Hugo
15、先进的web App
Storage存储
Web Sockets
Service Workers
16、桌面应用
Electron 跨平台桌面应用开发框架
Carlo Node应用web渲染框架
Proton Native 被称为Electde 替代品
17、web安全
这是基本知识，对这个有所了解，面试大厂可能对你有很大的帮助
基本的安全和常用web项目相关漏洞原理解析和防御
XSS漏洞、CSRF漏洞、SQL注入
Cookie安全策略
传输安全和HTTPS加密
18、自动化测试
虽然测试不是咱们前端必备，但是了解它，对你以后的全栈之路绝对提升了一个档次
业务驱动
测试驱动
黑百盒测试
前端项目的单测集成
Node项目的单测集成
前端e2e测试实战
19、前端性能优化
性能指标
业务场景
分析性能指标
性能报告记录
性能优化
浏览器解析
资源加载和利用
浏览器存储
nginx调优
前端代码优化
BOM/DOM交互优化
常见写法优化
20、系统的稳定性建设
系统稳定性建设
监控、报警、应急处理
前端代码可行性（测试质量、线上异常）
静态资源服务可用性
网络连接可用性
服务端可用性保障
数据体系
学会埋点收集数据信息
根据数据来分析业务和技术瓶颈
21、web前端提升进阶
前端数据结构和算法
算法基础知识、核心概念、复杂度
常见算法：冒泡排序、快排、二分查找、递归算法、不断的刷常见算法面试题
常见数据格式：数据格式、数组、连表、树、二叉树、图
前端设计模式
面向对象
工程模式
单利模式
装饰器模式
代理模式
观察者模式
设计模式做个实战，运用一下
0 条评论
回复 删除
下一页
