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.”這是個生態圈的概念（最早見於谷歌教父 在《黑客與畫家》中對於瀏覽器生態的想法），包括瀏覽器，包括微信、支付寶都已經早早走在了這條“不歸路”上。

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，程式設計工作第六個年頭了，與大家分享一些學習方法，實戰開發需要注意的細節。784-783-012 秋裙。從零基礎開始怎麼樣學好前端。看看前輩們是如何在程式設計的世界裡傲然前行！不停更新最新的教程和學習方法（web前端系統學習路線，詳細的前端專案實戰教學視訊，PDF），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。我們會一起結伴同行 學習前端我們是認真的

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2667854/，如需轉載，請註明出處，否則將追究法律責任。