Web前端是指，利用Web技術進行用戶界面開發。並增加與後臺的交互動態功能，同時結合後臺開發技術模擬整體效果，進行豐富互聯網的Web開發，致力於通過技術改善用戶體驗。而一個好的Web前端開發工程師又需要具備哪些技能呢？小編分享一份比較全面的Web前端技能樹，看看你需要學習什麼？
一、語言基礎
JavaScript：
作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎和常用API
CSS：
選擇器
瀏覽器兼容性及常見的hack處理
CSS佈局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等
HTML：
語義化標籤
學習資料的話可以加下web前端開發學習裙：659加上479再加上860自己去羣裏下載下。
二、進階
JavaScript：
異步控制（Promise、ES6 generator、Async）
模塊化的開發方式（AMD、CMD、KMD等等）
JavaScript解釋器的一些相關知識
異步IO實現
垃圾回收
事件隊列
常用框架使用及其原理
jQuery：基於選擇器的框架，但個人認爲不能叫框架，應該算工具庫，因爲不具備模塊加載機制，其中源碼很適合閱讀鑽研
AngularJS/Avalon等MVVM框架：着重理解MVVM模式本身的理念和雙向綁定的實現，如何解耦
underscore：優秀的工具庫，方便的理解常用工具代碼片段的實現
polymer/React：組件化開發，面向未來，理解組件化開發的原理
CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪製原理
DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程
解析HTML、CSS、JavaScript時造成的阻塞
HTML5相關
SVG及矢量圖原理
Canvas開發及動畫原理（幀動畫）
Video和Audio
flex box佈局方式
icon fonts的使用
常用NodeJs的package：
koa
express
underscore
async
gulp
grunt
connect
request
一些理念：
響應式Web
優雅降級、漸進增強
don`t make me think
網頁可用性、可訪問性、其中的意義
SEO搜索引擎優化，瞭解搜索引擎的原理
SPA的好處和問題
性能優化：
減少請求數量（sprite、combo）
善用緩存（application cache、http緩存、CDN、localstorage、sessionstorage，備忘錄模式）
減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）
CSS的迴流與重繪
三、項目
版本管理：(首推Git，用過Git都不會想用SVN了)
Git：本地版本管理的機制
SVN：遠程中心的版本管理機制
自動化構建：主要就是less、模板、coffee等的預處理以及對代碼壓縮和合並
Gulp：基於流構建，速度快、模塊質量好
Grunt：獨立任務構建，速度慢，配置蛋疼，靈活性高
預處理和模板引擎
less：語法簡單，但功能有限
jade、ejs、velocity等模板引擎，各有各的長處
coffee：python工程師最愛，我沒用過
環境搭建：主要是將線上代碼映射到本地，並在本地啓動一個demo服務器，至於模擬數據的mock，見仁見智了
本地代理：ihosts
自動化測試：在業務較爲穩定的情況下，可以通過自動化測試來減少測試的事件，但需求較多的時候，維護測試用例的成本會很高，可能用自動化測試會起到反效果
jasmine
mocha
生態系統
npm
bower
spm
搭建一個屬於自己的博客
git pages
hexo
jekyll
Web Componets：面向未來的組件化開發方式
HTML模板
Shadow DOM
Custom Elements
HTML Import
移動端Native開發：這也是需要了解的，以後Web前端工程師會經常地和Webview打交道，也要了解native開發。
當然，以上小編分享的技能能夠幫助你成爲一個合格的Web前端工程師。不管學習什麼內容，基礎是很重要的，學習Web前端技術也是一樣的，技術知識打牢，多看多問多敲代碼。相信堅持就可以學會這門技術，也可以去全面系統學習一下。。