前端工程师必备技能图谱

编者：明明如月

软件攻城狮

很多学习前端的新手以为html、css、js、jquery这些就是前端的全部了。

还有一些学习前端很长一段时间还不太明白前端所包含的所有知识。

最近小编，偶然看见前端工程师必备技能的思维导图，非常全面，非常有用。

小编虽然主要搞后端开发的，但是前端也会涉及一些，见到此图总结的颇为详细，非常欣喜。

在此分享给大家：

如果该图片看不清楚，从github这个地址下载：

https://github.com/TeamStuQ/skill-map/blob/master/data/designbyStuQ/png-FrontEnd-by-StuQ.png

强烈推荐保存起来。

具体内容文字版：

浏览器

– IE6/7/8/9/10/11 (Trident)

– Firefox (Gecko)

– Chrome/Chromium (Blink)

– Safari (WebKit)

– Opera (Blink)

编程语言

– JavaScript/Node.js

– CoffeeScript

– TypeScript

切页面

– HTML/HTML5

– CSS/CSS3

– Sass/LESS/Stylus

– PhotoShop/Paint.net/Fireworks/GIMP/Sketch

开发工具

编辑器和IDE

– VIM/Sublime Text2

– Notepad++/EditPlus

– WebStorm

– Emacs EmacsWiki

– Brackets

– Atom

– Lime Text

– Light Table

– Codebox

– TextMate

– Neovim

– Komodo IDE / Edit

– Eclipse

– Visual Studio/Visual Studio Code

– NetBeans

– Cloud9 IDE

– HBuilder

– Nuclide

调试工具

– Firebug/Firecookie

– YSlow

– IEDeveloperToolbar/IETester

– Fiddler/Charles

– Chrome Dev Tools

– Dragonfly

– DebugBar

– Venkman

版本管理

– Git/SVN/Mercurial

– Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge

代码质量

Coding style

– Eslint/JSLint/JSHint/jscs

– CSSLint

– Markup Validation Service

– HTML Validators

单元测试

– QUnit/Jasmine

– Mocha/Should/Chai/Expect

– Unit JS

自动化测试

– WebDriver/Protractor/Karma Runner/Sahi

– phantomjs

– SourceLabs/BrowserStack

前端库/框架

– jQuery/Underscore/Mootools/Prototype.js

– YUI3/Dojo/ExtJS/KISSY

– Backbone/KnockoutJS/Emberjs

– AngularJS

– Batarang

– Bootstrap

– Semantic UI

– Juice UI

– Web Atoms

– Polymer

– Dhtmlx

– qooxdoo

– React

– Brick

– Vue.js

前端标准/规范

– HTTP/1.1: RFCs 7230-7235

– HTTP/2

– ECMAScript 5/6/7

– W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…

– CommonJS Modules/AMD

– HTML5/CSS3

– Semantic Web

– MicroData

– RDFa

– Web Accessibility

– WCAG

– Role Attribute

– WAI-ARIA

性能

– JSPerf

– YSlow 35 rules

– PageSpeed

– HTTPWatch

– DynaTrace’s Ajax

– 高性能JavaScript

SEO

编程知识储备

– 数据结构

– OOP/AOP

– 原型链/作用域链

– 闭包

– 编程范型

– 设计模式

– Javascript Tips

部署流程

压缩合并

– YUI Compressor

– Google Clousure Complier

– UglifyJS

– CleanCSS

文档输出

– JSDoc

– Dox/Doxmate/Grunt-Doxmate

项目构建工具

– make/Ant

– GYP

– Grunt

– Gulp

– Yeoman

– FIS

– Mod

– Webpack

代码组织

类库模块化

– CommonJS/AMD/ES6 Module

– YUI3模块

业务逻辑模块化

– bower/component

文件加载

– LABjs

– SeaJS/Require.js/Webpack

模块化预处理器

– Browserify

安全

– CSRF/XSS

– CSP

– Same-origin policy

– ADsafe/Caja/Sandbox

移动Web

– HTML5/CSS3

– 响应式网页设计

– Zeptojs/iScroll

– V5/Sencha Touch

– PhoneGap (Cordova)

– Ionic

– jQuery Mobile

– W3C Mobile Web Initiative

– W3C mobileOK Checker

– Open Mobile Alliance

– React Native/Weex

前沿技术社区/会议

– D2/WebRebuild

– NodeParty/W3CTech/HTML5梦工厂

– JSConf/沪JS(JSConf.cn)

– QCon/Velocity/SDCC

– JSConf/NodeConf

– CSSConf

– YDN/YUIConf

– HybridApp

– WHATWG

– MDN

– codepen

– w3cplus

– CNode

计算机知识储备

– 编译原理

– 计算机网络

– 操作系统

– 算法原理

– 软件工程/软件测试原理

– Unicode

软技能

– 知识管理/总结分享

– 沟通技巧/团队协作

– 需求管理/PM

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

可视化

– SVG/Canvas/VML

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

– Canvas: CreateJS/KineticJS

– WebGL/Three.JS

源自：https://github.com/TeamStuQ/skill-map/blob/master/data/map-FrontEndEngineer.md

—————————————————————————————————–

如果您对软件类、或者国外科技类文章感兴趣，欢迎关注我们。

欢迎评论、点赞、转发。期待您的见解。