前端學習路線
先附上一張網上廣爲流傳的前端知識體系圖：前端知識體系
從大圖中我們總結出：
優秀的Web前端開發工程師 要在知識體系上既要有 廣度 和 深度！應該具備快速學習能力。
前端開發工程師 不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
前端工程師至少都要滿足四類客戶的需求：
1、產品經理。這些是負責策劃應用程序的一羣人。他們會想出很多新鮮的、奇怪的、甚至是不可能實現的應用。一般來說，產品經理都追求豐富的功能。
2、UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師侯傾向於流暢靚麗、但並不容易實現的用戶界面，而且他們經常不滿前端工程師造成
1px 的誤差。
3、項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是儘量保持事情的簡單化，以及不在升級更新時引入新問題。
4、最終用戶。指的是應用程序的主要消費者。儘管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。
好了，列舉了這麼多…… 你真的還想學前端麼？不後悔吧？ 如果真的做好了準備的話，哈哈，那我們就一起享受學習前端的樂趣吧！
一、基礎
想成爲前端開發者應該先打好基礎：
HTML > CSS > JavaScript > jQuery >。。。> GitHub
不要擔心以後會做什麼決策，先好好深入學習。
在增值的方向上投資自己，纔是最明智的。
學習了HTML、CSS就可以實現一些靜態頁面，不只是簡單的靜態頁面，應該是稍微複雜一些絢麗一點的頁面。
推薦書籍：《CSS禪意花園》
二、JS
JS可以跟着以下幾張思維導圖學習（聽說是一位名爲“王子墨”的大師做的圖）：學習 Javascript 首先要知道這門語言可以做什麼，不能做什麼，擅長做什麼，不擅長做什麼！
1.JS變量
2.JS運算符
3.JS數組
4.JS流程語句
5.JS字符串函數
6.JS函數基礎
7.JS基礎DOM操作
8.JS正則表達式
9.JS數據類型
深入瞭解Javascript，需要了解 Javascript 的原理，機制；需要知道他們的本源；需要深刻了解 Javascript 基於對象的本質；還需要深刻了解瀏覽器宿主下 的 Javascript 的行爲、特性。他也有很多缺點，各個宿主環境下的行爲不統一、內存溢出問題、執行效率低下等問題，需要深入瞭解、學會處理這些缺陷。
推薦書籍：
初級：
《JavaScript高級程序設計》
《JavaScript王者歸來》
中級：
《JavaScript權威指南》
《JavaScript.The.Good.Parts》Douglas Crockford
《高性能JavaScript》：Nicholas C. Zakas
《Eloquent JavaScript》：
高級：
《JavaScript Patterns 》
《Pro.JavaScript.Design.Patterns》講解JavaScript設計模式
《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較爲深入的講解，同時也對一些流程的庫進行了講解。
三、後端語言
如果單純只是學習前端編程語言、而不懂後端編程語言（Java、PHP、ASP.NET，JSP、Python），也不能算作是優秀的前端工程師。
四、學習方法建議
1.限制一次學習的量，並且不斷地實踐——實際編寫代碼。
舉個例子：就像學習數據結構一樣，我有個同學A學習數據結構單純的把書帶到圖書館去看，我問A爲什麼不帶電腦，A回答說光是看就已經看不懂了。能發現問題麼？有時候我們可能看不懂代碼，但是動手敲一遍可能會更認真的跟着代碼的思路走一遍，在運行出來結果或者跟着調試的時候
纔會恍然大悟！喔喔！原來是這個樣子的！同學A數據結構學了好幾遍都沒有學好，而另外一個同學B卻對數據結構十分熟悉、筆試面試幾乎難不倒他，他跟我分享學習經驗的時候就告訴我，一定要動手敲！而且不止要敲一遍！
——這也是很多人會走彎路，而很多人只會走捷徑的關鍵。
2.用正確的心態去做練習，當成玩耍或者遊戲。
3.寫代碼的時間魔法，先告訴自己只寫10分鐘，然而就會陷進去乃至一下午。
4.思考得更慢，學得更快。就像你在去理解別人的代碼的時候一樣，不要漏掉任何一行！
5.首先用簡明的語言來寫複雜的代碼。這是一種鍛鍊！
6.定期定目標，每天都看看，想想，保持敏感、緊迫感、期待感。
7.記筆記：
- 學習過程中搜集的資源鏈接；
- 遇到的未決的疑問；
- 那些很寬而我們用的很窄的知識點；
- 那些能進一步深入而我們淺嘗輒止的知識點；
- 某個功能可能存在的其它實現方案的蛛絲馬跡
還有些好書：
- 《Developing Large Web Applications》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內容卻都非常不錯，真正考慮到了一個大型的Web程序下，如何進行JavaScript架構設計，值得一讀。
- 《高性能網站建設指南》
- 《Yahoo工程師的網站性能優化的建議》
- 《網站重構》
- 《Web開發敏捷之道》
最好的資料就是某項技術的官方SDK，一般技術都有文檔，API，Quick Start，Guide，Tutorial，Demo，Example……結合書看效果最好。
其他：
- “YSLOW”性能優化建議
- “ jQuery 庫”
- “前端框架”
- “HTML5”
- “CSS3” 深入研究
這兒還有不知道自己何時收藏的“前端有關的語言”:
網站：
前端大神
A Single Div
騰訊ISUX
WEB開發者
SegmentFault
有經驗的人，新學一門技術，就要努力放空自己，讓自己歸零，這樣會比較容易學進去，堅持下來。堅持最重要！
參考：
更快學習JavaScript的6個思維技巧
怎樣新學一門技術
如何成爲優秀的前端工程師