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前端技術也是一樣的，技術知識打牢，多看多問多敲程式碼。相信堅持就可以學會這門技術，也可以去全面系統學習一下。。