前端学习路径图思维导图模板_ProcessOn思维导图、流程图

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进行开发了，但是也有不少老的项目可能还在用jquery,后端工程师必备。但是还是推荐Vue

jQuery插件

underscore.js 、lodash.js

前端功能库必备，弥补了大量原生JS方法天生不足的缺陷

动画库 animate.css

动画库 Velocity.js

moment.js

5、移动端开发

viewport

媒体查询

rem自适应

flexiable.js

移动端事件

移动端库 zepto.js

swiper.js

移动端框架 Bootstrap

6、图形学&游戏开发<br>

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组件库

服务器渲染SSR

跟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前端提升进阶<br>

前端数据结构和算法

算法基础知识、核心概念、复杂度

常见算法：冒泡排序、快排、二分查找、递归算法、不断的刷常见算法面试题

常见数据格式：数据格式、数组、连表、树、二叉树、图

前端设计模式

面向对象

工程模式

单利模式

装饰器模式

代理模式

观察者模式

设计模式做个实战，运用一下