前端知識圖譜

前端知識結構

圖片的形式具有諸多的不便。缺失源圖的我們悼泌，無法為此圖貢獻些什么挪钓，隨著時間的遷移押蚤，或許有些技術點會發(fā)生改變，所以有了這個GitHub項目申鱼。我們可以通過協(xié)作的方式來共同維護這個項目愤诱。Git的歷史記錄也可以見證前端行業(yè)的一些變遷。

可視化效果

前端開發(fā)知識結構

前端工程師
- 瀏覽器
  瀏覽器的主要分以下幾種捐友，國內的瀏覽器比如移動端的UC淫半，比如pc端的360瀏覽器，都是不考慮兼容的匣砖，因為他們不符合主流的規(guī)范科吭。公眾號開發(fā)其實也是前端技術棧，都是運行在騰訊的x5內核上猴鲫，這個也是個垃圾对人，反正吐槽很多，之前開發(fā)的時候就會遇到一堆的問題拂共。
  對于國內的一些做OA之類的系統(tǒng)的IE還是需要兼容的牺弄，畢竟太多的系統(tǒng)還是在xp上跑著呢。一般認為兼容到IE8還行宜狐，兼容IE6的就拜拜吧势告。畢竟微軟都開始在線自殺了
  - IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
  - Firefox (Gecko)
  - Chrome/Chromium (Blink)
  - Safari (WebKit)
  - Opera (Blink)
- 編程語言
  - JavaScript/Node.js
  - CoffeeScript
  - TypeScript
  - HTML/HTML5
  - CSS/CSS3
  - Sass/LESS/Stylus/postCSS
- 開發(fā)工具
  - 編輯器和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
    - Chrome Dev Tools
    - Dragonfly
    - DebugBar
    - Venkman
    - Charles
  - 版本管理
    - Git/SVN/Mercurial
    - Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
- 代碼質量
  - Coding style
  - 單元測試
    - QUnit/Jasmine
    - Mocha/Should/Chai/Expect
    - Unit JS
  - 自動化測試
- 前端庫/框架
  - 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
- 前端標準/規(guī)范
  - HTTP/1.1: RFCs 7230-7235
  - HTTP/2
  - ECMAScript3/5
  - ECMAScript6
  - W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
  - CommonJS Modules/AMD
  - HTML5/CSS3
  - Semantic Web
    - MicroData
    - RDFa
  - Web Accessibility
- 性能
- SEO
- 編程知識儲備
  - 數(shù)據(jù)結構
  - OOP/AOP
  - 原型鏈/作用域鏈
  - 閉包
  - 編程范型
  - 設計模式
  - Javascript Tips
- 部署流程
  - 壓縮合并
  - 文檔輸出
    - JSDoc
    - Dox/Doxmate/Grunt-Doxmate
  - 項目構建工具
    - make/Ant
    - GYP
    - Grunt
    - Gulp
    - Yeoman
    - FIS
    - Mod
  - ES6＋轉換器
    - Traceur
    - Babel
- 代碼組織
  - 類庫模塊化
    - CommonJS/AMD
    - YUI3模塊
    - webpack
  - 業(yè)務邏輯模塊化
    - bower/component
  - 文件加載
    - LABjs
    - SeaJS/Require.js
  - 模塊化預處理器
    - Browserify
- 安全
  - CSRF/XSS
  - CSP
  - Same-origin policy
  - ADsafe/Caja/Sandbox
- 移動Web
  - HTML5/CSS3
  - 響應式網(wǎng)頁設計
  - Zeptojs/iScroll
  - V5/Sencha Touch
  - PhoneGap/Cordova
  - jQuery Mobile
  - W3C Mobile Web Initiative
  - W3C mobileOK Checker
  - Open Mobile Alliance
  - React Native
  - ionic
- 前沿技術社區(qū)/會議
  - D2/WebRebuild
  - NodeParty/W3CTech/HTML5夢工廠
  - JSConf/滬JS(JSConf.cn)
  - QCon/Velocity/SDCC
  - JSConf/NodeConf
  - CSSConf
  - YDN/YUIConf
  - HybridApp
  - WHATWG
  - MDN
  - codepen
  - w3cplus
  - CNode
- 計算機知識儲備
  - 編譯原理
  - 計算機網(wǎng)絡
  - 操作系統(tǒng)
  - 算法原理
  - 軟件工程/軟件測試原理
  - Unicode
- 軟技能
  - 知識管理/總結分享
  - 溝通技巧/團隊協(xié)作
  - 需求管理/PM
  - 交互設計/可用性/可訪問性知識
- 可視化
  - SVG/Canvas/VML
  - SVG: D3/Rapha?l/Snap.svg/DataV
  - Canvas: CreateJS/KineticJS
  - WebGL/Three.JS