Web前端發展史（自我成長技術路線圖）

前端究竟是個啥

前端實際上是個很大的範疇。我這裏只針對 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.」這是個生態圈的概念（最先見於谷歌教父 在《黑客與畫家》中對於瀏覽器生態的想法），包括瀏覽器，包括微信、支付寶都已經早早走在了這條「不歸路」上。