6年全棧工程師回答：web前端的主要學習什麼，現在還有前途嗎？一般工資是多少？

首選我不明白你為啥沒有對前端工程師這個行業在有一定了解之後再展開學習，下面備註是說正在學習這個，我就一臉問號了(？？？？？) 可能你還是大學生吧，對於工資多少，不同地區，一線二線，三線四線城市都是有差異的，你可以透過招聘網站去看，眼見為實嘛！（這裡推薦：智聯招聘，拉勾網，BOSS直聘等...別去58同城，之前有些夥伴跟我說他去58同城上看前端的招聘，驚呆我了！）

首先，你想知道前端是個啥，那麼你一定要知道前端是怎麼來的！回答比較長......大家有耐心的可以看下去，綜合了一些權威論壇上的資料而來。

前端其實是個很大的範疇。我這裡只針對 web 開發的前端而言（下文統稱前端）。簡單點說，針對瀏覽器的開發，瀏覽器呈現出來的頁面就是前端。它的實質是前端程式碼在瀏覽器端被編譯、執行、渲染。前端程式碼主要由三個部分構成：HTML（超文字標記語言）、CSS（級聯樣式表）、JavaScript。如圖：

前端發展歷程

前端也算是經歷了一個比較漫長的發展過程，大致歷程可以分為以下幾個階段：

上古時代：

這個節點不得不說一下，世界上第一款瀏覽器 NCSAMosaic，是網景公司（Netscape）在1994年開發出來的，它的初衷是為了方便科研人員查閱資料、文件（這個時候的文件大多是圖片形式的）。那個時代的每一個互動，按鈕點選、表單提交，都需要等待瀏覽器響應很長時間，然後重新下載一個新頁面給你看，大概是這樣：

同年 PHP（超文字前處理器） 指令碼語言被開發出來，開啟了資料嵌入模板的 MVC 模式，同時期比較類似的做法有以下幾種：

• PHP 直接將資料內嵌到 HTML 中。

• ASP 的 ASPX，在 HTML 中嵌入 C# 程式碼。

• Java 的 JSP 直接將資料嵌入到網頁中。

這個時期，瀏覽器的開發者，以後臺開發人員居多，大部分前後端開發是一體的，大致開發流程是：後端收到瀏覽器的請求 ---> 傳送靜態頁面 ---> 傳送到瀏覽器。即使是有專門的前端開發，也只是用 HTML 寫寫頁面模板、CSS 給頁面排個好看點的版式（要不是我堂堂程式設計師看不上這點活，你們這些個切圖仔就得要飯去~）。

鐵器時代（小前端時代）

1995年，這是個好年份，又是這個搞事的網景公司，拜託一位叫布蘭登·艾奇的大佬，希望開發出一個類似 Java 的指令碼語言，用來提升瀏覽器的展示效果，增強動態互動能力。結果大佬喝著啤酒抽著煙，十來天就把這個指令碼語言寫出來了，功能很強大，就是語法一點都不像 Java。這樣就漸漸形成了前端的雛形：HTML 為骨架，CSS 為外貌，JavaScript 為互動。

同時期微軟等一些公司也針對自家瀏覽器開發出了自己的指令碼語言。瀏覽器五花八門，雖然有了比較統一的 ECMA 標準，但是瀏覽器先於標準在市場上流行開來，成為了事實標準。導致，現在前端工程師還要在做一些政府古老專案的時候，還要去處理瀏覽器相容（萬惡的 IE 系列）。

不管怎麼說，前端開發也算是能寫點邏輯程式碼了，不再是隻能畫畫頁面的低端開發了。隨著1998年 AJax 的出現，前端開發從 web1.0邁向了web2.0，前端從純內容的靜態展示，發展到了動態網頁，富互動，前端資料處理的新時期。這一時期，比較知名的兩個富互動動態的瀏覽器產品是：

• Gmail（2004年）

• Google 地圖（2005年）

由於動態互動、資料互動的需求增多，還衍生出了jQuery（2006） 這樣優秀的跨瀏覽器的 js 工具庫，主要用於 DOM 操作，資料互動。有些古老的專案，甚至近幾年開發的大型專案現在還在使用 jQuery，以至於 jQuery 庫現在還在更新，雖然體量上已經遠遠不及 React、Vue 這些優秀的前端庫。

資訊時代（大前端時代）

自 2003 以後，前端發展渡過了一段比較平穩的時期，各大瀏覽器廠商除了按部就班的更新自己的瀏覽器產品之外，沒有再作妖搞點其他事情。但是我們程式設計師們耐不住寂寞啊，工業化推動了資訊化的快速到來，瀏覽器呈現的資料量越來越大，網頁動態互動的需求越來越多，JavaScript 透過操作 DOM 的弊端和瓶頸越來越明顯（頻繁的互動操作，導致頁面會很卡頓），僅僅從程式碼層面去提升頁面效能，變得越來越難。於是優秀的大佬們又幹了點驚天動地的小事兒：

• 2008 年，谷歌 V8 引擎釋出，終結微軟 IE 時代。

• 2009 年 AngularJS 誕生、Node誕生。

• 2011 年 ReactJS 誕生。

• 2014 年 VueJS 誕生。

其中，V8 和 node 的出現，使前端開發人員可以用熟悉的語法糖編寫後臺系統，為前端提供了使用同一語言的實現全棧開發的機會（JavaScript不再是一個被嘲笑只能寫寫頁面互動的指令碼語言）。React、Angular、Vue 等 MVVM 前端框架的出現，使前端實現了專案真正的應用化（SPA單頁面應用），不再依賴後臺開發人員處理頁面路由 Controller，實現頁面跳轉的自我管理。同時也推動了前後端的徹底分離（前端專案獨立部署，不再依賴類似的 template 檔案目錄）。在這裡解釋下 MVVM 模式：

• Model：提供/儲存資料

• View：檢視

• View-Model：簡化的 Controller，唯一的作用就是為 View 提供處理好的資料，不含其它邏輯

至於為啥 MVVM 框架能提升前端的渲染效能，這裡簡單的總結下原理，因為大量的 DOM 操作是效能瓶頸的罪魁禍首，那透過一定的分析比較演算法，實現同等效果下的最小 DOM 開銷是可行的。React、Vue 這類框架大都是透過這類思想實現的，具體實現，大家感興趣的可以去翻下原始碼哈，這裡不做展開。前端分離也導致前端的分工發生了變化：

後端更加關注資料服務，前端完全控制自己的各種行為，可玩性更高。當然相應的學習成本也越來越大，node的出現也使得前端前後端一起開發成為可能，好多大公司在 2015 年前後就進行了嘗試，用 node 作為中間資料轉接層，讓後端更加專注於資料服務和治理。

全能前端時代

2009年開始，大屏智慧手機開始陸續出現，到後來 4G 行動網路的普及。使得前端從單一的基於的 PC 瀏覽器 展示的 web 應用，開始向手機、平板覆蓋（HTML，CSS，JavaScript 也陸續推出了自己的新標準）。前端對於跨端瀏覽的需求越來越大，前端不再僅僅是 PC web 方面的開發，手機配置，與 app 進行 hybird 開發，變成了常態。甚至於 Facebook 推出了 React-Native，國內微信、支付寶推出小程式，試圖整合web、native 開發。為什麼會有這樣的情形發生呢，網速越來越快，硬體效能越來越好，js 在各個終端的執行能力與 native 開發（IOS、Android）的差距越來越小，就讓我們搞事兒（喜歡偷懶）的程式設計師們想著能不能寫一套程式碼，然後四處執行呢。

能的，這個可以有，React-Native，小程式，以至於後來出現的 Electron，使得用 JavaScript 開發桌面應用都成為了可能（VSCode）。谷歌近兩年也推出了 Flutter 的開發語言，可以實現一套程式碼，多處執行（web、app）。前端真的不再是隻能切圖，開發靜態頁面的前端。後端可以搞、爬蟲可以搞（node），app 可以寫（Weex、RN、Flutter），桌面應用可以開發（Electron）,演算法和語言的嚴謹性還有點短板，但是 TypeScript 的出現，以及後續 ECMA 標準的近一步完善，會使得前端更加的全能化，也可能會出現更多的細分工作領域。

最後，告訴大家“Any application that can be written in JavaScript, will eventually be written in JavaScript.”這是個生態圈的概念（最早見於谷歌教父 在《駭客與畫家》中對於瀏覽器生態的想法），包括瀏覽器，包括微信、支付寶都已經早早走在了這條“不歸路”上。

5G時代來臨，各行各業對產品的使用者體驗需求空前大增。人們在享受網際網路帶來的便捷也給網際網路產品提出了新的需求，這意味著前端開發人員也有了更多的機會和挑戰。無論是大小公司，對前端開發工程師的需求都是在快速上漲，薪資待遇也隨之上升很快。

前端開發工程師就業機會多，創業機會多，且就業範圍廣，幾乎各行各業都有需要，網際網路公司、金融，貿易等等都能進。

1、前端工程化

在前端工程程化中，開發者最重要的基本素養就是透過工具提升效率，前端開發者在這些工具下會持續迭代和最佳化。

展望2020年前端的發展，前端工程體系一定會更加閉環，不再是一個腳手架這麼簡單，而是會結合 IDE，打通業務屬性，從專案初始化、到編寫程式碼、到 CI、到灰度、到釋出 形成一個完成的閉環。

2、跨端開發

今年很多團隊轉戰谷歌常態的 Flutter，特別是 Flutter for Web 的第一個 Release，這讓 Web 前端重燃希望、躍躍欲試。

同時，蘋果公司也釋出了全新的 UI 系統——SwiftUI，同時，開源社群中 SwiftUI for Web已經在路上了，SwiftUI for Android 還會遠嗎？

跨端開發，Flutter 仍會快速發展，並且會有更多的開發者，Flutter on JS、SwiftUIfor Web&Android 也將是開源動態值得期待的事情，畢竟跨端仍沒有一個完美的解決方案。

3、小程式

今年是微信小程式突飛猛進的一年，在微信小程式出現以前，大家在談 Hybird、ReactNative，但終歸只是技術層面的狂歡，始終沒有業務屬性的注入。小程式的出現，一方面告訴業界在當前裝置上 Webview 也沒差到哪去，另外一方面告訴業界如何讓有能力的商家在超級 APP上進行私域運營。

另一方面，從技術角度說，在上層 DSL 的嚴格限制下，超級 APP 就可定義符合自己訴求的 Web 標準，彌補當前 Web 標準的不足，最後和客戶端配合，結合離線、預載入、定製Webview 能產出類似於 NSR 等各種酷炫的技術模型，讓 Web 在端內低成本達到 Native 版的體驗，端外也不會像 Weex 一樣有點小別扭。

不過由於需要依賴超級APP（微信、支付寶、百度、美團、頭條等），由於各家平臺採用的具體方案的差異，造成目前小程式的落地方案也不一樣，有時候需要開發多套程式碼。

4、Serverless 讓前端離業務更近

當前的前端工程師大多都是科班出身，雖不能和正宗的服務端開發同學比，但也可寫很多服務端層的業務邏輯。當前已經有很多公司在做 BFF 層，來滿足這部分訴求，但依舊擺脫不掉 運維、機器分配 這條攔路虎。

2019 年幾乎所有知道名字的公司都在談 Serverless（雖然並沒有人知道如何落地 Serverless），隨著 Serverless 的逐步落地，BFF 這層的程式碼會擺脫運維、機器分配等複雜的問題，同時大機率會由前端同學寫這部分程式碼，服務端同學專注中臺系統的實現。從業務上說，業務的試錯成本也會大幅度降低。

5、5G

2019年一個繞不開的話題就是5G。首先，5G 頻寬的增幅提升帶來傳統 Web前端複雜度的進一步提升，如同 2G 到 4G 變化過程中從 WAP 的純文字超連結時代變化到 4G 全圖片影片時代。5G 對於web前端的變化必將是巨大的，但肯定不會一蹴而就。因為相應的配套設施也需要逐步完善，如硬體效能和瀏覽器的處理速度。服務端渲染（SSR）肯定是其中一個捷徑，輕前端重後臺，5G 是橋樑，把渲染放後臺，不像同構那麼簡單，需要關注和最佳化渲染效能。WebAssembly 或許會在這個機遇下得到快速發展，因為它可以無縫對接後臺多種語言，前後臺渲染的最佳化也會帶來前端研發模式和技術架構的變化。

其次，5G 帶來的萬物互聯，⼜將帶來有別於智慧手機和普通 PC 的多樣化的應用場景，VR、可穿戴裝置、穿載系統、智慧投影、智慧互動等會把 Web 帶到各種各樣的垂直領域，這也意味著前端將有更多廣闊的空間。相信隨著5G的大規模商業，會誕生一批新的網際網路巨頭。

以上，大家能理解多少就理解多少，其實對於初學者來說，大家是接觸不到這個層次的，新技術的學習，更多的是鍛鍊1-5年的前端開發工程師。總的以上就是回答前端到底有沒有前途，學完之後是不是找不到工作了，或者錢少了。這個你不用擔心，技術在手，天下你有。技術不行怎麼辦？學啊，做程式設計師，你不學是拿不到多少錢的，多的是3,5年工齡的程式設計師被倒勾，抱怨工資沒有應屆生的高，說實話，抱怨是沒有用的。

Web前端的工資情況：

全國前端開發平均工資：¥9541元/月，最低工資2K-3K，最高工資20K-30K。

北京前端開發平均工資：¥13220元/月，最低工資4.5K-6K，最高工資30K-50K。

上海前端開發平均工資：¥13460元/月，最低工資4.5K-6K，最高工資30K-50K。

（這個是某聯統計的，開頭就說過了，你們大可去招聘網看，不過注意了，很多線下機構偽裝成招聘公司的，以後大家學完面試，也要注意這一點！至於如何躲避這種情況，可以到我們們的學習圈來，把秘訣交給你）

Web前端學習包括了幾個方面的內容：

第一階段：HTML+CSS:HTML、CSS基礎、div+css佈局

JavaScript基礎：Js基礎教程、js內建物件常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。

JS基本特效：例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴選單、瀑布流佈局、滾動事件、滾差檢視。

JS高階特徵：正規表示式、排序演算法、遞迴演算法、閉包、函式節流、作用域鏈、基於距離運動框架、物件導向基礎

JQuery基礎使用：懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI元件基本使用

第二階段：HTML5和移動Web開發

HTML5：

HTML5新語義標籤、HTML5表單、音訊和影片、離線和本地儲存、SVG、Web Socket、Canvas.

CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

Bootstrap:

響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

移動Web開發：

跨終端WEB和主流裝置簡介、視口、流式佈局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚划算頁面、手機滾屏。

第三階段：HTTP服務和AJAX程式設計

WEB伺服器基礎：伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

PHP基礎：PHP基礎語法、使用PHP處理簡單的GET或者POST請求、

AJAX上篇：Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest物件詳細介紹方法、相容性處理方法、Ajax框架的封裝、Ajax中快取問題、XML介紹和使用。

AJAX下篇：JSON和JSON解析、資料繫結和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

第四階段：物件導向進階

物件導向終極篇：從記憶體角度到理解JS物件導向、基本型別、複雜型別、原型鏈、ES6中的物件導向、屬性讀寫許可權、設定器、訪問器。

物件導向三大特徵：繼承性、多型性、封裝性、介面。

設計模式：物件導向程式設計思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、介面卡模式、面向切面程式設計。

第五階段：封裝一個屬於自己的框架

框架封裝基礎：事件流、冒泡、捕獲、事件物件、事件框架、選擇框架。

框架封裝中級：運動原理、單物體運動框架、多物體運動框架、運動框架物件導向封裝。

框架封裝高階和補充：JQuery框架雛形、可擴充套件性、模組化、封裝屬於傳智自己的框架。

第六階段：模組化元件開發

面向元件程式設計：面向元件程式設計的方式、面向元件程式設計的實現原理、面向元件程式設計實戰、基於元件化思想開發網站應用程式。

面向模組程式設計：AMD設計規範、CMD設計規範、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：主流的流行框架

Web開發工作流：GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：Angular.js、Backbone.js、Knockout/Ember。

常用庫：React.js、Vue.js、Zepto.js。

第八階段：HTML5原生移動應用開發

Cordova：WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關係、開發環境搭建、Cordova實戰（建立專案，配置，編譯，除錯，部署釋出）。

Ionic：Ionic簡介和同類對比、模板專案解析、常見元件及使用、結合Angular構建APP、常見效果（下拉重新整理，上拉載入，側滑導航，選項卡）。

React Native：React Native簡介、React Native環境配置、建立專案，配置，編譯，除錯，部署釋出、原生模組和UI元件、原生常用API。

HTML5+：HTML5+中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5+開發和部署。

第九階段：Node.js全棧開發：

快速入門：Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制檯程式、非同步程式設計，非阻塞I/O、模組概念，模組管理工具、開發流程，除錯，測試。

核心模組和物件：全域性物件global，process，console，util、事件驅動，事件發。射。器、加密解密，路徑操作，序列化和反序列化、檔案流操作、HTTP服務端與客戶端、 。

Web開發基礎：HTTP協議，請求響應處理過程、關係型資料庫操作和資料訪問、非關係型資料庫操作和資料訪問、原生的Node.js開發Web應用程式、Web開發工作流、Node.js開發Blog案例。

快速開發框架：Express簡介+MVC簡介、Express常用API、Express路由模組、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。

Node.js開發電子商務實戰：需求與設計、賬戶模組註冊登入、會員中心模組、前臺展示模組、購物車，訂單結算、線上客服即時通訊模組。

設計模式、資料結構、演算法、框架設計原理（前端的高階知識，主要學習語言的底層、專案的原理）

回答中有提過我們們的學習圈，也是我跟朋友們一起建立的學習基地，我也會在裡面免費給大家傳授前端知識，幫助大家解決前端學習上的迷茫，找到正確的方向來學習，技術也是最新的技術，大家可以放心。

感興趣的小夥伴，可以加入進來： web前端學習③