Frontend Knowledge Structure
========
## 項目起源
還記得@jayli 的這幅前端知識結構圖么。

圖片的形式具有諸多的不便。缺失源圖的我們,無法為此圖貢獻些什么,隨著時間的遷移,或許有些技術點會發生改變,所以有了這個GitHub項目。我們可以通過協作的方式來共同維護這個項目。Git的歷史記錄也可以見證前端行業的一些變遷。
[可視化效果](http://html5ify.com/fks/fks_chart/)
## 前端開發知識結構
- 前端工程師
- 瀏覽器
- IE6/[7](http://www.microsoft.com/en-us/download/internet-explorer-7-details.aspx)/[8](http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-8)/[9](http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages)/[10](http://windows.microsoft.com/en-US/internet-explorer/ie-10-worldwide-languages)/[11](http://windows.microsoft.com/en-US/internet-explorer/ie-11-worldwide-languages) (Trident)
- [Firefox](http://www.mozilla.org/en-US/) (Gecko)
- [Chrome](http://www.google.com/chrome)/[Chromium](http://www.chromium.org/) (Blink)
- [Safari](http://www.apple.com/safari/) (WebKit)
- [Opera](http://www.opera.com/) (Blink)
- 編程語言
- [JavaScript](https://developer.mozilla.org/en-US/docs/JavaScript)/[Node.js](http://nodejs.org/)
- [CoffeeScript](http://coffeescript.org/)
- [TypeScript](http://www.typescriptlang.org/)
- 切頁面
- [HTML](http://www.w3.org/html/)/[HTML5](http://www.w3.org/TR/html5/)
- [CSS/CSS3](http://www.w3.org/Style/CSS/)
- [Sass](http://sass-lang.com/)/[LESS](http://lesscss.org/)/[Stylus](http://learnboost.github.io/stylus/)/[postCSS](https://github.com/postcss/postcss)
- [PhotoShop](http://www.photoshop.com/products/photoshop)/[Paint.net](http://www.getpaint.net/)/[Fireworks](http://www.adobe.com/cn/products/fireworks.html)/[GIMP](http://www.gimp.org/)/[Sketch](http://bohemiancoding.com/sketch/)
- 開發工具
- 編輯器和IDE
- [VIM](http://www.vim.org/)/[Sublime Text2](http://www.sublimetext.com/)
- [Notepad++](http://notepad-plus-plus.org/)/[EditPlus](http://www.editplus.com/)
- [WebStorm](http://www.jetbrains.com/webstorm/)
- [Emacs](http://www.gnu.org/software/emacs/) [EmacsWiki](http://emacswiki.org)
- [Brackets](http://brackets.io)
- [Atom](https://atom.io/)
- [Lime Text](http://limetext.org/)
- [Light Table](http://lighttable.com/)
- [Codebox](https://www.codebox.io/)
- [TextMate](http://macromates.com/)
- [Neovim](http://neovim.org/)
- [Komodo IDE / Edit](http://www.activestate.com/komodo-edit)
- [Eclipse](http://www.eclipse.org/)
- [Visual Studio](http://www.visualstudio.com/)/[Visual Studio Code](https://code.visualstudio.com/)
- [NetBeans](https://netbeans.org/)
- [Cloud9 IDE](http://c9.io/)
- [HBuilder](http://www.dcloud.io/)
- [Nuclide](http://nuclide.io/)
- 調試工具
- [Firebug](http://getfirebug.com/)/[Firecookie](https://addons.mozilla.org/en-US/firefox/addon/firecookie/)
- [YSlow](http://developer.yahoo.com/yslow/)
- [IEDeveloperToolbar](http://www.microsoft.com/en-us/download/details.aspx?id=18359)/[IETester](http://www.my-debugbar.com/wiki/IETester/HomePage)
- [Fiddler](http://www.telerik.com/fiddler)
- [Chrome Dev Tools](https://developer.chrome.com/devtools)
- [Dragonfly](http://www.opera.com/dragonfly/)
- [DebugBar](http://www.debugbar.com/)
- [Venkman](https://developer.mozilla.org/en-US/docs/Venkman)
- [Charles](https://www.charlesproxy.com/)
- 版本管理
- [Git](http://git-scm.com/)/[SVN](http://subversion.apache.org/)/[Mercurial](http://mercurial.selenic.com/)
- [Github](https://github.com/)/[GitLab](https://about.gitlab.com/)/[Bitbucket](https://bitbucket.org/)/[Gitorious](https://gitorious.org/)/[GNU Savannah](http://savannah.gnu.org/)/[Launchpad](https://launchpad.net/)/[SourceForge](http://sourceforge.net/)/[TeamForge](http://www.collab.net/products/teamforge)
- 代碼質量
- Coding style
- [JSLint](http://www.jslint.com/)/[JSHint](http://www.jshint.com/)/[jscs](https://github.com/mdevils/node-jscs)/[ESLint](https://github.com/eslint/eslint)
- [CSSLint](http://csslint.net/)
- [Markup Validation Service](http://validator.w3.org/)
- [HTML Validators](https://validator.whatwg.org/)
- 單元測試
- [QUnit](http://qunitjs.com/)/[Jasmine](http://jasmine.github.io/)
- [Mocha](http://mochajs.org/)/[Should](https://github.com/visionmedia/should.js/)/[Chai](http://chaijs.com/)/[Expect](https://github.com/LearnBoost/expect.js/)
- [Unit JS](http://unitjs.com/)
- 自動化測試
- [WebDriver](http://docs.seleniumhq.org/docs/03_webdriver.jsp)/[Protractor](https://github.com/angular/protractor)/[Karma Runner](https://github.com/karma-runner/karma)/[Sahi](http://sahi.co.in/)
- [phantomjs](http://phantomjs.org/)
- [SourceLabs](https://saucelabs.com/)/[BrowserStack](http://www.browserstack.com/)
- 前端庫/框架
- [jQuery](http://jquery.com/)/[Underscore](http://underscorejs.org/)/[Mootools](http://mootools.net/)/[Prototype.js](http://www.prototypejs.org/)
- [YUI3](http://yuilibrary.com/projects/yui3/)/[Dojo](http://dojotoolkit.org/)/[ExtJS](http://www.sencha.com/products/extjs)/[KISSY](http://docs.kissyui.com/)
- [Backbone](http://backbonejs.org/)/[KnockoutJS](http://knockoutjs.com/)/[Emberjs](http://emberjs.com/)
- [AngularJS](http://angularjs.org/)
- [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk)
- [Bootstrap](http://getbootstrap.com/)
- [Semantic UI](http://www.semantic-ui.com/)
- [Juice UI](http://juiceui.com/)
- [Web Atoms](http://webatomsjs.neurospeech.com/)
- [Polymer](http://docs.polymerchina.org/)
- [Dhtmlx](http://dhtmlx.com/)
- [qooxdoo](http://qooxdoo.org/)
- [React](http://facebook.github.io/react/)
- [Brick](http://mozbrick.github.io/)
- [vue.js](http://cn.vuejs.org/)
- 前端標準/規范
- HTTP/1.1: RFCs 7230-7235
- [HTTP/2](https://http2.github.io/)
- [ECMAScript3/5](http://www.ecma-international.org/publications/standards/Ecma-262.htm)
- [ECMAScript6](http://www.ecma-international.org/ecma-262/6.0/index.html)
- [W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...](http://www.w3.org/TR/)
- [CommonJS Modules](http://wiki.commonjs.org/wiki/Modules/1.0)/[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)
- [HTML5](http://www.w3.org/html/wg/drafts/html/master/)/[CSS3](http://www.w3.org/Style/CSS/specs.en.html)
- [Semantic Web](http://semanticweb.org/)
- [MicroData](http://schema.org)
- [RDFa](http://www.w3.org/TR/rdfa-core/)
- [Web Accessibility](http://www.w3.org/WAI/)
- [WCAG](http://www.w3.org/TR/WAI-WEBCONTENT/)
- [Role Attribute](http://www.w3.org/TR/role-attribute/)
- [WAI-ARIA](http://www.w3.org/TR/wai-aria/)
- 性能
- [JSPerf](http://jsperf.com/)
- [YSlow 35 rules](http://developer.yahoo.com/performance/rules.html)
- [PageSpeed](https://developers.google.com/speed/pagespeed/)
- [HTTPWatch](http://www.httpwatch.com/)
- [DynaTrace's Ajax](http://www.compuware.com/application-performance-management/dynatrace-ajax-download.html)
- [高性能JavaScript](http://book.douban.com/subject/5362856/)
- SEO
- 編程知識儲備
- [數據結構](http://zh.wikipedia.org/wiki/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84)
- OOP/AOP
- [原型鏈](http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/)/作用域鏈
- [閉包](http://www.jibbering.com/faq/notes/closures/)
- [編程范型](http://zh.wikipedia.org/wiki/%E7%BC%96%E7%A8%8B%E8%8C%83%E5%9E%8B)
- [設計模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- [Javascript Tips](http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html)
- 部署流程
- 壓縮合并
- [YUI Compressor](http://developer.yahoo.com/yui/compressor/)
- [Google Clousure Complier](https://developers.google.com/closure/compiler/)
- [UglifyJS](https://github.com/mishoo/UglifyJS)
- [CleanCSS](https://github.com/GoalSmashers/clean-css)
- 文檔輸出
- [JSDoc](https://github.com/jsdoc3/jsdoc)
- [Dox](https://github.com/visionmedia/dox)/[Doxmate](https://github.com/JacksonTian/doxmate)/[Grunt-Doxmate](https://github.com/luozhihua/grunt-doxmate)
- 項目構建工具
- [make](http://www.gnu.org/software/make/)/[Ant](http://ant.apache.org/)
- [GYP](http://code.google.com/p/gyp/)
- [Grunt](http://gruntjs.com/)
- [Gulp](http://gulpjs.com/)
- [Yeoman](http://yeoman.io/)
- [FIS](http://fis.baidu.com/)
- [Mod](https://github.com/modulejs/modjs)
- ES6+ 轉換器
- [Traceur](https://github.com/google/traceur-compiler)
- [Babel](https://babeljs.io/)
- 代碼組織
- 類庫模塊化
- [CommonJS](http://www.commonjs.org/)/AMD
- [YUI3模塊](http://yuilibrary.com/projects/yui3/)
- [webpack](http://webpack.github.io/)
- 業務邏輯模塊化
- [bower](https://github.com/twitter/bower)/[component](https://github.com/component/component)
- 文件加載
- [LABjs](http://labjs.com/)
- [SeaJS](http://seajs.org/)/[Require.js](http://requirejs.org/)
- 模塊化預處理器
- [Browserify](https://github.com/substack/node-browserify)
- 安全
- [CSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)/[XSS](http://en.wikipedia.org/wiki/Cross-site_scripting)
- [CSP](http://www.w3.org/TR/CSP/)
- [Same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy)
- ADsafe/Caja/Sandbox
- 移動Web
- HTML5/CSS3
- [響應式網頁設計](http://zh.wikipedia.org/wiki/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1)
- [Zeptojs](http://zeptojs.com/)/[iScroll](http://cubiq.org/iscroll)
- V5/[Sencha Touch](http://www.sencha.com/products/touch)
- [PhoneGap](http://phonegap.com/)
- [jQuery Mobile](http://jquerymobile.com/)
- [W3C Mobile Web Initiative](http://www.w3.org/Mobile/)
- [W3C mobileOK Checker](http://validator.w3.org/mobile/)
- [Open Mobile Alliance](http://openmobilealliance.org/)
- [React Native](https://facebook.github.io/react-native/)
- 前沿技術社區/會議
- [D2](http://d2forum.org)/[WebRebuild](http://www.webrebuild.org/)
- NodeParty/[W3CTech](http://w3ctech.com)/[HTML5夢工廠](http://www.html5dw.com)
- [JSConf](http://jsconf.com/)/[滬JS(JSConf.cn)](http://jsconf.cn)
- QCon/Velocity/SDCC
- [JSConf](http://jsconf.com/)/[NodeConf](http://www.nodeconf.com/)
- [CSSConf](http://cssconf.com/)
- YDN/YUIConf
- HybridApp
- [WHATWG](http://whatwg.org/)
- [MDN](https://developer.mozilla.org/zh-CN/)
- [codepen](http://codepen.io/)
- [w3cplus](http://www.w3cplus.com/)
- [CNode](https://cnodejs.org/)
- 計算機知識儲備
- 編譯原理
- [計算機網絡](http://zh.wikipedia.org/wiki/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C)
- [操作系統](http://zh.wikipedia.org/wiki/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F)
- 算法原理
- 軟件工程/軟件測試原理
- [Unicode](http://www.unicode.org/)
- 軟技能
- 知識管理/總結分享
- 溝通技巧/團隊協作
- 需求管理/PM
- 交互設計/可用性/可訪問性知識
- 可視化
- SVG/Canvas/VML
- SVG: [D3](http://d3js.org/)/[Rapha?l](http://raphaeljs.com/)/[Snap.svg](http://snapsvg.io/)/[DataV](http://datavlab.org/datavjs/)
- Canvas: [CreateJS](http://www.createjs.com/)/[KineticJS](http://kineticjs.com/)
- [WebGL](http://en.wikipedia.org/wiki/WebGL)/[Three.JS](http://threejs.org/)
- 后端工程師
- 編程語言
- C/C++/Java/PHP/Ruby/Python/...
- 網頁服務器
- [Nginx](http://nginx.org/en/)
- [Apache](http://httpd.apache.org/)
- [Lighttpd](http://www.lighttpd.net/)
- 數據庫
- SQL
- [MySQL](http://www.mysql.com/)/[PostgreSQL](http://www.postgresql.org/)/[Oracle](http://www.oracle.com/us/products/database/overview/index.html)/[DB2](http://www-01.ibm.com/software/data/db2)
- [MongoDB](http://www.mongodb.org/)/[CouchDB](http://couchdb.apache.org/)
- 數據緩存
- [Redis](http://redis.io/)
- [Memcached](http://memcached.org/)
- 文件緩存/代理
- [Varnish](https://www.varnish-cache.org/)
- [Squid](http://www.squid-cache.org/)
- 操作系統
- Unix/Linux/OS X/Windows
- 數據結構
## 前端書籍推薦
★越少越簡單,越適合入門,★多的要么是難度比較高,要么是比較適合在后面看,比如講性能之類的書.
### CSS
- [Eric Meyer 談 CSS(卷二)](http://www.amazon.cn/Eric-Meyer-談-CSS-邁耶/dp/B00170M84I/)★★★
- [CSS權威指南 (第3版)](http://book.douban.com/subject/2308234/)★★
- [精通CSS](http://book.douban.com/subject/4736167/)★★★
- [HTML & CSS設計與構建網站](http://book.douban.com/subject/21338365/)★
### JavaScript
- [JavaScript & jQuery交互式Web前端開發](http://book.douban.com/subject/26433805/)★
- [JavaScript DOM編程藝術 (第2版)](http://book.douban.com/subject/6038371/)★
- [JavaScript高級程序設計(第3版)](http://book.douban.com/subject/10546125/)★★
- [鋒利的jQuery](http://book.douban.com/subject/10792216/)★★
- [高性能JavaScript](http://book.douban.com/subject/5362856/)★★★
- [JavaScript語言精粹](http://book.douban.com/subject/3590768/)★★★
- [JavaScript權威指南](http://book.douban.com/subject/10549733/)★★★
- [編寫可維護的JavaScript](http://book.douban.com/subject/21792530/)★★★
- [JAVASCRIPT語言精髓與編程實踐](http://book.douban.com/subject/3012828/)★★★
- [Effective Javascript](http://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182)★★★
- [Secrets of the JavaScript Ninja](http://book.douban.com/subject/3176860/)★★★
- [JavaScript模式](http://book.douban.com/subject/11506062/)★★★
- [JavaScript設計模式](http://book.douban.com/subject/3329540/)★★★★
- [基于MVC的JavaScript Web富應用開發](http://book.douban.com/subject/10733304/)★★★
### 性能實踐
- [高性能網站建設指南](https://book.douban.com/subject/3132277/)★
- [高性能網站建設進階指南](https://book.douban.com/subject/4719162/)★★
- [Web性能實踐日志](http://book.douban.com/subject/25891125/)★★★
- [Web性能權威指南](http://book.douban.com/subject/25856314/)★★★
### 版本控制工具
- [版本控制之道 (git)](http://book.douban.com/subject/4813786/)★★
- [Pro Git](http://iissnan.com/progit/)★★★
- [Git權威指南](http://book.douban.com/subject/6526452/)★★★★
## 后端書籍推薦
### Linux管理
- [Linux 系統管理技術手冊](http://book.douban.com/subject/3042029/)
- [鳥哥的 Linux 私房菜](http://book.douban.com/subject/4889838/)
- [Linux 101 Hacks](http://www.thegeekstuff.com/linux-101-hacks-free-ebook-non-english/)
- [UNIX Shell Scripting](http://book.douban.com/subject/3519360/)
- [The Linux Command Line](http://book.douban.com/subject/6806862/)
- [Linux Network Administrator's Guide](http://oreilly.com/openbook/linag2/book/index.html)
### Linux編程
- [Linux程序設計](http://book.douban.com/subject/4831448/)
- [Linux系統編程](http://book.douban.com/subject/3907181/)
- [Unix環境高級編程](http://book.douban.com/subject/1788421/)
- [Unix編程藝術](http://book.douban.com/subject/1467587/)
- [The Linux Programming Interface](http://book.douban.com/subject/4292217/)
- [程序員的自我修養](http://book.douban.com/subject/3652388/)
- [深入理解Linux內核](http://book.douban.com/subject/2287506/)
- [Unix網絡編程](http://book.douban.com/subject/1500149/)
- [TCP/IP高級編程](http://book.douban.com/subject/1088054/)
### C/C++
- [Linux C編程一站式學習](http://book.douban.com/subject/4141733/)
- [C和指針](http://book.douban.com/subject/3012360/)
- [C陷阱與缺陷](http://book.douban.com/subject/2778632/)
- [C專家編程](http://book.douban.com/subject/2377310/)
- [C語言核心技術](http://book.douban.com/subject/2226913/)
- [徹底搞定C指針](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDEQFjAA&url=http%3A%2F%2Fblogimg.chinaunix.net%2Fblog%2Fupfile2%2F110210170023.pdf&ei=P95mUfrmNKKriALS04HAAw&usg=AFQjCNEzB88PnpfL0fRgJDkP3O9TlBPswA&sig2=isyd4ktsByNBMa5M9EPhRQ&bvm=bv.45107431,d.cGE&cad=rjt)
- [征服C指針](http://book.douban.com/subject/21317828/)
- [C++編程思想](http://book.douban.com/subject/1094797/)
- [高質量程序設計指南---C/C++語言](http://book.douban.com/subject/2116929/)
- [Inside the C++ Object Model](http://book.douban.com/subject/1484262/)
- [A Tour of C++](http://www.stroustrup.com/Tour.html)
- [The C++ Programming Language](http://en.wikipedia.org/wiki/The_C%2B%2B_Programming_Language)
- [The C++ Standard Library - A Tutorial and Reference](http://www.cppstdlib.com/)
- [The C++ Standard (INCITS/ISO/IEC 14882-2011)](http://webstore.ansi.org/RecordDetail.aspx?sku=INCITS%2fISO%2fIEC+14882-2012)
- [Overview of the New C++](http://www.artima.com/shop/overview_of_the_new_cpp)
## 前端工作面試
- [前端工作面試問題](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions)
- [前端開發面試題(中文)](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Question)
## 內容貢獻者
除了感謝Jayli提供了知識結構圖的原本來,還感謝以下的內容貢獻者們,結果由`git-summary`生成于2014-01-03:
```
project : fks
repo age : 1 year, 3 months
active : 53 days
commits : 108
files : 4
authors :
56 Jackson Tian 51.9%
9 吳曉蘭 8.3%
5 liyinkan 4.6%
3 chriscai 2.8%
3 fengxiaolong 2.8%
3 XiNGRZ 2.8%
2 monkadd 1.9%
2 Johnny 1.9%
2 weiwenqing 1.9%
2 Yinkan Li 1.9%
2 Copypeng 1.9%
2 左岸 1.9%
2 Jakukyo Friel 1.9%
2 Glowin 1.9%
1 李亞川 0.9%
1 Evan You 0.9%
1 Mickey 0.9%
1 Mickey- 0.9%
1 Qi Junyuan 0.9%
1 browsnet 0.9%
1 doabit 0.9%
1 guoxiangyang 0.9%
1 linkgod 0.9%
1 popomore 0.9%
1 vipzhicheng 0.9%
1 zhaqiang 0.9%
1 Colin Luo 0.9%
```
- JavaScript手冊
- Array函數
- String函數
- Date函數
- Mach函數
- Regexp函數
- Location函數
- Window 函數
- Other函數
- History函數
- Navigator函數
- Event函數
- Dom函數
- Json函數
- Sea.js手冊
- JavaScript學習總結
- 1.基礎部分
- 2.對象部分
- 3.BOM和DOM詳解
- 4.function函數部分
- 5.原型和原型鏈詳解
- 6.數據類型和JSON格式
- 7.Ajax和Http狀態字
- 8.正則表達式
- 9.事件詳解
- 前端相關網址
- 前端干貨文章
- JavaScript字符串常用的一些方法
- 前端開發知識體系
- JavaScript速成課
- 移動端開發技巧
- 移動端Web頁面問題解決方案
- 20個常用的CSS技巧
- 學習JavaScript設計模式
- 前端開發學習總結