1. 前端技术路线
入门简单是人们对Web前端的普遍认知，随着企业对Web前端人才需求的加大以及相关从业人员薪资的不断上涨，很多人选择学习Web前端。
零基础自学Web前端想要高效率，你需要具备以下几点：
1、耐性。要成为优秀的web前端开发者，要调整好心态。抛开一切的方法和技术知识，最重要的就是你的耐性。
2、学会延伸。对于新手来说，新技术就是新技术。对于一个高手来说，新技术不过是旧技术的延伸。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript，随着技术的革新，你还需要掌握angular、ajax。
3、系统性学习。学习有其规律可寻，需要一步一步由浅入深式学习。在学习理论知识的同时，你还需要注重积累相应的项目研发经验，切忌“眼高手低”。
下面推荐千锋Web前端学习路线，可以参考一下：
第一阶段：前端页面重构。主要内容包括PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学完此阶段，学员可胜任Web前端开发工程师/前端页面布局与重构工程师，就业薪资为4K-6K;
第二阶段：JavaScript高级程序设计、PC端全栈开发。主要内容包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、PHP+MySQL后端基础、前端工程化与模块化应用等。学完此阶段，学员可胜任HTML5大前端工程师、高级HTML5大前端工程师、网站开发工程师、移动前端开发工程师，就业薪资为6K-10K;
第三阶段：Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架、大数据可视化。学完此阶段，学员可胜任高级HTML5大前端工程师、全栈工程师、移动前端App开发工程师、微信开发工程师、小程序开发工程师、数据可视化开发工程师，就业薪资为10K-15K。
综合来说，零基础自学Web前端难度很大，是对你自学能力、自制力以及动手能力的综合考验。如果你无法很好的把握这三点，不妨选择专业学习一下，让自己学习效率更高，就业速度更快!
2. 前端技术路线图
一、高级基础部分
1.ES6/ES7语法和原理实现
2.异步发展过程：callback、promise、generator、co、async/await等异步流程控制(async和await的实现原理)
3.promise设计模式原理及在es6中的应用，手写一个符合promise A+规范的promise实现
4.Node基础与实战
5.Node事件原理和发布定阅设计模式
6.函数式编程
二、模块化的演进
JavaScript模块化发展的演进历史 CommonJS、AMD、CMD、ES6模块的演进历史
目前最主流的模块化实现方案: CommonJS 到 ES Module
手写 CommonJS 的简单实现
三、前端工程化构建工具
1.gulp的基本用法以及实现原理
2.常用插件(压缩、合并、编译、预览服务、自动注入)
3.node.js中自定义流的高级用法
4.实现自定义插件(auto-prefixer)
5.webpack基本用法以及运行原理
6.常见的loader以及plugin(DllPlugin等)
7.Webpack工作原理分析
8.编写自定义Loader、编写自定义Plugin
9.webpack优化(resolve、模块热替换、压缩、代码分割、可视化工具)
四.React全家桶
1.react
1.为什么采用组件化的方式
2.react环境搭建
3.JSX语法的使用(createElement,render的原理实现)
4.JSX表达式的用法
5.JSX的属性(className,htmlFor,style,dangerouslyInnerHTML)
6.组件使用(类声明,函数声明)
7.组件的属性和状态(属性的检验以及setState详解)
8.复合组件
9.组件的声明周期
10.受控组件 非受控组件
11.children属性的使用
12.项目实战留言板
2.redux
1.手写redux库(getState,createStore,dispatch,subscribe,applyMiddlewar
e,combineReducer,compose,bindActionCreators)
3.react&redux
1.高阶组件的原理和使用
2.react高级属性context上下文
3.react-redux实现todoList
4.手写react-redux(Provider和connect原理解析)
4.中间件
1.react
● 1.为什么采用组件化的方式
● 2.react环境搭建
● 3.JSX语法的使用(createElement,render的原理实现)
● 4.JSX表达式的用法
● 5.JSX的属性(className,htmlFor,style,dangerouslyInnerHTML)
● 6.组件使用(类声明,函数声明)
● 7.组件的属性和状态(属性的检验以及setState详解)
● 8.复合组件
● 9.组件的声明周期
● 10.受控组件 非受控组件
● 11.children属性的使用
● 12.项目实战留言板
2.redux
● 1.手写redux库(getState,createStore,dispatch,subscribe,applyMiddlewar e,combineReducer,compose,bindActionCreators)
3.reactredux
● 1.高阶组件的原理和使用
● 2.react高级属性context上下文
● 3.react-redux实现todoList
● 4.手写react-redux(Provider和connect原理解析)
4.中间件
● 1.手写applyMiddle和compose(中间件原理)
● 2.手写redux-logger,redux-thunk,redux-promise
● 3.手写自定义本地缓存中间件
5.reactrouterdom
● 1.HashRouter,BrowserRouter的区别
● 2.Link,NavLink的使用(extact绝对匹配,state带参数跳转)
● 3.Route组件三种渲染方式(component,render,children)
● 4.路由参数以及子路由的使用(params)
● 5.withRouter,PrivateRouter的用法
● 6.Prompt组件阻止跳转
● 7.重定向(Redirect组件)
● 8.手写HashRouter Route等常用组件
6.ReactTransitiongroup
● 1.react动画的实现原理
● 2.使用React-Transition-group库开发todo动画应用
7.项目实战React珠峰课堂1.0
● 1.webpack环境搭建
● 2.底部页签导航
● 3.动画
● 4.redux改变课程分类
● 5.实现头部轮播图
● 6.课程列表列表
● 7.下拉刷新
● 8.上拉加载
● 9.记录滚动条位置
● 10.课程详情页面
● 11.用户注册
● 12.用户登录
● 13.受保护的我的课程页面
● 14.Redux开发插件
8.源码级Vue+React深度解析与实现
● 1.手写Vue双向绑定实现
● 2.Vue虚拟DOM和React虚拟DOM的区别
● 3.如何实现一个 Virtual DOM 算法
● 4.通过源码彻底搞明白setState的更新机制
● 5.手写包含虚拟DOM、事件监听、基本组件生命周期等功能的React库
五.node高级
1.http深入和tcp详解
● 1.七层网络协议分析
● 2.TCP连接和Nagle算法
● 3.使用wireshark学习七层网络协议
● 4.DNS服务器详解
● 5.Node静态服务器实现与缓存机制的实现
● 6.HTTP常用报文的实际应用
● 7.Node Stream的应用与文件分片上传策略
● 8.RestfulAPI设计和使用
● 9.CDN和OSS的使用
● 10.HTTPS安全通信过程分析
2.Express
● 1.手写express框架
● 2.中间件的实现原理、bodyParser、cookie-parser、static、模板原理
3.Koa
● 1.手写Koa框架
● 2.中间件的实现原理、bodyParser、cookie-parser、static、模板原理
4.Linux
● 1.Linux介绍
● 2.Linux文件和目录
● 3.Linux用户和组权限
● 4.Linux命令
● 5.Shell脚本
5.Mongodb
● 1.Mongodb安装和使用
● 2.Mongodb的系统架构
● 3.Mongodb高级查询
● 4.Mongodb索引
● 5.Mongodb安全与权限
● 6.mongoose模块之Schema
● 7.mongoose模块之Model
● 8.使用Model对文档进行增删改查
6.珠峰博客(express+mongodb+mongodb)
● 基于bootstrap+express+mongodb实现一个包括用户管理、文章管理、多看留言、分页查询、 搜索、文件上传、pv留言统计等功能完整的博客系统。使用了express的路由、ejs模板和serve-favicon、 morgan、cookie-parser、body-parser、express-session、connect-mongo、connect-flash、uuid、 async等内置各种中间件以及其它发路径保护等自定义中间件，并扩展了富文本编辑器、markdown和heroku云布署等功能。
● 1.项目初始化
● 2.用户管理
● 3.文章管理
● 4.分页查询
● 5.搜索
● 6.文件上传
● 7.PV留言统计
7.珠峰聊天室项目实战(react+socket.io+mongodb)
● 1.什么是实时通信
● 2.什么是Websocket
● 3.websocket和http的对比
● 4.使用socket.io实现聊天室
● 5.匿名聊天
● 6.有用户名的聊天和用户列表
● 7.用户私聊
● 8.划分不同的聊天房间
● 9.消息持久化
● 10.支持QQ表情
8.MySQL
● 1.MYSQL安装与使用
● 2.MYSQL系统架构
● 3.数据处理之增删改查
● 4.数据类型和约束分页
● 5.索引和慢查询性能分析
● 6.数据库安全之防止SQL注入
9.珠峰爬虫(cheerio+request+mysql)
● 1.发出HTTP请求获取指定URL中的内容
● 2.使用cheerio的语法操作网页元素，提取需要的元素
● 3.将数据保存到mysql数据库中
● 4.建立web服务器显示这些数据
● 5.使用计划任务自动执行更新任务
● 6.布署项目到阿里云中并配置反向代理
10.Redis
● 1.Redis安装和使用
● 2.5种数据结构及使用场景
● 3.API的理解和使用
● 4.Redis客户端
11.Nginx
● 1.nginx的安装和使用
● 2.模块和基本配置
● 3.正向反向代理等应用场景
12.Docker
● 1.Docker介绍和安装
● 2.Dockerfile
● 3.存储和镜像仓库
● 4.Dock实战
13.单元测试
● 1.测试用例和需求分析
● 2.单元测试框架mocha/ava
● 3.自动化测试之selenium
14.集群和负载均衡
● 1.cluster的工作原理和负载均衡算法
● 2.pm2工具
15.前端性能监控与性能优化、行为监控与安全防范
● 1.针对重绘重排的优化策略
● 2.如何发现性能短板与各个短板的优化
● 3.前端埋点上报
● 4.前端错误上报
● 5.前端性能上报
● 6.前端行为监控上报
● 7.前端恢复上线与A/B测试
● 8.网络缓存技术分析
● 9.浏览器渲染过程分析(DOM树、RenderObject、绘图上下文)
16.项目部署
● 1.npm script工作流
● 2.shell脚本布署
17.安全
● 1.XSS的原理与代码实战
● 2.CSRF的原理与代码实战
18.功能测试与性能测试
● 1.测试用例和需求分析
● 2.常用功能测试框架基础使用(mocha/ava)
● 3.常用性能测试框架基础使用(Benchmark)
19.全链路优化
● 1.DNS优化
● 2.请求速度优化
● 3.渲染优化之 JS css image html
● 4.缓存优化
● 5.服务器优化
● 6.数据库优化
六、前端设计模式(选讲)
创建型设计模式
● 1.工厂模式
● 2.建造者模式
● 3.原型模式
● 4.单例模式
结构型设计模式
● 1.外观模式
● 2.适配器模式
● 3.代理模式
● 4.装饰者模式
● 5.组合模式
行为型设计模式
● 1.观察者模式
● 2.状态模式
● 3.策略模式
● 4.命令模式
● 5.访问者模式
● 6.中介者模式
● 5.迭代器模式
七、算法&数据结构(选讲)
1.时间复杂度
2.空间复杂度
3.常见排序算法
● 1.冒泡排序、优化
● 2.选择排序
● 3.插入排序
● 4.归并排序
● 5.快速排序式
● 6.计数排序
● 7.桶排序
● 8.基数排序
4.链表(链表反转、链表是否有环)
5.树(高度、前序、中序、后序、广度优先算法、反转)
6.二叉树搜索算法
7.青蛙跳台阶问题-动态规划算法
8.React虚拟DOM Diff算法实现
3. 前端开发技术路线
web前端需要学习什么内容?
随着互联网应用的发展和广泛应用，web前端的开发和应用在市场也越来越受到企业的欢迎。所以学习web前端培训课程需求也在增加，那么前端培训学什么内容呢？小编就带着各位来了解一下。
一、前期需要分析那些内容
前端培训是设计应该如何做一个好的页面，无论做一个传统的桌面应用程序，还是做一个Web应用程序的页面，前期的前端页面分析与设计是少不了的操作。
二、网页实体应该如何展现更好
如果你自己的Ps技术不行，或者你实在没有审美细胞，业不想成为大牛的网页设计师，那么你可以直接奔向网页原型的开发。事实证明:如果你没有实体模型，做起网页原型来肯定是要花费更多时间的，有句话说得好“出来混，早晚要还的”
三、网页原型开发如何做
网页原型是用HTML开发出来的，肯定是要使用CSS渲染的。一般我们的HTML文档都会利用外部样式来定义文档中使用的样式。Javascript也放在外部文档中，这个文档只包含了Javascript代码，所以前端基础html+css+js这些也是要会的。
四、如何选择框架
如果我们已经知道了要去开发什么东西了，接下来的工作那就是要进行框架的选择了，要采用什么语言，什么框架了。在这个时候就要通过整体的分析来看哪个框架更加适合自己的项目，所以前端框架一定要了解。
五、开发进行需要注意的事项
在一切都准备好了以后，那么就是要进行实际的操作了。在实际操作中我们要多加注意把该有的流程一个不能少的完成，要时刻保存备份。
前端学习路线图：
4. 前端技术路线2021
现在就业形势特别严峻，专科话学历偏低，就业机会会受到一定的影响，部分企业对学历有要求，需要提高自己的软实力，也就是前端基本功，项目经历亮点，学习潜力，主观能动性等，相对于其他专业个人认为前端开发专业，在就业排行榜内，还是比较靠前的，自身实力强最重要
5. 前端工程师路线
前端工程师到了39岁还是有很大压力的。39岁，在思维，学习能力，加班，精力，时间等等各方面都不如年轻人，特别是程序员这一行，加班也是比较严重的，属于脑力劳动，如果39岁还敲代码是很困难的，一般公司也不会录用这么大年龄的程序员。达到这个年龄，肯定要走管理路线了
6. 前端技术路线方案方法
印制电路板的设计是以电路原理图为根据，实现电路设计者所需要的功能。印刷电路板的设计主要指版图设计，需要考虑外部连接的布局。内部电子元件的优化布局。金属连线和通孔的优化布局。电磁保护。热耗散等各种因素。优秀的版图设计可以节约生产成本，达到良好的电路性能和散热性能。简单的版图设计可以用手工实现，复杂的版图设计需要借助计算机辅助设计
在高速设计中，可控阻抗板和线路的特性阻抗是最重要和最普遍的问题之一。首先了解一下传输线的定义：传输线由两个具有一定长度的导体组成，一个导体用来发送信号，另一个用来接收信号（切记“回路”取代“地”的概念）。在一个多层板中，每一条线路都是传输线的组成部分，邻近的参考平面可作为第二条线路或回路。一条线路成为“性能良好”传输线的关键是使它的特性阻抗在整个线路中保持恒定。[1]
线路板成为“可控阻抗板”的关键是使所有线路的特性阻抗满足一个规定值，通常在25欧姆和70欧姆之间。在多层线路板中，传输线性能良好的关键是使它的特性阻抗在整条线路中保持恒定。
但是，究竟什么是特性阻抗？理解特性阻抗最简单的方法是看信号在传输中碰到了什么。当沿着一条具有同样横截面传输线移动时，这类似图1所示的微波传输。假定把1伏特的电压阶梯波加到这条传输线中，如把1伏特的电池连接到传输线的前端（它位于发送线路和回路之间），一旦连接，这个电压波信号沿着该线以光速传播，它的速度通常约为6英寸/纳秒。当然，这个信号确实是发送线路和回路之间的电压差，它可以从发送线路的任何一点和回路的相临点来衡量。图2是该电压信号的传输示意图。
7. 后端技术路线
电信后端开发更有发展前途。
因为电信后端开发工作越久，经验越丰富，是可以转岗的项目经理做管理的或者是走技术路线，做技术管理的，而前端开发的升值空间比较小而且到了中年以后，会逐渐会被淘汰的，毕竟整个工程的核心都是在后端，前端的淘汰率比较高。
