本文大部分內容來自知乎live—免費前端教程不會告訴你這些。

筆者感覺這裡live整體質量不錯，大綱如下：

對前端感興趣的同學可以去聽聽學習一下，一定會受益匪淺的。本文重點摘錄了前端的發展歷史和前端進階過程中的建議。

【觀點摘錄】

• 1 大廠不會在意你會不會某一個框架，他只在意你能不能再兩個月之內快速學習上手一個新框架。

• 2 如果你已經工作三年了，別人是不好意思罵你的（當然有意提攜另說）。但當你是新手時，就應該在空白期儘可能暴露自己的缺點，然後及時修補（一定要補）。

• 3 只有運氣特別好時，公司的專案才可能帶著你跑，一般情況下，公司的業務並不能帶給你提升，碼農需要有自己的side project。

• 4 看書|總結|輸出（寫或演講）。學習的效果依次遞增。

• 5 判斷基礎的方法：去找該專業最經典的書，看目錄，然後在腦海中回憶這些章節的內容。看三本，就知道自己基礎的薄弱處。

• 6 科班生和非科班生的差距僅僅是前者在無所事事時做了正確的積累，而你那時可能還在打遊戲。

【前端歷史】

1.混沌之初

在網際網路誕生的初期，並沒有前端工程師這一概念。網頁一開始是由後端程式設計師開發的。其網站特點是無設計、佈局簡單、樣式樸素，沒有動畫。因為他們是用table做簡單的佈局。

2.美工救場

後來由於審美需求，增加了美工這一職位，他們用ps製作網站的設計圖，然後編寫css+div佈局的html（該方式替代了table佈局）。

3.gmail釋出

2004年google釋出gmail，這一里程碑標誌著web app的概念正式登上歷史舞臺。全世界的程式設計師發現利用js居然還能做出具備pc端功能的應用。於是乎，有一部分程式設計師開始著手於js的研究。

4.前端第一次革命——ajax

gmail出世後，越來越多的後端工程師投入到js中去，從JavaScript的命名也能看出，js早在前期有討好java程式設計師的傾向。

ajax本質是利用js傳送http請求，並將獲取的資料填充到頁面中去。微軟是最早使用js傳送http請求的，早在IE5裡，微軟就內建了一個物件可以利用js傳送請求。可以說微軟提出了ajax的概念，google發揚它。

此時編寫網頁的模式就是：美工負責頁面細節+後臺編寫業務邏輯+後臺編寫js完成互動

5. 提升使用者體驗階段——前端工程師粉墨登場

在使用者體驗不斷被強調的背景下，頁面裡js的複雜程度隨著互動的複雜不斷提升。後臺程式設計師在維護js程式碼上表現地越來越分身乏術，畢竟他們還需要維護後臺的邏輯。在這種情況下就需要一個人員，專門來負責編寫頁面當中複雜的js邏輯。至此，前端工程師正式登上歷史舞臺。

此時的工作模式如下： （1）設計師：負責網站設計稿和標註 （2）後端：負責網站後臺業務邏輯 （3）前端：負責網站的表現和互動部分（html+css+js）

這樣的工作模式使用一段時間後，就發現了一些問題。

前端的html程式碼是依賴於後端的模板引擎的。例如html檔案正在後端是以jsp的形式存在的，那麼前端在編寫js部分的程式碼時，若果想要看到完整的頁面，就必須具備與後端相同的開發環境。

也就是說，前端工程師需要把後端的程式碼放在本地，然後將後端工程執行起來，成功之後，再在jsp（模板檔案）裡編寫js程式碼。

所以，這樣就容易導致前後端分工不清，而且在開發流程上存在比較嚴重的依賴關係。

6. 剝離階段——前後端職能強化

從第5個階段的描述可以看出，在傳統的服務端渲染頁面模式下，前後端存在分工不明確，開發流程耦合的情況，為了提升開發效率，必須做適當的剝離。

（1）html完全由前端控制，後端服務化，不再觸碰UI層。 （2）資料介面化。後臺提供介面供前端呼叫，前後端通過ajax的方式通訊。 （3）人員分離。前端後端一撥人，後端一撥人。

至此前後端的配合模式定型。但是新的問題也出現了，雖然不是技術上的問題。

這樣分工協作後，我們再來梳理一下前後端的職能： （1）前端：負責頁面樣式、UI。 （2）後端：提供介面服務（業務邏輯實現）；轉存資料至資料庫；

那麼對於公司而言哪個職位更重要呢？答案一定是後端，因為他管理著重要的資料和核心業務邏輯的強驗證（雖然前端也會驗證，但是前端的強制性明顯弱於後端）。前端呢？負責UI。

因此可以看出前後端分家後出現了一個新的問題：職能強化了，但能力範圍縮小，致使前端看起來“不那麼重要”。

7.前端第二次革命——移動端裝置興起

移動裝置興起帶來最直接的挑戰有如下幾點： （1）適配。硬體裝置（主要是螢幕）的適配（響應式）和移動端瀏覽器核心的適配。 （2）頁面效能優化，尤其是在弱網情況下的快速訪問能力。

此時在移動端的浪潮中，前端的地位進一步的強化，至此前端開發的概念也開始有了細分： （1）客戶端開發：特指android開發和IOS開發 （2）PC端開發：PC瀏覽器裡網頁 （3）H5：嵌入在移動裝置裡的網頁 （4）PC客戶端：不依賴於瀏覽器的PC桌面應用。

上述4個領域的內容，在後期被合併成一個詞——大前端。

8. 第三次革命——Node.js 閃亮登場

nodeJS的革命性在於：它讓JS的執行脫離了瀏覽器。這就意味著在前端工程師可以利用js在桌面、伺服器、甚至移動端編寫js程式碼。極大地豐富了前端工程師的開發場景（有點像萬金油的德魯伊）

在效能優化的過程中，我們時常需要對圖片、程式碼進行壓縮，打包，以減少瀏覽器的請求次數。同時，由於開發內容的日益增多，提高程式碼的複用性也被越來越多的前端工程師重視。於是自動化和模組化的呼聲越來越高。

在自動化方面，出現了幾款比較有代表性的工具，例如grunt、gulp再到後來的大名鼎鼎的webpack。當然伴隨著這些工具誕生的，還有成千上萬的外掛，諸如解決相容性的babel、壓縮JS的uglyfy等，可謂是百花齊放。

在模組化方面，首先是對css的模組化，出現了諸如sass、scss的利用函式程式設計的方式編寫css的庫，提升前端工程師對css的複用程度。

接著是js方面angularJs，vueJs，reactJs，在ES6的基礎上應用而生，同時還伴隨著諸多優秀的UI元件庫，例如antd、谷歌的material 。極大地豐富了前端工程師在開發工程中的選擇性。

在node的加持下，js能力的不斷提升，js開始向各個領域延伸。

• 移動端H5:angularJS、vue、react三分天下。
• 客戶端開發：react native（本地跨平臺）、Ionic（載入移動瀏覽器）
• 服務端開發： 以Koa和express為代表的框架
• 桌面客戶端： node（後臺程序）+webKit（UI層）模式的NW.js、electron

那麼到這裡，就可以看到js所延伸的領域已經非常廣泛。雖然前端程式設計師“搶”了不少活兒，但是綜合上來看，工資與後端、演算法工程師之間依然存在差距。

【關於JS萬金油的思考】

從上述歷史可以看出JS涉獵的範圍在不斷擴大，似乎只要會了JS，各種以JS為程式語言的框架就已經算入門了，那麼是不是意味著之前傳統的工程師們會被前端工程擠兌不？

答案肯定是否定！原因概括成一句話就是：程式語言是共通，但都有自己特定的套路。

以後端為例，在編寫服務應用時需要考慮非常多的問題，例如： （1）記憶體洩漏問題； （2）程式的併發性； （3）與業務耦合的許可權的控制； （4）與資料庫的連結，以及跨程序通訊； （5）服務端的快取，會話的保持。 這些問題對於一個只寫過html+css+js的前端程式設計師而言都是陌生的。可能他能夠快速上手編寫後臺應用，但是卻很難在沒有打通關鍵點的情況下編寫出高質量的應用。

再以android為例子，依然是存在和上面相同的問題，所以往往在實際開發的過程中，團隊配比都是：若干個XX工程師+至少1位資深android工程師+至少1位資深IOS工程師。之所以都是資深的原因很簡單，那就是當混合開發出現了難以解決的問題時，就需要這些資深的原生工程師去填坑。

所以JS跨平臺跨領域的特性並不能完全擠兌掉已有的工程師們，但是一定程度上會增加他們所在領域的技能專精。即數量可以減少，但質量會提高。

【前端進階】 一年前端：

• 從60分到80分：不再僅僅滿足能用，同時要關注使用者體驗，完善功能。
• 模仿元件：看一下別人的程式碼，不要複製貼上，看的差不多了自己手動寫，然後對比，刪掉，再重寫寫，如此往復。
• 不要重複自己：在工作的過程中，不要重複自己所做的內容，要麼所有改進，要麼換一個崗位。
• 不要滿足於呼叫API：能不能製作一些東西給別人用。

三年前端：

• 不在關注程式碼寫的好不好，關注工作效率。儘量不加班，把常用的工具封裝成元件，供自己或別人呼叫。或者把自己遇到的問題記錄下來，避免自己後面再犯錯誤。
• 做一些分外的事情：後端、產品、設計。
• 管理上級，籠絡評級（處理好人際關係）
• 變成重要的人：對產品能夠有深入的瞭解，記住了工作中重要的事情。（是不是別人有問題都來問你？）
• 堅持寫部落格：對於產品、工作過程中思考和總結。
• 模仿框架

筆者個人訂閱號~歡迎小夥伴們關注

若有疑問可以QQ聯絡筆者，雖然不一定100%解決你的問題，但是可以交流探討一波：2276604211