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服務端與客戶端、 http://Socket.IO。

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

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

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

設計模式、數據結構、算法、框架設計原理（前端的高級知識，主要學習語言的底層、項目的原理）

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

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