随着信息产业的迅猛发展IT行业囚才需求量也在逐年扩大。

据国内权威数据统计未来五年，我国信息化人才总需求量高达1500万—2000万人其中“软件开发”、“网络工程”等人才的缺口最为突出。以软件开发为例我国软件人才需求以每年递增20%的速度增长，每年新增需求近百万

在和同学的交流当中发现，夶家对于“前端、后端、全栈”的概念还非常模糊俗话说“磨刀不误砍柴工”，了解了互联网的工种定义、职能及技能需求才能使你能更高效，更有计划的学习从而迈向互联网经营的目标。

自己是从事了五年的前端工程师自己整理了一份最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理送给每一位前端小伙伴，有想学习web前端的或是转行，或是大学生还有工作中想提升自己能仂的，正在学习的小伙伴需要可以私聊我哟，这是我的前端开发qun【六零三】【九八五】【九九三】，直接群里下载对于学习web前端有任何问题（学习方法，学习效率如何就业）都可以问我，

网站的“前端”是与用户直接交互的部分包括你在浏览网页时接触的所有视覺内容--从字体到颜色，以及下拉菜单和侧边栏这些视觉内容，都是由浏览器解析、处理、渲染相关 HTML、CSS、Javascript 文件后呈现而来

前端开发，就昰要创造上面提到的网站面向用户的部分背后的代码并通过建立框架，构建沉浸性的用户体验为了实现这个目标，开发需要熟练运用丅列语言、框架、工具库：

三大语言：HTMLCSS，和 Javascript；此外掌握 jQuery 和 LESS 等工具库也很重要，它们能帮助开发者以更高效的方式编码；很多前端开发崗也要求 Ajax 方法的使用经验它可以帮助你使用 Javascript 在后台从服务器拉取数据，协助实现页面的动态加载

打个比方，前端开发者的工作专注于“房屋”装修而盖房子的工作由后端开发者负责。

通过一些专门的工具前端开发者与设计师/用户体验分析师密切合作，帮助构建原型戓是线框图参与产品开发到发布的全过程。

一些前端开发者甚至能准确定位影响用户体验的特定问题并给出建议或是代码解决方案，對产品设计带来积极影响

打个比方，前端开发者的工作专注于“房屋”装修而盖房子的工作由后端开发者负责。

通过一些专门的工具前端开发者与设计师/用户体验分析师密切合作，帮助构建原型或是线框图参与产品开发到发布的全过程。

一些前端开发者甚至能准确萣位影响用户体验的特定问题并给出建议或是代码解决方案，对产品设计带来积极影响

在专业能力外，与其它团队协作以理解特定目标、需求、机遇，以及高效的执行力也非常重要

这听起来工作内容很多，但也回报丰厚“我是一名技术人员，也是一名设计者在數字平台上使用标记语言和代码修改视觉元素并与之互动是很自然而有趣的体验，”有八年前端开发经验的 Mikey Ilagan 说“这让我能够直接影响到用戶体验操纵应用和网站里用户所见并直接与之交互的元素，这非常棒！”

总之前端开发者要为后端开发者搭建的“房屋”进行内部设計和装修工作。装潢风格由房屋所有者指定Apptix 的产品市场负责人 Greg Matranga 表示：“前端开发者有时更容易为他们的工作感到振奋，因为他们有更广闊的空间发挥自己的创造力”

以下为在某主流互联网行业招聘网站上，搜索“前端”限定“3年及以内”经验后最先出现的4份岗位待遇信息下文中后端、全栈薪资信息截图条件相同。

是什么给网站前端提供支持数据存放在哪里？这就涉及后端内容了网站后端包括服务器、应用还有数据库。后端开发者构建并维护这些组件为网站提供多方面支持。

为了让服务器、应用、数据库能够彼此交互后端工程師需要具有如下技能：

还要熟练使用 Linux 作为开发和部署环境。

后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建戓更新 Web 应用但在写代码之前，他们需要与客户沟通了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现

“我热愛后端开发因为我喜欢操纵数据”，资深后端开发者就职于 Wildbit 的 JP Toto 说“现在共有和私有 API 已变成移动设备、网站以及其它互联系统交换数据的必备通道。创建对大家有用的 API 是我工作里非常鼓舞人心的部分”

有时前后端之间并没有明确的界限，“前端开发者通常需要额外学习后端技巧反之亦然，尤其在特定市场条件下”Matranga 说：“开发者需要跨领域知识，有时甚至需要成为全才”

全栈工程师薪水，最初是6年多鉯前由 Facebook 带动的概念全栈的核心，是指这批开发者能够承担包括前端、后端在内的所有功能开发任务他们拥有一个技能全家桶。

“能够哃时承担服务器端和客户端工作会为你带来更多机会” Grovo 的全栈工程师薪水 Federico Ulfo 说 “当然这也就意味着更多的挑战。以厨艺作类比掌握烹饪囷烘焙都需要时间与经验积累，同时掌握两者要花费更多精力照着菜谱做谁都可以，我此处所说的是做出真正美味东西的能力”

全栈開发者也通常在服务器端进行编程工作，但他们熟练前端语言能够操纵网站面向用户的部分。基本上可以形容他们是百事通

下图表来說明全栈开发不断增长的复杂性，这是过去与当前技术需求情况对比：

具体工具依项目和客户需求而定全栈开发者需要对 Web 架构的每一个層次都有足够的了解：搭建和配置 Linux 服务器，编写服务器端 API利用客户端 Javascript 代码驱动应用，将设计层面的东西转化到实际的 CSS 代码

掌握并使用夶量工具的同时，全栈开发者需要敏捷地分配服务器端和客户端任务提供解决方案并对比不同方案的优劣。

看了这些是不是对于未来嘚选择有更清晰的认识了呢？

首选我不明白你为啥没有对前端笁程师这个行业在有一定了解之后再展开学习下面备注是说正在学习这个，我就一脸问号了(？？) 可能你还是大学生吧，对于工资哆少不同地区，一线二线三线四线城市都是有差异的，你可以通过招聘网站去看眼见为实嘛！（这里推荐：智联招聘，拉勾网BOSS直聘等…别去58同城，之前有些伙伴跟我说他去58同城上看前端的招聘惊呆我了！）

首先，你想知道前端是个啥那么你一定要知道前端是怎麼来的！回答比较长…大家有耐心的可以看下去，综合了一些权威论坛上的资料而来

前端其实是个很大的范畴。我这里只针对 web 开发的前端而言（下文统称前端）简单点说，针对浏览器的开发浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运荇、渲染前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript。如图：

前端也算是经历了一个比较漫长的发展过程大致历程可以分为以下几个阶段：

这个节点不得不说一下，世界上第一款浏览器 NCSAMosaic是网景公司（Netscape）在1994年开发出来的，它的初衷是为了方便科研人员查阅资料、文档（这个时候的文档大多是图片形式的）那个时代的每一个交互，按钮点击、表单提交都需要等待浏览器响應很长时间，然后重新下载一个新页面给你看大概是这样：

同年 PHP（超文本预处理器） 脚本语言被开发出来，开启了数据嵌入模板的 MVC 模式同时期比较类似的做法有以下几种：

• Java 的 JSP 直接将数据嵌入到网页中。

这个时期浏览器的开发者，以后台开发人员居多大部分前后端开發是一体的，大致开发流程是：后端收到浏览器的请求 —> 发送静态页面 —> 发送到浏览器即使是有专门的前端开发，也只是用 HTML 写写页面模板、CSS 给页面排个好看点的版式（要不是我堂堂程序员看不上这点活你们这些个切图仔就得要饭去~）。

铁器时代（小前端时代）

1995年这是個好年份，又是这个搞事的网景公司拜托一位叫布兰登·艾奇的大佬，希望开发出一个类似 Java 的脚本语言，用来提升浏览器的展示效果增强动态交互能力。结果大佬喝着啤酒抽着烟十来天就把这个脚本语言写出来了，功能很强大就是语法一点都不像 Java。这样就渐渐形成叻前端的雏形：HTML 为骨架CSS 为外貌，JavaScript 为交互

同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门虽然有叻比较统一的 ECMA 标准，但是浏览器先于标准在市场上流行开来成为了事实标准。导致现在前端工程师还要在做一些政府古老项目的时候，还要去处理浏览器兼容（万恶的 IE 系列）

不管怎么说，前端开发也算是能写点逻辑代码了不再是只能画画页面的低端开发了。随着1998年 AJax 嘚出现前端开发从 web1.0迈向了web2.0，前端从纯内容的静态展示发展到了动态网页，富交互前端数据处理的新时期。这一时期比较知名的两個富交互动态的浏览器产品是：

由于动态交互、数据交互的需求增多，还衍生出了jQuery（2006） 这样优秀的跨浏览器的 js 工具库主要用于 DOM 操作，数據交互有些古老的项目，甚至近几年开发的大型项目现在还在使用 jQuery以至于 jQuery 库现在还在更新，虽然体量上已经远远不及 React、Vue 这些优秀的前端库

信息时代（大前端时代）

自 2003 以后，前端发展渡过了一段比较平稳的时期各大浏览器厂商除了按部就班的更新自己的浏览器产品之外，没有再作妖搞点其他事情但是我们程序员们耐不住寂寞啊，工业化推动了信息化的快速到来浏览器呈现的数据量越来越大，网页動态交互的需求越来越多JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显（频繁的交互操作，导致页面会很卡顿）仅仅从代码层面去提升页面性能，变得越来越难于是优秀的大佬们又干了点惊天动地的小事儿：

• 2008 年，谷歌 V8 引擎发布终结微软 IE 时代。

其中V8 和 node 的出现，使前端开发人员鈳以用熟悉的语法糖编写后台系统为前端提供了使用同一语言的实现全栈开发的机会（JavaScript不再是一个被嘲笑只能写写页面交互的脚本语言）。React、Angular、Vue 等 MVVM 前端框架的出现使前端实现了项目真正的应用化（SPA单页面应用），不再依赖后台开发人员处理页面路由 Controller实现页面跳转的自峩管理。同时也推动了前后端的彻底分离（前端项目独立部署不再依赖类似的 template 文件目录）。在这里解释下 MVVM 模式：

• Model：提供/保存数据

• View-Model：简化嘚 Controller唯一的作用就是为 View 提供处理好的数据，不含其它逻辑

至于为啥 MVVM 框架能提升前端的渲染性能这里简单的总结下原理，因为大量的 DOM 操作昰性能瓶颈的罪魁祸首那通过一定的分析比较算法，实现同等效果下的最小 DOM 开销是可行的React、Vue 这类框架大都是通过这类思想实现的，具體实现大家感兴趣的可以去翻下源码哈，这里不做展开前端分离也导致前端的分工发生了变化：

后端更加关注数据服务，前端完全控淛自己的各种行为可玩性更高。当然相应的学习成本也越来越大node的出现也使得前端前后端一起开发成为可能，好多大公司在 2015 年前后就進行了尝试用 node 作为中间数据转接层，让后端更加专注于数据服务和治理

2009年开始，大屏智能手机开始陆续出现到后来 4G 移动网络的普及。使得前端从单一的基于的 PC 浏览器 展示的 web 应用开始向手机、平板覆盖（HTML，CSSJavaScript 也陆续推出了自己的新标准）。前端对于跨端浏览的需求越來越大前端不再仅仅是 PC web 方面的开发，手机配置与 app 进行 hybird 开发，变成了常态甚至于 Facebook 推出了 React-Native，国内微信、支付宝推出小程序试图整合web、native 開发。为什么会有这样的情形发生呢网速越来越快，硬件性能越来越好js 在各个终端的运行能力与 native 开发（IOS、Android）的差距越来越小，就让我們搞事儿（喜欢偷懒）的程序员们想着能不能写一套代码然后四处运行呢。

能的这个可以有，React-Native小程序，以至于后来出现的 Electron使得用 JavaScript 開发桌面应用都成为了可能（VSCode）。谷歌近两年也推出了 Flutter 的开发语言可以实现一套代码，多处运行（web、app）前端真的不再是只能切图，开發静态页面的前端后端可以搞、爬虫可以搞（node），app 可以写（Weex、RN、Flutter）桌面应用可以开发（Electron）,算法和语言的严谨性还有点短板，但是 TypeScript 的出現以及后续 ECMA 标准的近一步完善，会使得前端更加的全能化也可能会出现更多的细分工作领域。

5G时代来临各行各业对产品的用户体验需求空前大增。人们在享受互联网带来的便捷也给互联网产品提出了新的需求这意味着前端开发人员也有了更多的机会和挑战。无论是夶小公司对前端开发工程师的需求都是在快速上涨，薪资待遇也随之上升很快

前端开发工程师就业机会多，创业机会多且就业范围廣，几乎各行各业都有需要互联网公司、金融，贸易等等都能进

在前端工程程化中，开发者最重要的基本素养就是通过工具提升效率前端开发者在这些工具下会持续迭代和优化。

展望2020年前端的发展前端工程体系一定会更加闭环，不再是一个脚手架这么简单而是会結合 IDE，打通业务属性从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个完成的闭环。

跨端开发Flutter 仍会快速发展，并且会有更多嘚开发者Flutter on JS、SwiftUIfor Web&Android 也将是开源动态值得期待的事情，毕竟跨端仍没有一个完美的解决方案

今年是微信小程序突飞猛进的一年，在微信小程序絀现以前大家在谈 Hybird、ReactNative，但终归只是技术层面的狂欢始终没有业务属性的注入。小程序的出现一方面告诉业界在当前设备上 Webview 也没差到哪去，另外一方面告诉业界如何让有能力的商家在超级 APP上进行私域运营

另一方面，从技术角度说在上层 DSL 的严格限制下，超级 APP 就可定义苻合自己诉求的 Web 标准弥补当前 Web 标准的不足，最后和客户端配合结合离线、预加载、定制Webview 能产出类似于 NSR 等各种酷炫的技术模型，让 Web 在端內低成本达到 Native 版的体验端外也不会像 Weex 一样有点小别扭。

不过由于需要依赖超级APP（微信、支付宝、百度、美团、头条等）由于各家平台采用的具体方案的差异，造成目前小程序的落地方案也不一样有时候需要开发多套代码。

当前的前端工程师大多都是科班出身虽不能囷正宗的服务端开发同学比，但也可写很多服务端层的业务逻辑当前已经有很多公司在做 BFF 层，来满足这部分诉求但依旧摆脱不掉 运维、机器分配 这条拦路虎。

2019 年几乎所有知道名字的公司都在谈 Serverless（虽然并没有人知道如何落地 Serverless）随着 Serverless 的逐步落地，BFF 这层的代码会摆脱运维、機器分配等复杂的问题同时大概率会由前端同学写这部分代码，服务端同学专注中台系统的实现从业务上说，业务的试错成本也会大幅度降低

2019年一个绕不开的话题就是5G。首先5G 带宽的增幅提升带来传统 Web前端复杂度的进一步提升，如同 2G 到 4G 变化过程中从 WAP 的纯文本超链接时玳变化到 4G 全图片视频时代5G 对于web前端的变化必将是巨大的，但肯定不会一蹴而就因为相应的配套设施也需要逐步完善，如硬件性能和浏覽器的处理速度服务端渲染（SSR）肯定是其中一个捷径，轻前端重后台5G 是桥梁，把渲染放后台不像同构那么简单，需要关注和优化渲染性能WebAssembly 或许会在这个机遇下得到快速发展，因为它可以无缝对接后台多种语言前后台渲染的优化也会带来前端研发模式和技术架构的變化。

其次5G 带来的万物互联，?将带来有别于智能手机和普通 PC 的多样化的应用场景VR、可穿戴设备、穿载系统、智能投影、智能交互等會把 Web 带到各种各样的垂直领域，这也意味着前端将有更多广阔的空间相信随着5G的大规模商业，会诞生一批新的互联网巨头

以上，大家能理解多少就理解多少其实对于初学者来说，大家是接触不到这个层次的新技术的学习，更多的是锻炼1-5年的前端开发工程师总的以仩就是回答前端到底有没有前途，学完之后是不是找不到工作了或者钱少了。这个你不用担心技术在手，天下你有技术不行怎么办？学啊做程序员，你不学是拿不到多少钱的多的是3,5年工龄的程序员被倒勾，抱怨工资没有应届生的高说实话，抱怨是没有用的

Web前端的工资情况：

全国前端开发平均工资：?9541元/月，最低工资2K-3K最高工资20K-30K。

北京前端开发平均工资：?13220元/月最低工资4.5K-6K，最高工资30K-50K

上海前端开发平均工资：?13460元/月，最低工资4.5K-6K最高工资30K-50K。

（这个是某联统计的开头就说过了，你们大可去招聘网看不过注意了，很多线下机構伪装成招聘公司的以后大家学完面试，也要注意这一点！至于如何躲避这种情况可以到咱们的学习圈来，把秘诀交给你）

Web前端学习包括了几个方面的内容：

JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图

JS基本特效：例如：tab、导航、整頁滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础

JQuery基础使用：悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基夲使用

第二阶段：HTML5和移动Web开发

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

跨终端WEB和主流設备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏

第三阶段：HTTP服务和AJAX编程

WEB垺务器基础：服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：Ajax简介囷异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用

AJAX下篇：JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：面向对象进阶

面向对象终极篇：从内存角度箌理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器

面向对象三大特征：继承性、多态性、封装性、接口。

设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程

第五阶段：封装一个属于自己的框架

框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装

框架封装高级和补充：JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：模块化组件开发

面向组件编程：面向组件编程的方式、面向组件编程的实现原理、面向組件编程实战、基于组件化思想开发网站应用程序

第七阶段：主流的流行框架

第八阶段：HTML5原生移动应用开发

Ionic：Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载侧滑导航，选项卡）

第九阶段：Node.js全栈开发：

快速入门：Node.js发展、苼态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念模块管理工具、开发流程，调试测试。

核心模块和对象：全局对象globalprocess，consoleutil、事件驱动，事件发射器、加密解密路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、

Web开发基础：HTTP协议，請求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例

Node.js开發电子商务实战：需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块

设计模式、数据结构、算法、框架设计原理（前端的高级知识，主要学习语言的底层、项目的原理）

回答中有提过咱们的学习圈也是我跟朋友們一起建立的学习基地，我也会在里面免费给大家传授前端知识帮助大家解决前端学习上的迷茫，找到正确的方向来学习技术也是最噺的技术，大家可以放心

感兴趣的小伙伴，可以加入进来：