一个优秀的前端工程师应具备哪些技能？ 个合格的Web前端工程师，需要具备哪些技能

第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

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

JS基本特效：

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

JS高级特征：

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

JQuery：基础使用

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

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.

CSS3:

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

Bootstrap:

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

移动Web开发：

跨终端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框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

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

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用库：

React.js、Vue.js、Zepto.js。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

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

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：

Node.js全栈开发：

快速入门：

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

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。

Web开发基础：

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

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

个人总结如下：

1、熟练HTML和CSS，是熟练哦；

2、学习ES5，进而ES6，即使浏览器兼容存在问题，但前端工程化时用得着；

3、PWA渐进式web应用，百度一下；

4、SPA，不是桑拿spa，而是单页面应用，及相关理念和JS框架，如MVVM模式，angular、vue.js

5、http网络协议，Ajax及json；

6、Bash或powershell命令，node和npm包管理/yarn，前端构建工具（如gulp、webpack）

不同公司，不同岗位，不同业务背景对优秀前端的要求可能会有差异，我们以阿里巴巴淘系技术部的一则JD为例，来拆解一下，不同级别的前端工程师应该具备什么样的技能。
JD
业务背景
淘宝内部最大创新项目之一，大团队已有百人规模，大部分项目处于保密阶段，前景远大

职位描述
1.负责组件库与业务页面开发。
2.带领团队完成技术产品实现。
3.负责大型多应用架构设计。
4.利用前端技术与服务端协同完成团队业务目标。

职位要求
0.掌握图形学，webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。
1.熟练掌握JavaScript。
2.熟悉常用工程化工具，掌握模块化思想和技术实现方案。
3.熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。
4.熟练掌握react生态常用工具，redux/react-router等。
5.熟悉各种Web前端技术，包括HTML/XML/CSS等，有基于Ajax的前端应用开发经验。
6.有良好的编码习惯，对前端技术有持续的热情，个性乐观开朗,逻辑性强，善于和各种背景的人合作。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。
首先，总览全部的要求，会发现这个职位虽然提到了3d相关的技能，但是大部分却是应用开发相关的能力，所以这个职位并不是想找专业的3d领域同学，而是需要一个工程化能力强，对3d有了解的同学。
0.掌握图形学，webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。
初级：
学习过图形学相关知识，知道矩阵等数学原理在动画中的作用，知道三维场景需要的最基础的构成，能用threejs搭3d场景，知道webgl和threejs的关系。
知道canvas是干嘛的，聊到旋转能说出canvas的api。
知道css动画，css动画属性知道关键字和用法(换句话说，电话面试会当场出题要求口喷css动画，至少能说对大概，而不是回答百度一下就会用)。
知道js动画，能说出1~2个社区js动画库，知道js动画和css动画优缺点以及适用场景。
知道raf和其他达到60fps的方法。
中级：
如果没有threejs，你也能基于webgl自己封装一个简单的threejs出来。
聊到原理能说出四元数，聊到鼠标操作能提到节流，聊到性能能提到restore，聊到帧说出raf和timeout的区别，以及各自在优化时候的作用。
知道怎样在移动端处理加载问题，渲染性能问题。
知道如何结合native能力优化性能。
知道如何排查性能问题。对chrome动画、3d、传感器调试十分了解。
高级：
搭建过整套资源加载优化方案，能说明白整体方案的各个细节，包括前端、客户端、服务端分别需要实现哪些功能点、依赖哪些基础能力，以及如何配合。
设计并实现过前端动画引擎，能说明白一个复杂互动项目的技术架构，知道需要哪些核心模块，以及这些模块间如何配合。
有自己实现的动画相关技术方案产出，这套技术方案必须是解决明确的业务或技术难点问题的。为了业务快速落地而封装一个库，不算这里的技术方案。如果有类似社区方案，必须能从原理上说明白和竞品的差异，各自优劣，以及技术选型的原因。
更多的面试知识可以看看b站尚学堂的直播。希望对你有帮助。

随着互联网快速成为日常工作生活的一部分，对于从事互联网的职业也有了更加清晰的定位：设计，前端开发，后端，编辑，运营等等。在这里我们以前端开发的人员的角度来看看应该掌握哪些技能。

大部分人会很自然地认为“页面的开发没什么技术含量，很简单”。不仅有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在用……还能有什么问题？是不是真的没什么问题了呢？那么页面开发还有哪些要求，还要做些什么，这里面的水有多深，跟着我往下看


技能一：绘制原型图，实现效果图

优秀的前端开发人员必然熟练掌握一种原型图设计工具，能够将构思通过工具绘制成原型图。同时能够将设计做出的视觉稿通过页面代码的方式表现出来。比如目前最流行，便捷的原型图工具 Mockplus ，历史悠久的Axure等。能完成这两个内容就可以初步进入页面前端的从业者行列了，但这就代表着我们可以胜任页面开发的工作了？不，才刚刚开始！

技能二：与设计师的沟通和项目的参与

各行各业沟通很重要，作为前端开发人员，接触到的最主要的“客户”就是项目设计师。设计师根据原型图出视觉稿，在这个过程中，前端开发人员需要和设计师进行某些效果实现的探讨，比如对低端浏览器渲染效率影响，是否可以通过CSS3实现从而使结构更加清晰，是否能在视觉效果和代码实现中寻求平衡。前端开发有义务对开发出来的页面稳定性和渲染效率负责。在很多情况下，项目进度要求设计与前端开发同步进行，这种情况下就必须尽可能多的参与到项目沟通。


技能三：搭建良好的页面结构

在前端开发中页面结构的编写好比盖房时的打地基，结构的好坏会直接影响到代码的质量、JS开发、后端的开发以及以后页面的扩展、调整和迭代。当拿到设计稿之后不要急于开工，多观察思考。先分析布局，划分框架，然后规划结构，编写代码。

技能四：优美的代码

随着web项目功能越来越复杂，带来的直接后果就是代码的体量变得很庞大。如何进行协同开发和代码的维护是从前端开发开始就要思考的问题。这种情形下需要考虑完善，统一规划，养成一个良好的代码开发习惯。比如：合理的使用标签、良好的注释、清晰的代码结构、准确使用CSS等。优美的代码，清晰的结构能够为下游开发和协同开发降低了不小的沟通成本。

技能五：保障效率

作为项目开发中靠前的一环，前端开发人员一定要有一个认识：尽早完成为项目后续进展争取更多的时间。“工欲善其事，必先利其器”，除了实战经验和代码习惯的形成可以帮助我们提高效率外，想要提高对自己开发的进度掌控能力，还需要学会使用辅助工具帮助提高页面开发的效率，比如使用Less 或 Sass 可以帮助我们拓展和组织CSS，大大提高 CSS的编写效率增加了可维护性。多多发掘一定会找到最合适自己使用的工具。

    前端三大基础技能HTML、CSS、JS自不必说，这是前端吃饭的东西。

    TCP/IP、浏览器渲染原理、前端性能优化兼容、PC/M端开发、DOM、BOM、计算机原理（基础，一般软件或计算机出身的都知道）等。

    就目前社会上需要的而言，除了基础之外，会要求掌握Vue、react、ng、node等一个或多个知识。隐约已经成为了一个事实的标准，但这些知识你可以看出，都是JS，没错都是JS，所以说JS的掌握程度越高，你学习这些框架越轻松，毕竟这些都是API嘛。

    还有就是一些npm、yarn、gulp、webpack等工具的使用。

    大部分要求是这样的了，团队的技术栈也是围绕着这些。但是对于应届生其实没这么高的要求，基础掌握大致就是不错的了。毕竟应届生大概是什么水平团队都是知道的。能有个工作三五年的老司机有经验吗？可能性不大，毕竟很多东西是需要项目来淬炼的。

一个优秀的前端工程师应该具备什么样的技能~

不同公司，不同岗位，不同业务背景对优秀前端的要求可能会有差异，我们以阿里巴巴淘系技术部的一则JD为例，来拆解一下，不同级别的前端工程师应该具备什么样的技能。
JD
业务背景
淘宝内部最大创新项目之一，大团队已有百人规模，大部分项目处于保密阶段，前景远大

职位描述
1.负责组件库与业务页面开发。
2.带领团队完成技术产品实现。
3.负责大型多应用架构设计。
4.利用前端技术与服务端协同完成团队业务目标。

职位要求
0.掌握图形学，webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。
1.熟练掌握JavaScript。
2.熟悉常用工程化工具，掌握模块化思想和技术实现方案。
3.熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。
4.熟练掌握react生态常用工具，redux/react-router等。
5.熟悉各种Web前端技术，包括HTML/XML/CSS等，有基于Ajax的前端应用开发经验。
6.有良好的编码习惯，对前端技术有持续的热情，个性乐观开朗,逻辑性强，善于和各种背景的人合作。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。
首先，总览全部的要求，会发现这个职位虽然提到了3d相关的技能，但是大部分却是应用开发相关的能力，所以这个职位并不是想找专业的3d领域同学，而是需要一个工程化能力强，对3d有了解的同学。

主要有六大类：
1、HTML5：HTML是超级文本标记语言，是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。HTML5是由万维网发布的最新的语言规范，是开放的Web网络平台的奠基石，所以做Web前端，精通HTML5是必须要掌握的一项技能。
2、CSS3：CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3对于Web前端整个页面的设计是必备的技能。
3、JavaScript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能，为用户提供更流畅美观的浏览效果。
掌握了JavaScript，你就可以给你的网页增加各种不同的动态效果，比如百叶窗特效，广告切换特效，浮动广告特效，上下无缝滚动特效等等。
4、jQuery：JQuery，顾名思义也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。它是轻量级的JS库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），JQuery2.0及后续版本将不再支持IE6/7/8浏览器。
JQuery使用户能更方便地处理HTML、EVENTS、实现动画效果，并且方便地为网站提供AJAX交互。熟练掌握JQuery会让你更好的使用JavaScript。
5、AJAX：AJAX即“Asynchronous JavaScript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX开发人员必须理解传统的MVC架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑C/S环境的外部和使用AJAX技术来重定型MVC边界。最重要的是，AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。
一旦UI设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。实现网站交互必须熟练掌握AJAX。
6、Bootstrap：Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。时刻学习最近的前端框架也是Web前端工程师的必备技能哦！

想要成为一名前端开发工程师需要什么条件?
答：掌握网页设计和布局：了解网页设计原则和用户体验，能够进行网页布局和设计，熟悉响应式设计和移动端开发。良好的沟通能力：作为前端开发工程师，你需要与设计师、后端开发人员和产品经理等团队成员进行有效的沟通和协作。持续学习的能力：前端技术更新迅速，你需要保持学习的状态，关注最新的前端开发趋势和技术，...

想成为一名合格的前端工程师,需要掌握哪些技能?
答：1、打好基础。前端工程师基础是Html+css+js，先认真把基础学好，特别是Js，打牢基础，才能平稳致远。2、进阶：掌握Vue或React库。这两个库目前已经成为Web开发的主流工具，是优秀的前端工程师必须要掌握的。3、积累作品、增长实战经验。把自己学到的知识不断应用到实践中，不断提高自己的前端实战经验并...

前端工程师需要拥有哪些技能?
答：1.开发语言 HTML发展历史有二十多年，历经多次版本更新，HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单，不就是制作网页 嘛，其实不然，web前端需要掌握的核心语言xHTML+CSS+JavaScript，JavaScript作为最难的语言之一，许多编程高手也不敢妄 自菲薄自封精通。由于JavaScript与html的...

Web前端工程师必备技能盘点
答：4、jQuery JQuery，顾名思义也就是JavaScript和查询(Query)，即是辅助JavaScript开发的库。它是轻量级的JS库 ，它兼容CSS3，还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)，JQuery2.0及后续版本将不再支持IE6/7/8浏览器。以上就是Web前端工程师必备技能，小编在这里建议，...

想要成为一名前端开发工程师需要什么条件?
答：成为一名前端开发工程师，需要具备扎实的编程基础、良好的用户体验意识、持续学习的能力和团队合作精神。首先，扎实的编程基础是成为前端开发工程师的必要条件。这包括熟悉HTML、CSS和JavaScript等前端基础技术，能够熟练运用这些技术来构建用户界面和交互体验。此外，还需要了解前端开发框架和库，如React、Vue或...

前端开发工程师需要具备哪些能力
答：前端开发工程师需要具备创新能力，高超的技术创造力和想象力，良好的沟通能力和不断学习的能力。当然专业能力也是非常重要的，具体包括但不限于以下：一、HTML5+CSS3；二、JS交互设计；三、Node开发；四、前端框架；五、小程序与APP开发等。一、HTML5+CSS3HTML是网页的主要组成部分，网页的本质就是HTML...

web 前端工程师有哪些需要必须掌握的技能?
答：Web前端工程师需要掌握的技能包括：1. 前端基础：HTML、CSS、JavaScript是Web前端开发的三大基础知识，掌握这些技能是必备的核心技能。HTML+CSS可以做出简单的静态页面，而JavaScript可以提供更好的用户体验。在历经多次版本更新之后，HTML5和CSS3的出现又是一次革新。但对于Web前端开发从业者来说掌握HTML、CSS...

前端开发工程师需要具备哪些能力
答：前端开发工程师需要具备能力如下：一、三大基础技能，js、css、html这三项技能是前端工程师能力中的基础，任何框架、工具、库都是基于这三者只上的。这是硬实力，决定了整个前端生涯能够达到的高度，以及在后面的技术栈拓展中的顺畅程度和能够达到的效果。二、工程能力要有，前端工程师首先是个工程师，做...

想成为前端开发工程师,需要掌握哪些技术?
答：1、《jsdom编程艺术》可以帮你学习原生js，作为一名前端原生js是基础必须掌握 2、《锋利的jquery》当你工作了，你需要快速的出成果，不能用原生js去开发，因为原生js有兼容性问题，那么jquery帮你做了解决了这些问题，它提供了很多的方法供你操作dom 3、《js高级程序设计》这本书建议你看5遍以上，掌握...

一个优秀的前端工程师应具备哪些技能?
答：第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件...