前端工程师必备技能汇总

项目起源

还记得@jayli 的这幅前端知识结构图么。

前端知识结构

图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个github项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。

尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于DataV项目)。

前端开发知识结构

前端工程师

SVG/Canvas/VML

SVG: D3/Raphaël/Snap.svg/DataV

Canvas: CreateJS/KineticJS

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

编译原理

计算机网络

操作系统

算法原理

软件工程/软件测试原理

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

CSSConf

YDN/YUIConf

HybridApp

HTML5/CSS3

响应式设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

CSRF/XSS

ADsafe/Caja/Sandbox

类库模块化

业务逻辑模块化

文件加载

模块化预处理器

CommonJS/AMD

YUI3模块

bower/component

LABjs

SeaJS/Require.js

Browserify

压缩合并

文档输出

项目构建工具

YUI Compressor

Google Clousure Complier

UglifyJS

CleanCSS

JSDoc

Dox/Doxmate/Grunt-Doxmate

make/Ant

GYP

Grunt

Yeoman

FIS

Mod

数据结构

OOP/AOP

原型链/作用域链

闭包

函数式编程

设计模式

Javascript Tips

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace's Ajax

高性能JavaScript

HTTP1.1

ECMAScript3/5

W3C/DOM/BOM/XHTML/XML/JSON/JSONP

CommonJS Modules/AMD

HTML5/CSS3

jQuery/Underscore/Mootools/Prototype.js

YUI3/Dojo/ExtJS/KISSY

Backbone/KnockoutJS/Emberjs

AngularJS

Bootstrap

Semantic UI

Batarang

Coding style

单元测试

自动化测试

JSLint/JSHint

CSSLint

Markup Validation Service

QUnit/Jasmine

Mocha/Should/Chai/Expect

WebDriver/Karma Runner/Sahi

phantomjs

IDE

调试工具

版本管理

VIM/Sublime Text2

Notepad++/EditPlus

WebStorm

Emacs EmacsWiki

Brackets

Firebug/Firecookie

YSlow

IEDeveloperToolbar/IETester

Fiddler

Chrome Dev Tools

Git/SVN

Github/Bitbucket/Google Code

HTML/HTML5

CSS/CSS3

PhotoShop/Paint.net/Fireworks

JavaScript/Node.js

CoffeeScript

TypeScript

IE6/7/8/9/10/11

Firefox

Chrome/Safari/Opera

浏览器

编程语言

切页面

开发工具

代码质量

前端库/框架

前端标准/规范

性能

编程知识储备

部署流程

代码组织

安全

移动Web

前沿技术社区/会议

计算机知识储备

软技能

可视化

后端工程师

Unix/Linux/OS X/Windows

Varnish

Squid

Redis

Memcached

SQL

MySQL/PostgreSQL/Oracle

MongoDB/CouchDB

Nginx

Apache

C/C++/Java/PHP/Ruby/Python/...

编程语言

服务器

数据库

数据缓存

文件缓存/代理

操作系统

数据结构

前端书籍推荐

越少越简单,越适合入门,多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

Eric Meyer 谈 CSS(卷二)

CSS权威指南 (第3版)

精通CSS

JavaScript

JavaScript DOM编程艺术 (第2版)

JavaScript高级程序设计(第3版)

锋利的jQuery

高性能JavaScript

JavaScript语言精粹

JavaScript权威指南

编写可维护的JavaScript

JAVASCRIPT语言精髓与编程实践

Effective Javascript

Secrets of the JavaScript Ninja

JavaScript模式

JavaScript设计模式

基于MVC的JavaScript Web富应用开发

版本控制工具

版本控制之道 (git)

Git权威指南

后端书籍推荐

Linux管理

Linux 系统管理技术手册

鸟哥的 Linux 私房菜

Linux 101 Hacks

UNIX Shell Scripting

The Linux Command Line

Linux编程

Linux程序设计

Linux系统编程

Unix环境高级编程

Unix编程艺术

The Linux Programming Interface

程序员的自我修养

深入理解Linux内核

Unix网络编程

TCP/IP高级编程

C/C++

Linux C编程一站式学习

C和指针

C陷阱与缺陷

C专家编程

C语言核心技术

彻底搞定C指针

征服C指针

C++编程思想

高质量程序设计指南---C/C++语言

Inside the C++ Object Model

文章转载自开源中国社区 [http://www.oschina.net]

时间: 2024-09-13 21:39:15

前端工程师必备技能汇总的相关文章

5个前端工程师必备的最佳开发工具

 开发工具-前端工程师必备工具"> 原文作者 Arnaud Breton 为前端工程师,特别专注于前端和使用者经验,这篇文章出自于mention blog.以下内容由作者以第一人称撰写. 过去几年一直不断地提到 Web 应用新世代的成长,这些 App 内容变得越来越丰富,带动了前端整体的复杂度大幅增加. 像是 Backbone(藉由提供模型).AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架,增强了所有 Web 的功能;同时,Web 程式语言 Javascrip

数据中心运维工程师必备技能

运维的工作是数据中心里最为重要的一部分工作,在整个数据中心的生命周期里,持续时间最长,拥有一批高水平的运维工程师是数据中心长期稳定运行的法宝.虽然数据中心的运行故障不可避免,但通过有效运维,可以大幅降低故障发生的频率,并在出现故障的时能够有效及时地恢复业务.在这些过程中,运维工程师的水平起到了至关重要的作用.作为数据中心里的一名运维工程师,应该掌握哪些技能,才能在工作中游刃有余.要知道数据中心里有很多设备,而作为一名运维工程师不可能,也没有必要全部掌握,要懂得应该掌握哪些技能,一些基本命令和重要

写给想成为前端工程师的同学们 —— 前端工程师是做什么的?

前端工程师是做什么的?  前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端网页,处理视觉和交互问题.从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域.(web前端学习交流群:291851189 如果你想学习前端可以来这个群,里面可以学习和交流,也有资料可以下载)  2005年的时候大多数网页长这样:  现在的网页一

设计网页前端界面必备的技能

[必备]UserInterface PhotoShop/Fireworks Design 配合美工将草图形成具体的符合WebPage的设计 有快速制作分层高品质PSD.PNG的能力 能迅速将PSD.PNG的内容构思成div+css或者table等HTML代码 Flash Design 基本动画效果复杂的交互体系设计,了解第三方swf辅助设计软件复杂的交互体系设计以及较强的对各类外埠资源(PNG.JPG.MP3.WAV等)的整合能力.精通部分第三方辅助设计软件(AE.SwishMax.Swift3

前端工程师新手必读:掌握基本技能弄清概念

公司招了几个刚毕业的学生,作为重构的新手让我来带. 首先感谢感谢党.感谢国家.感谢公司给了我这样的一个机会,对我工作的肯定和认可,让我带这样的一个重构团队,同时我也明白任务的艰巨,但我一定会将工作做好,不负公司对我的期望.(哈哈,好像从小到大,老师都是教育我们要这样先说的.) 在网站的发展史上,初期的网站建设根本不需要网页重构这个职位,WEB1.0时代的网页,只需要程序员,一堆堆的表格嵌套就完成,或者美工进行配合完成,先由美工负责设计好,再用一些自动化的软件拉伸几下,直接将设计好的图就可以通过软

想转行做web前端工程师,必学这6大技能!

web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业.大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.策划.编辑等等. 要学习web前端开发,需要掌握哪些知识呢? 1.html 这个是最简单的,也是最基础的.要熟练掌握div.form table.ul li .p.span.font这些标签,这些都是最常用的,特别是div和table,div用于布局.table也可以用于布局,但是不灵活,基本table是用来和数据打交道. 2.css 这里

前端工程师还需要额外学习的其他技能

1. 选择性的掌握一下Photoshop或者Fireworks.学到什么程度可以根据你自己的需求来定.如果将来靠前端吃饭,去大公司是不需要前端开发做设计稿的,会分层切图就可以了.当然,如果对设计方面感兴趣的话,把PS玩的很溜,也是不错的事情. 2. 了解一门后端语言可以了解一下PHP+Mysql或者JSP等后端语言.职业的特殊性决定了我们需要跟后端工作者频繁的沟通,掌握这方面的一些知识有利于更有效的交流问题.提升前端在整个团队中的形象,进而提升自己的待遇.另外,学好这部分东西,有企业找你做网站的

从底层到应用,那些数据人的必备技能

根据数据应用的不同阶段,我将从数据底层到最后应用,来谈谈那些数据人的必备技能. 1.大数据平台 目前很火,数据源头,各种炫酷新技术,搭建Hadoop.Hive.Spark.Kylin.Druid.Beam~,前提是你要懂Java,很多平台都是用Java开发的. 目前很多企业都把数据采集下来了,对于传统的业务数据,用传统的数据是完全够用的,可是对于用户行为和点击行为这些数据或者很多非结构化的数据,文本.图像和文本类的,由于数据量太大,很多公司都不知道怎么进行存储. 这里面要解决的是实时.近实时和离

大数据浪潮下,前端工程师眼中的完整数据链图

马云曾经说过『人类正从IT时代走向DT时代』.正如他说言,今天几乎所有的互联网公司背后都有一支规模庞大的数据团队和一整套数据解决方案作决策,这个时代已经不是只有硅谷巨头才玩数据的时代,是人人都在依赖着数据生存,可以说如今社会数据价值已经被推到前所未有的高度. 我作为一名前端工程师在阿里巴巴数据团队工作多年,深入了解数据生产加工链路与产品化.我们这群前端是与界面最近的工程师们,似乎与数据离得很远,对于我们来说与数据有些怎样连接呢. 完整数据链路 首先,我用直观的一张图绘制出数据采集到产出的流程,中