一个优秀的前端工程师应具备哪些技能?
发布网友
发布时间：2022-04-23 09:17
共15个回答
热心网友
时间：2022-04-02 02:27
第一阶段：
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框架。
热心网友
时间：2022-04-02 03:45
个人总结如下：
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）
热心网友
时间：2022-04-02 05:20
JD
业务背景
淘宝内部最大创新项目之一，大团队已有百人规模，大部分项目处于保密阶段，前景远大
职位描述
1.负责组件库与业务页面开发。
2.带领团队完成技术产品实现。
3.负责大型多应用架构设计。
4.利用前端技术与服务端协同完成团队业务目标。
职位要求
0.掌握图形学，webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。
1.熟练掌握JavaScript。
2.熟悉常用工程化工具，掌握模块化思想和技术实现方案。
3.熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。
4.熟练掌握react生态常用工具，rex/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站尚学堂的直播。希望对你有帮助。
热心网友
时间：2022-04-02 07:11
大部分人会很自然地认为“页面的开发没什么技术含量，很简单”。不仅有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在用……还能有什么问题？是不是真的没什么问题了呢？那么页面开发还有哪些要求，还要做些什么，这里面的水有多深，跟着我往下看

技能一：绘制原型图，实现效果图
优秀的前端开发人员必然熟练掌握一种原型图设计工具，能够将构思通过工具绘制成原型图。同时能够将设计做出的视觉稿通过页面代码的方式表现出来。比如目前最流行，便捷的原型图工具 Mockplus ，历史悠久的Axure等。能完成这两个内容就可以初步进入页面前端的从业者行列了，但这就代表着我们可以胜任页面开发的工作了？不，才刚刚开始！
技能二：与设计师的沟通和项目的参与
各行各业沟通很重要，作为前端开发人员，接触到的最主要的“客户”就是项目设计师。设计师根据原型图出视觉稿，在这个过程中，前端开发人员需要和设计师进行某些效果实现的探讨，比如对低端浏览器渲染效率影响，是否可以通过CSS3实现从而使结构更加清晰，是否能在视觉效果和代码实现中寻求平衡。前端开发有义务对开发出来的页面稳定性和渲染效率负责。在很多情况下，项目进度要求设计与前端开发同步进行，这种情况下就必须尽可能多的参与到项目沟通。

技能三：搭建良好的页面结构
在前端开发中页面结构的编写好比盖房时的打地基，结构的好坏会直接影响到代码的质量、JS开发、后端的开发以及以后页面的扩展、调整和迭代。当拿到设计稿之后不要急于开工，多观察思考。先分析布局，划分框架，然后规划结构，编写代码。
技能四：优美的代码
随着web项目功能越来越复杂，带来的直接后果就是代码的体量变得很庞大。如何进行协同开发和代码的维护是从前端开发开始就要思考的问题。这种情形下需要考虑完善，统一规划，养成一个良好的代码开发习惯。比如：合理的使用标签、良好的注释、清晰的代码结构、准确使用CSS等。优美的代码，清晰的结构能够为下游开发和协同开发降低了不小的沟通成本。
技能五：保障效率
作为项目开发中靠前的一环，前端开发人员一定要有一个认识：尽早完成为项目后续进展争取更多的时间。“工欲善其事，必先利其器”，除了实战经验和代码习惯的形成可以帮助我们提高效率外，想要提高对自己开发的进度掌控能力，还需要学会使用辅助工具帮助提高页面开发的效率，比如使用Less 或 Sass 可以帮助我们拓展和组织CSS，大大提高 CSS的编写效率增加了可维护性。多多发掘一定会找到最合适自己使用的工具。
热心网友
时间：2022-04-02 09:19
前端三大基础技能HTML、CSS、JS自不必说，这是前端吃饭的东西。
TCP/IP、浏览器渲染原理、前端性能优化兼容、PC/M端开发、DOM、BOM、计算机原理（基础，一般软件或计算机出身的都知道）等。
就目前社会上需要的而言，除了基础之外，会要求掌握Vue、react、ng、node等一个或多个知识。隐约已经成为了一个事实的标准，但这些知识你可以看出，都是JS，没错都是JS，所以说JS的掌握程度越高，你学习这些框架越轻松，毕竟这些都是API嘛。
还有就是一些npm、yarn、gulp、webpack等工具的使用。
大部分要求是这样的了，团队的技术栈也是围绕着这些。但是对于应届生其实没这么高的要求，基础掌握大致就是不错的了。毕竟应届生大概是什么水平团队都是知道的。能有个工作三五年的老司机有经验吗？可能性不大，毕竟很多东西是需要项目来淬炼的。
热心网友
时间：2022-04-02 11:44
热心网友
时间：2022-04-02 14:25
优秀的web前端开发工程师要在知识体系上既要有广度和深度。如果你的html、css（包括现在的HTML5+CSS3）基础不会，或者不够扎实，或者JS很好，但布局基础不行……这些表现不仅和优秀的标准相差深远，甚至连合格的web前端都谈不上。一个优秀的web前端至少能实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。我理解的前端工程师的核心价值就是对用户体验的极致追求。
2、具备快速学习的悟性及本能
web发展的很快，甚至可以说这些技术几乎每天都在变化.如果没有快速学习能力，就跟不上web发展的步伐。优秀的前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的web应用程序来体现这种翻天覆地的变化。
3、培养良好的代码规范编写习惯
一名优秀的web前端从程序设计风格，即在编制程序时所表现的特点和思维逻辑就能展现出来。这就要求我们在设计程序中要使用结构合理、清晰，形成良好编程习惯，对程序的要求不仅是可以在机器上执行，也要给出正确的结果，便于程序调试和维护。
热心网友
时间：2022-04-02 17:23
热心网友
时间：2022-04-02 20:38
热心网友
时间：2022-04-03 00:09
热心网友
时间：2022-04-03 03:57
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）
热心网友
时间：2022-04-03 08:02
热心网友
时间：2022-04-03 12:23
JD
业务背景
淘宝内部最大创新项目之一，大团队已有百人规模，大部分项目处于保密阶段，前景远大
职位描述
1.负责组件库与业务页面开发。
2.带领团队完成技术产品实现。
3.负责大型多应用架构设计。
4.利用前端技术与服务端协同完成团队业务目标。
职位要求
0.掌握图形学，webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。
1.熟练掌握JavaScript。
2.熟悉常用工程化工具，掌握模块化思想和技术实现方案。
3.熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。
4.熟练掌握react生态常用工具，rex/react-router等。
5.熟悉各种Web前端技术，包括HTML/XML/CSS等，有基于Ajax的前端应用开发经验。
6.有良好的编码习惯，对前端技术有持续的热情，个性乐观开朗,逻辑性强，善于和各种背景的人合作。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。
热心网友
时间：2022-04-03 17:01
热心网友
时间：2022-04-03 21:56
