一、何为Web前端工程师？
图1、前端技术MSS
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。 JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。很 多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，整整优秀的是那些理解库背后的机制，特别是 能够徒手写出一个自己的库的人。真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。
图2、Web前端工程师知识架构
前端工程师
- 浏览器
- IE6/7/8/9
- Firefox
- Chrome/Safari/Opera
- 编程语言
- JavaScript/Node.js
- JavaScript语言精粹
- 切页面
- HTML/HTML5
- CSS/CSS3
- PhotoShop/Paint.net
- 开发工具
- IDE
- VIM/Sublime Text2
- Notepad++/EditPlus
- WebStorm
- 调试工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- 版本管理
- Git/SVN
- Github/Bitbucket/Google Code
- IDE
- 代码质量
- Coding style
- JSLint/JSHint
- CSSLint
- Markup Validation Service
- 单元测试
- QUnit/Jasmine
- Mocha/Should/Chai
- 自动化测试
- WebDriver
- WebDriver
- Coding style
- 前端库/框架
- jQuery/Underscore/Mootools/Prototype.js
- YUI3/Dojo/ExtJS
- Backbone/KnockoutJS/Emberjs
- 前端标准/规范
- HTTP1.1
- ECMAScript3/5
- W3C/DOM/BOM/XHTML/XML/JSON/JSONP
- CommonJS/AMD
- HTML5/CSS3
- 性能
- JSPerf
- YSlow 35 rules
- PageSpeed
- HTTPWatch
- DynaTrace’s Ajax
- 高性能JavaScript
- 编程知识储备
- 数据结构
- OOP/AOP
- 原型链/作用域链
- 闭包
- 函数式编程
- 设计模式
- Javascript Tips
- 部署流程
- 压缩合并
- YUI Compressor
- Google Clousure Complier
- CleanCSS/UglifyJS
- 文档输出
- JSDoc
- Dox/Doxmate
- 项目构建工具
- make/Ant
- GYP
- Grunt
- Yeoman
- 压缩合并
- 代码组织
- 类库模块化
- CommonJS/AMD
- YUI3模块
- 业务逻辑模块化
- 文件加载
- LABjs
- SeaJS/Require.js
- 类库模块化
- 安全
- CSRF/XSS
- ADsafe/Caja/Sandbox
- 移动Web
- HTML5/CSS3
- 响应式设计
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap
- jQuery Mobile
- JavaScript生态
- MongoDB/CouchDB
- MongoDB/CouchDB
- 前沿技术社区/会议
- D2/WebRebuild
- NodeParty/W3CTech/HTML5梦工厂
- JSConf/沪JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- YDN/YUIConf
- 计算机知识储备
- 编译原理
- 计算机网络
- 操作系统
- 算法原理
- 软件工程/软件测试原理
- 软技能
- 知识管理/总结分享
- 沟通技巧/团队协作
- 需求管理/PM
- 交互设计/可用性/可访问性知识
- 可视化
- SVG/Canvas/VML
- D3/Rapha?l/DataV
- 开发工具
- 后端工程师
- 编程语言
- C/C++/Java/PHP/Ruby/Python/…
- C/C++/Java/PHP/Ruby/Python/…
- 数据库
- SQL
- MySQL/MongoDB/Oracle
- 操作系统
- Unix/Linux/OS X/Windows
- Unix/Linux/OS X/Windows
- 数据结构
- 编程语言
五、Web前端学习书籍
HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。Javascript 的书籍 推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。
这里推荐几本 Javascript 书籍：
——初级读物：——
《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。
《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。
——中级读物：——
《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。
《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。
《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。
高级读物：
《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。
《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。
《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。
要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”…… 这些都要深入研究！
万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。
六、参考资料
《如何成为一名优秀的前端工程师》
《如何成为一名优秀的web前端工程师（前端攻城师）？》
Web前端工程师成长之路——知识汇总
原文地址：http://www.cnblogs.com/liyuspace/p/7751298.html