阅读量:0
WEB标准包括HTML、CSS和JavaScript等核心技术，是Web前端开发工程师必备的技能。
Web前端开发工程师必备技术列表
1、User Interface
PhotoShop/Fireworks Design
a级：配合美工将草图形成具体的符合WebPage的设计。
b级：有快速制作分层高品质PSD、PNG的能力。
c级：能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码。
Flash Design
a级：基本动画效果。
b级：复杂的交互体系设计，了解第三方swf辅助设计软件。
c级：复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力，精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等）。
2、Browserside (Web Application)
XHTML/CSS
a级：基本的layout实现。
b级：严格跨平台的layout实现。
c级：优雅的HTML code，尽可能符合标准并有SEO的考虑因素，在任何平台、浏览器下基本保持一致，不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决，能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为"一切都已经准备就绪了"，而不是"捉襟见肘"。
JavaScript/Ajax/DOM
a级：基本的DOM操作，了解AJAX，可以实现数据通信。
b级：基本的DOM操作，能写高效率的OOP代码，以降低维护成本。
c级：基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码。
Flash Developement
a级：基于Timeline的ActionScript操作，能实现简单交互。
b级：掌握a外，能实现数据层通信（与服务器以及本地SharedObject）。
c级：精通AS13，能根据需求进行各类RIA开发，无论是要求支持FlashPlayer8的，还是FlashPlayer9的，都能做到开发效率最高、灵活性最大（比如对HTML层的接口设计，等等）。
3、Clientside (Desktop Application)
Apollo
a级：产品级的封装，基本技术了解（如何打包、如何加入HTML和JavaScript等）。
b级：掌握a的同时，能利用Apollo的API独立设计、开发OS的文件I/O功能。
c级：掌握基本技能的同时，对"3D概念体系"有所认知，这里"3D"即：Design（设计）、Development（开发）、Deploy（产品部署），能用Apollo。
Windows Presentation Foundation、WPF/E（Silverlight）
待定，欢迎补充。
4、增补：Serverside
本来列举了"1、Server端简单的技术、脚本"和"2、MediaServer（Red5）接口"作为"Web前端工程师技能列表"的一种（服务器、数据逻辑层技能的）评判标准，但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑，确实，要掌握好上述的展现层技能不是意见容易的事情，而且前端工程师的确非常辛苦，站在另一方面来说，辛苦的原因是什么，我不知道在你日夜奋战div+CSS的时候思考过没有，就我的经验，前端的辛苦在于以下几个方面：
重复劳动多，大量的div+css都是重复的，即便可以复制粘贴，但几千行的div海洋中去寻找一个入口恐怕都非常痛苦。
需求变更多，往往你折腾几个小时终于把跨平台问题解决好了，而且在IE6、7和Firefox下面都能显示同样的效果了，甚至连JavaScript交互都已经快搞定了，突然上面说需求要变，这无疑是莫大的痛苦。
也许表面上看，这跟Server端技能无关，但我觉得有好的Server端的意识，一定会有所帮助（当然不可能解决所有的问题），毕竟信息结构和数据库是密切相关的，而Server是连接数据库的唯一渠道（至少大多数B/S应用是如此），掌握Server端的基本技能，对于同逻辑层开发人员设计接口是非常重要的，而且HTML表现层在开发时与数据的分离，也与Server端的各种模板技术有关，例如PHP中的Smarty模板（我曾经用的）、jsp的model2概念等等，HTML结构如何设计，如何让HTML重用，甚至在HTML层进行OOP的开发（我现在在新产品线中设计的前端开发流程），都需要Server端的支持，最起码，你要告诉php程序员你需要什么，如果你完全对PHP一无所知的话，那也无从谈起了。
对于创业团队，往往人手非常有限，为了让运营成本降到最低，所有的技术人员都有义务对Server端技术有所了解，如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话，那实在是增加了整个公司的运营成本。
我认为，可以不了解技术细节，但应该知道原理，最好能掌握一两套设计思想（毕竟数据逻辑都在这里走，光看HTML和JavaScript，对人的见识还是有局限的，这种局限限制了我自己很久的时间），那将是一比宝贵的财富。
5、增补：Mobileside
看到很多朋友留言说前端工程师没前途，我在想，同时掌握移动设备的技能是否也是拓展前途的一个必要性？这里再多说几句，关于技术人员的前途，目前在国内确实得用"惨淡"来形容，浮躁的氛围让技术人才往往过早放弃了自己的技术生涯，而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生（我身边太多了，恩，不说具体细节了，呵呵），作为一个技术人员，开发人员，在保持纯粹地敬业心态（这是前提，这么没有，啥也别谈）外，更要学会如何保护自己，如何壮大自身，社会不会同情你，只有你自己才能保护你自己。
Flashlite（待定，欢迎补充）。
Java？。
FAQs
1、Web前端开发工程师需要掌握哪些核心技能？
Web前端开发工程师需要掌握的核心技能包括：PhotoShop/Fireworks Design, Flash Design, XHTML/CSS, JavaScript/Ajax/DOM, Flash Development, Apollo, Windows Presentation Foundation/WPF/E (Silverlight), 以及基础的Serverside技能。
2、为什么Web前端开发工程师需要掌握Serverside技能？
虽然Web前端开发工程师的主要职责是处理前端展现层的工作，但掌握一些Serverside技能有助于更好地理解整个项目的架构和数据流，从而更有效地与后端开发人员协作，减少沟通成本和误解。
3、Web前端开发工程师如何应对频繁变动的需求？
面对频繁变动的需求，Web前端开发工程师应保持灵活的心态，利用版本控制工具来管理代码变更，并与项目管理者和其他团队成员保持良好的沟通，确保需求的变更能够得到有效的记录和执行。
4、如何评估一个Web前端开发工程师的技能水平？
评估一个Web前端开发工程师的技能水平可以从其掌握的核心技能的熟练程度、解决问题的能力、项目管理能力以及对新技术的学习态度等多个方面进行综合考量。
| 技术领域 | 必备技术 |
| HTML | HTML5、语义化标签、响应式设计、多媒体标签、表单处理、微数据、ARIA无障碍访问 |
| CSS | CSS3、选择器、盒子模型、布局（Flexbox、Grid）、动画、过渡、伪元素、媒体查询 |
| JavaScript | ES6+新特性、DOM操作、事件处理、异步编程（Promise、async/await）、库（jQuery、Vue.js、React、Angular） |
| 前端框架 | React、Vue.js、Angular、Backbone.js、Ember.js 等 |
| 前端构建工具 | Webpack、Gulp、Grunt、Rollup、Parcel 等 |
| 版本控制 | Git、GitHub、GitLab、Git分支管理、Git钩子等 |
| 前端测试 | Jest、Mocha、Jasmine、Cypress、Selenium 等 |
| 版本控制 | npm、Yarn、包管理、依赖管理、包锁定等 |
| 服务器端渲染 | Nuxt.js、Next.js、服务器端渲染技术（如SSR） |
| API交互 | Fetch API、Axios、JSONP、RESTful API、GraphQL 等 |
| 设计与原型 | Sketch、Figma、Adobe XD、InVision、Axure 等 |
| 性能优化 | 图片优化、代码优化、懒加载、缓存策略、性能监控工具（Lighthouse、WebPageTest） |
| 响应式设计 | Bootstrap、Foundation、Material Design、Flexbox、Grid等 |
| 安全 | XSS、CSRF、HTTPS、安全头部、内容安全策略（CSP）等 |
| 国际化与本地化 | i18next、reactintl、国际化API、本地化格式化等 |
| 前端工程化 | TypeScript、TypeScript工具链、ESLint、Prettier 等 |
| 跨平台开发 | React Native、Flutter、Apache Cordova 等 |
| 移动端开发 | CSS Mobile、Media Queries、viewport、触摸事件等 |
