前端技能匯總 Frontend Knowledge Structure
項目起源
還記得@jayli 的這幅前端知識結構圖么。
圖片的形式具有諸多的不便。缺失源圖的我們，無法為此圖貢獻些什么，隨著時間的遷移，或許有些技術點會發生改變，所以有了這個GitHub項目。我們可以通過協作的方式來共同維護這個項目。Git的歷史記錄也可以見證前端行業的一些變遷。
前端開發知識結構
-
前端工程師
- 瀏覽器
- IE6/7/8/9/10/11 (Trident)
- Firefox (Gecko)
- Chrome/Chromium (Blink)
- Safari (WebKit)
- Opera (Blink) </ul> </li>
- 編程語言
- JavaScript/Node.js
- CoffeeScript
- TypeScript </ul> </li>
- 切頁面
- HTML/HTML5
- CSS/CSS3
- Sass/LESS/Stylus
- PhotoShop/Paint.net/Fireworks/GIMP/Sketch </ul> </li>
- 開發工具
- 編輯器和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 </ul> </li>
- 調試工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- Chrome Dev Tools
- Dragonfly
- DebugBar
- Venkman </ul> </li>
- 版本管理
- Git/SVN/Mercurial
- Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge </ul> </li> </ul> </li>
- 代碼質量
- Coding style
- JSLint/JSHint/jscs
- CSSLint
- Markup Validation Service
- HTML Validators </ul> </li>
- 單元測試
- QUnit/Jasmine
- Mocha/Should/Chai/Expect
- Unit JS </ul> </li>
- 自動化測試
- WebDriver/Protractor/Karma Runner/Sahi
- phantomjs
- SourceLabs/BrowserStack </ul> </li> </ul> </li>
- 前端庫/框架
- jQuery/Underscore/Mootools/Prototype.js
- YUI3/Dojo/ExtJS/KISSY
- Backbone/KnockoutJS/Emberjs
- AngularJS
- Batarang </ul> </li>
- Bootstrap
- Semantic UI
- Juice UI
- Web Atoms
- Polymer
- Dhtmlx
- qooxdoo
- React
- Brick </ul> </li>
- 前端標準/規范
- HTTP/1.1: RFCs 7230-7235
- HTTP/2
- ECMAScript3/5
- W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
- CommonJS Modules/AMD
- HTML5/CSS3
- Semantic Web
- MicroData
- RDFa </ul> </li>
- Web Accessibility
- WCAG
- Role Attribute
- WAI-ARIA </ul> </li> </ul> </li>
- 性能
- JSPerf
- YSlow 35 rules
- PageSpeed
- HTTPWatch
- DynaTrace's Ajax
- 高性能JavaScript </ul> </li>
- SEO
- 編程知識儲備
- 數據結構
- OOP/AOP
- 原型鏈/作用域鏈
- 閉包
- 編程范型
- 設計模式
- Javascript Tips </ul> </li>
- 部署流程
- 壓縮合并
- YUI Compressor
- Google Clousure Complier
- UglifyJS
- CleanCSS </ul> </li>
- 文檔輸出
- JSDoc
- Dox/Doxmate/Grunt-Doxmate </ul> </li>
- 項目構建工具
- make/Ant
- GYP
- Grunt
- Gulp
- Yeoman
- FIS
- Mod </ul> </li> </ul> </li>
- 代碼組織
- 類庫模塊化
- CommonJS/AMD
- YUI3模塊 </ul> </li>
- 業務邏輯模塊化
- bower/component </ul> </li>
- 文件加載
- LABjs
- SeaJS/Require.js </ul> </li>
- 模塊化預處理器
- Browserify </ul> </li> </ul> </li>
- 安全
- CSRF/XSS
- CSP
- Same-origin policy
- ADsafe/Caja/Sandbox </ul> </li>
- 移動Web
- HTML5/CSS3
- 響應式網頁設計
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap
- jQuery Mobile
- W3C Mobile Web Initiative
- W3C mobileOK Checker
- Open Mobile Alliance </ul> </li>
- 前沿技術社區/會議
- D2/WebRebuild
- NodeParty/W3CTech/HTML5夢工廠
- JSConf/滬JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- CSSConf
- YDN/YUIConf
- HybridApp
- WHATWG
- MDN
- codepen
- w3cplus
- CNode </ul> </li>
- 計算機知識儲備
- 編譯原理
- 計算機網絡
- 操作系統
- 算法原理
- 軟件工程/軟件測試原理
- Unicode </ul> </li>
- 軟技能
- 知識管理/總結分享
- 溝通技巧/團隊協作
- 需求管理/PM
- 交互設計/可用性/可訪問性知識 </ul> </li>
- 可視化
- SVG/Canvas/VML
- SVG: D3/Rapha?l/Snap.svg/DataV
- Canvas: CreateJS/KineticJS
- WebGL/Three.JS </ul> </li> </ul> </li>
-
后端工程師
- 編程語言
- C/C++/Java/PHP/Ruby/Python/... </ul> </li>
- 網頁服務器
- Nginx
- Apache
- Lighttpd </ul> </li>
- 數據庫
- SQL
- MySQL/PostgreSQL/Oracle/DB2
- MongoDB/CouchDB </ul> </li>
- 數據緩存
- Redis
- Memcached </ul> </li>
- 文件緩存/代理
- Varnish
- Squid </ul> </li>
- 操作系統
- Unix/Linux/OS X/Windows </ul> </li>
- 數據結構 </ul> </li> </ul>
- Eric Meyer 談 CSS（卷二）★★★
- CSS權威指南 （第3版）★★
- 精通CSS★★★ </ul>
- JavaScript DOM編程藝術 （第2版）★
- JavaScript高級程序設計（第3版）★★
- 鋒利的jQuery★★
- 高性能JavaScript★★★
- JavaScript語言精粹★★★
- JavaScript權威指南★★★
- 編寫可維護的JavaScript★★★
- JAVASCRIPT語言精髓與編程實踐★★★
- Effective Javascript★★★
- Secrets of the JavaScript Ninja★★★
- JavaScript模式★★★
- JavaScript設計模式★★★★
- 基于MVC的JavaScript Web富應用開發★★★ </ul>
- Web性能實踐日志★★★
- Web性能權威指南★★★ </ul>
- 版本控制之道 (git)★★
- Pro Git★★★
- Git權威指南★★★★ </ul>
- Linux 系統管理技術手冊
- 鳥哥的 Linux 私房菜
- Linux 101 Hacks
- UNIX Shell Scripting
- The Linux Command Line
- Linux Network Administrator's Guide </ul>
- Linux程序設計
- Linux系統編程
- Unix環境高級編程
- Unix編程藝術
- The Linux Programming Interface
- 程序員的自我修養
- 深入理解Linux內核
- Unix網絡編程
- TCP/IP高級編程 </ul>
前端書籍推薦
★越少越簡單,越適合入門,★多的要么是難度比較高,要么是比較適合在后面看,比如講性能之類的書.
CSS
JavaScript
性能實踐
版本控制工具
后端書籍推薦
Linux管理
Linux編程
C/C++
- 編程語言
- 類庫模塊化
- 壓縮合并
- Coding style
- 編輯器和IDE
- 瀏覽器
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！