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% ```