想要了解前端从业者的工作职责，需要从一个完整网站应用产生流程入手，一个网站应用从无到有的过程大致如下 ：

1）产品经理与甲方反复沟通交流，逐步确定产品需求完成设计草图；

2）产品经理根据需求和草图进行分析，提交 PRD（需求文档），并与开发人员协商软件功能；

3）若PRD（需求文档）协商通过，后端开发团队进行可行性分析并完善方案；在一定的准备过后，进入后端开发，并给出开发文档；

4）产品经理根据协商通过后的PRD，制作原型和设计文档，并交付设计团队；

5）UI/IxD等不同职责的设计师，根据设计文档和原型产出高保真原型；

6）前端参与视觉和交互的评审，进而完成原型图切图；

7）前端根据后端/接口文档，进行页面构建和开发，并且不断针对数据和功能相关内容与后端沟通和交流；

8）前后端功能实现，数据流通之后，测试人员进行功能测试，并记录bug（漏洞），形成文档并交付bug产生方，前后端修补各自bug ，并重复测试；

9）测试完毕之后的产品，可以交付给甲方。

从以上流程中我们可以看到：Web 应用开发过程中，后端先行，设计师出稿后，前端才能进行开发。

前端确实在造物，他们是做了一个又一个的 Web 应用，只不过设计是别人的，数据也是别人的，自己的自主权被压缩了太多，这导致前端工作看上去像是仅仅将别人的设计实现。在整个团队中，可能功劳不多，但是苦劳肯定不少！

不过，这并不代表前端是“鸡肋”。前端岗位独立出来，恰恰是因为它变得越来越重要！

在整个项目团队中，前端除了写好自己的代码之外，更重要的是团队的润滑剂。一个小型团队一般就五个人：产品经理、设计师、前端、后端和测试。前端不仅要参与需求文档的开发，视觉交互的评审，还要与后端交流，与测试沟通；实际上，整个应用开发过程中，前端处于交流的中心位置。

而在整个应用中，前端就像一道桥梁，沟通用户和软件背后的服务，不仅实现了设计，还赋予整个产品活力。如果网页应用只是单纯地将内容呈现给用户，那跟图文小说没什么区别，比较死板。如果只是单纯从用户身上获取信息，就跟问卷调查没什么区别，缺乏反馈感。

后端需要理解代码逻辑，产品经理需要理解人的逻辑，而前端需要同时理解两者，写的是代码，产出的却不是程序，而是产品！

实际上，没有一成不变的工作，也没有一成不变的职责。就像我在课程开始时提到的一样，前端的概念现在很“大”，并且一直在变化；提升自己，保持精进，跟紧潮流，才是你真正的职责！

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。

互联网行业对前端的需求量确实大，因为移动端应用、前台PC、游戏、中台、桌面应用、VR、智能电视、AI、小程序等领域，都需要前端。

而前端的技术都是基于JavaScript编程语言开发，主流框架用到的也无非是Vue、React等，可以说前端是“一招鲜，吃遍天”。

建议你先了解一下前端的整个框架，然后再对标企业的应聘要求去学习哦~

新手入门： HTML5+CSS3+实战项目 → 移动web

JavaScript阶段： JavaScript基础 → JavaScript核心Web APIs → 数据交互 & 异步编程Ajax\Git

VUE开发： 框架前置课Nodejs&es6 → Vue2+Vue3全套

React + 微信小程序： React → TypeScript → 微信小程序

常见前端开发工程师职位职责要求：

（1）使用Div+css并结合Javascript负责产品的前端开发和页面制作。

（2）熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用DIV+CSS，提供针对不同浏览器的前端页面解决方案 。移动HTML5的性能和其他优化，为用户呈现最好的界面交互体验和最好的性能。

（3）负责相关产品的需求以及前端程序的实现，提供合理的前端架构 。改进和优化开发工具、开发流程、和开发框架

（4）与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作 ；能独立完成功能页面的设计与代码编写，配合产品团队完成功能页面的需求调研和分析。

（5）了解服务器端的相关工作，在交互体验、产品设计等方面有自己的见解。

资深前端开发工程师

相比较“前端开发工程师”而言，更加资深，工作职责更大。一般而言，资深前端开发工程师需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件，熟练使用CSS+XHTML完美输出视觉界面。同时还要对Web项目的前端实现方案 提供专业指导和监督并在日常工作之中对新人及相关开发人员进行前端技能的培训和指导。另外，还要跟踪研究前端技术，设计并实施全网前端优化。HTML5、node.js（JavaScript编程的后台语言）兴起，要求资深前端熟悉后端，并且要在商业模式、代码架构思想等维度去整体考虑前端的全局布局。

前端架构师

前端架构师更偏管理，但职责要求不仅限于管理。前端架构师需要带领组员实现全网的前端框架和优化，创建前端的相应标准和规范，完善并推广和应用自己的标准和框架。同时，还要站在全局的角色为整个网站的信息架构和技术选型提供专业意见和方案。

前端工程师的四条职业发展路 径，以及发展路径中涉及岗位的工作要求

路径 1：前端开发工程师 → CTO（首席技术官）

如果你是一名技术型选手，并致力于在技术领域长期深耕，可以考虑选择这条职业发展路径。

从一名前端工程师向CTO（首席技术官）的发展路径是：前端开发工程师→全栈工程师→系统架构师→CTO。

全栈工程师（15K~30K）

所谓全栈工程师，是指掌握多种技能，不仅能够胜任前端，而且还能够胜任后端，可以利用多种技能独立完成产品的工程师。

通过前文的介绍相信大家已经了解到，前端工程师负责向用户展示信息，接受并处理用户的交互和输入。而绝大多数要向用户展示的信息，以及对用户输入信息的保存都是由后端程序员来负责的。

作为前端工程师，在深耕前端技术的同时，如果有余力，可以考虑学习一些后端技术。我们对后端技术不一定要掌握得非常精深，但是如果对后端开发的基本模式有所了解，并能够参与到后端项目的研发工作。对我们拓宽未来的职业发展道路是有帮助的。

要做前端开发，现在普遍使用的编程语言就是JavaScript。而要做后端开发，可以选择的语言就比较多了，例如：Java、Python、PHP、GoLang等都可以。同时，随着前端技术的发展，基于Node.js同样可以使用JavaScript来做后端开发。

后端工程师除了要选择并学习一门编程语言之外，还需要学习数据库以保存数据，常见的关系型数据库有：MySQL，Oracle等，还有NoSQL非关系型的数据库：Redis、MongoDB等。

对于创业公司来说，全栈工程师的价值非常大，全栈工程师可以说是一个多面手，各种活都能一肩挑，独挡多面的万金油。但是，如果一个公司不太懂全栈工程师的价值，那么全栈工程师的地位将会很尴尬，说得不好听一 点，全栈工程师就是什么都会，什么都不会。技术有两个发展方向，一种是纵向一种是横向的，横向的是瑞士军 刀，纵向的是削铁如泥的干将莫邪。这两个方向都没有对与错，发展到一定程度都会相互溶合。

系统架构师（30K~60K）

系统架构师是一个最终确认和评估系统需求，给出开发规范，搭建系统实现的核心构架，并澄清技术细节、扫清主要难点的技术人员。

系统架构师主要着眼于系统的“技术实现”，因为 Ta 们是特定的开发平台、语言、工具的大师，对常见应用场景能给出最恰当的解决方案，同时要对所属的开发团队有足够的了解，能够评估自己的团队为实现特定的功能需求所需要支付的成本。

系统架构师负责设计系统整体架构，从需求到设计的每个细节都要考虑到，把握整个项目，使设计的项目尽量效率高，开发容易，维护方便，升级简单等。

要想成为一名系统架构师，通常需要 5~8 年的工作积累和沉淀。因为作为软件开发的设计架构师，必须拥有 一定的编程技能，同时有高超的学习新的架构设计、程序设计技能。另外，还需要了解一定的硬件、网络、服务器 的基本知识。

友情提示，如果忽视了程序设计能力的持续更新，是很难成为一名优秀的系统架构师的。

路径 2：前端开发工程师 → 产品经理

前端工程师的主要工作是“做页面”，而页面呈现的是否美观、流畅，用户交互的体验是否友好，用户输入操作是否便捷都是由我们前端工程师来负责的。

如果你非常注重用户体验，同时又不希望自己长期在编程这个领域发展，可以考虑选择这条职业发展路径。 从一名前端工程师向产品经理的发展路径是：前端开发工程师 → 产品经理。

产品经理（10K~50K）

产品经理是企业中专门负责产品管理的职位，负责市场调查并根据产品、市场及用户的需求，确定开发何种产品，选择何种业务模式、商业模式等。同时还负责推动相应产品的开发组织，根据产品的生命周期，协调研发、营销、运营等，确定和组织实施相应的产品策略，以及其他一系列相关的产品管理活动。

产品经理是产品牵头人，一般来说，产品经理是负责并保证高质量的产品按时完成和发布的专职管理人员。他的任务包括倾听用户需求；负责产品功能的定义、规划和设计；做各种复杂决策，保证团队顺利开展工作及跟踪程序错误等。总之，产品经理全权负责产品的最终完成。另外，产品经理还要认真搜集用户的新需求、竞争产品的资料，并进行需求分析、竞品分析以及研究产品的发展趋势等。

作为一名前端工程师，在工作中与产品经理打交道的频率是非常高的。页面怎么做更好看？怎么做用户体验更 好？都会经常和产品经理反复地沟通确认。因此，随着前端开发的工作积累，我们会在不知不觉中积累很多产品经 理相关的知识。

如果要转行做产品经理，作为懂技术的我们有一个非常大的优势——我们知道每个页面会用到什么技，实现难 度如何。同时我们还知道需要和哪些岗位的同事协同，如：交互设计师、Java开发工程师等。

因此，如果你对市场特别敏感，对产品设计特别敏感，同时又希望可以有更多的人协同、高效地把自己设计的 产品开发出来，并且可以给企业创造更大的价值。可以在参与了几个前端项目，有了一定前端开发储备之后，考虑 选择产品经理这条职业发展路径。

路径 3：前端开发工程师 → 部门经理

如果你对组织协调比较有天分，并且喜欢指点江山的感觉，可以考虑选择这条职业发展路径向管理岗位发展。

从一名前端工程师向部门经理的发展路径是：前端开发工程师 → 软件项目经理 → 部门经理。

软件项目经理（15K ~ 40K）

软件项目经理，通常是部门内的核心骨干，无论是技术研发能力，还是项目管理能力都是团队内的佼佼者。 如果要立项研发某一个项目，通常会任命一名核心骨干做项目经理，以保证该项目研发工作的顺利完成。随着 项目研发工作的完成，项目经理的任命也会自动被取消。

在项目实施的过程中，项目经理通常需要对项目的成本、人员、进度、质量、风险、安全等进行准确的分析和 有效的管理，从而保证项目研发工作的顺利完成。

通俗地讲，项目经理既要自己能干，又要有能力协调大伙一起干，同时还需要有强烈的时间意识和成本控制意识。如果公司的业务较多，在一个部门内，通常会有多个项目经理，因为项目经理就是随项目而生的。但是，在部门内做过项目经理通常是通向高阶管理岗位的必经之路。这是因为，一名优秀的项目经理带领团队成员成功地完成过一个又一个项目，才会得到团队中越来越多的人支持和认可，也才有可能在企业中得到更多发展的空间和机会。

部门经理

部门经理，是部门的核心管理者和责任人。部门经理最重要的工作就是根据公司的战略发展目标确定部门的核 心业务指标，然后再对目标进行拆解并制定相应工作计划。

在日常的管理工作中，部门经理对内要组织部门员工按计划执行工作，对外要与其他部门协同协调调配资源。 如果你曾经在部门中担任过多个项目的项目经理，并且优秀地带领团队完成过一个又一个项目，相信会在部门中拥有良好的群众基础和公信力。随着公司业务发展，一旦部门经理的职位出现岗位空缺，任命你作为部门负责人的几率会很高。

简而言之一句话，项目经理负责带领团队冲锋陷阵，完成一场又一场战斗，部门经理则是带领整个部门军团作战，达成公司的战略发展目标。

路径 4：前端开发工程师 → 创业者

如果你有创业的雄心，又不甘心寄人篱下，希望通过自己的努力打拼出一片天下，可以考虑选择合伙创业或自主创业这条职业发展路径。不过，要创业光有雄心是远远不够的，还需要很多很多合适的资源，例如：匹配的能力、优秀的伙伴、合适的市场机会等等。

创业是一个非常大的话题，很难用有限的篇幅阐述清楚。不过，在我们的老学员中，是有一些选择创业的，其中有成功的，也有失败的，但无论成功与失败，只要投入了，都是人生的一段宝贵经历和财富。

在此，准备一句话献给准备创业的你——提升自我，时刻准备，在这个世界上，最值得的投资就是提升自己。关于创业，要谋定而后动，在能力没有达到，机会没有成熟之前，最好不要轻言创业。

前端工程师的发展前景

JavaScript是一个全面的、简单的、面向结果的Web开发语言之一，可以说对前端工程师非常友好。

相对于后端编程语言的难度，前端JavaScript相对要容易入门一些，但是这并不意味着企业对前端工程师没有高要求。相反，随着人工智能、5G等领域的高速发展，对前端工程师的要求也逐渐变高，这是在某网站上找的任意招聘需求：

从招聘需求中，可以看到，企业对前端工程师的要求一定不是简单的页面制作者。当然，企业也是十分愿意用高薪来吸引优秀前端工程师的！

据职友集最新统计，前端开发工程师在北京的平均薪资是20.5k。

 

随着工作经验的增长，薪资当然也会越来越高，一般3-5年工作经验的便能达到30k-40k！

前端开发工程师薪资高，相对于后端入门更简单，是不是意味着现在前端工程师人才已经饱和了呢？

大错特错！据中国软件行业协会教育与培训委员会发布的前端行业报告显示，我国前端开发工程师每年新增需求量为16万人，其中初级工程师约为4万人，中高级工程师约为12万人！

可以说，现在选择前端工程师，便是一个绝好的时机！

 

阶段一基础入门：入门前端工程师的必备技能，能够完成PC端和移动端的静态页面，具备1:1还原设计图的能力。

阶段二技术进阶：进阶成为合格的初级前端工程师，能够实现页面的交互效果，实现与后端的数据联通。

阶段三Vue开发：成为中高级前端工程师的核心能力，能够实现企业级项目的功能需求，并具备内容管理系统、企业中台以及电商平台的项目经验。

阶段四React & 小程序开发：成为中高级前端工程师的进阶技能，能够满足市面上90%+公司的招聘需求，并具备网页端和移动端项目研发经验。

阶段五面试就业：能够完善简历，轻松应对企业面试场景与面试题目，成功获得心仪的offer。

第一阶段 基础入门

学前导读：为零基础学员量身定制，教你搭建PC端和移动端静态页面，让你从小白升级成网页“化妆师”，轻松掌握 HTML5 和 CSS3 相关知识。

1.Web前端零基础入门HTML5+CSS3+前端项目

课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。

web前端开发入门教程，前端零基础html5+css3+前端项目视频教程

2.移动web开发实战

本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每天课程都有完整的案例或项目， 让学生学以致用。

web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）

第二阶段 技术进阶

学前导读：让网页“动”起来，带你学会前端工程师核心语言——JavaScript，实现网页数据交互与动画效果，并实现与后端数据的联通。

1.JavaScript深入浅出-0基础入门神器

学完本课程你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门

2.JavaScript核心之Web APIs

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作

3.数据交互&异步编程-前端进阶Ajax零基础入门

本课程案例丰富，知识点配套的案例丰富多样，满足学生学习的兴趣 ；深入原理，会深入讲解如何封装自己的模板引擎和 Ajax 函数；涵盖广泛，涵盖了 Ajax、跨域、JSONP、模板引擎、节流防抖、XHR Level2 等常用技术。

AJAX零基础到精通_整合Git核心内容全套教程

第三阶段 VUE开发

学前导读：掌握多行业解决方案，项目开发拿来即用，帮你搞定前端工程师必备热门框架Vue.js。

1.前端高级Node.js零基础入门教程

本套课程作为框架前置课，重点为学生铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点，为学习后面的 Vue 课程夯实基础。同时，本课程涵盖了 MySQL 数据库、API 接口项目开发等后端内容，拓宽了学生的知识面，为前端学生构建了前后端完整的知识体系，助力学生更好地发展。

Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs六大实战案例详解

2.前端框架Vue2+Vue3全套视频

历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！

Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

第四阶段 React&小程序开发

学前导读：React帮你解锁中高级前端工程师能力地图，多端项目让你满足90%+企业需求。

1.前端React精品教程

React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。

前端React精品教程， React零基础入门到原理详解

系统的学习网页数据交互的 Ajax 技术，建立前后端交互的知识体系，为学生夯实网络编程的基础，为后期高级课程的学习做好铺垫。

2.手把手快速带你开发微信小程序

本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。

前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)