前端工程師必備技能圖譜
編者：明明如月
軟體攻城獅
很多學習前端的新手以為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
-----------------------------------------------------------------------------------------------------
如果您對軟體類、或者國外科技類文章感興趣，歡迎關注我們。
歡迎評論、點贊、轉發。期待您的見解。