互聯網前端的發展史

互聯網的前端的發展史，也是不斷解決問題的歷史，從初期如何構建更好的頁面，產生了HTML、CSS、JavaScript；到後面如何產生更好的用戶體驗，出現了Ajax、jQuery等；到後面互聯網應用愈來愈豐富就開始面對如何更快的產生了更多的應用，而後又出現了先後端分離框架，如 AngularJS、  ReactJS 、 VueJS 等。

---

1、互聯網的初期，圍繞着如何能構建更好的頁面展開

互聯網伊始以HTML-超文本標記語言爲基礎的網頁開發開始引發了每一個普通人的注意，當網景公司開創了最先的圖文瀏覽器時，全世界的目光都聚焦在這個窗口上。經過網絡IP地址訪問各類各樣的網頁是最初人們網上衝浪的興趣所在。

可是人性的懶惰是根深蒂固的，IP地址的逆人性特質很快就遭到了嫌棄。因而便於記憶的域名技術應運而生，其本質上解決的是便於記憶，方便使用。域名須要綁定對應的IP地址才能實現訪問，因此須要有一個域名解析服務器（DNS）去作這件簡單的使人髮指的事情。

看似風平浪靜的繁華，實際上只是暗流涌動的假象。互聯網的屬性本就是人人蔘與，也就意味着每一個開發者的習慣都是截然不同的，這也是爲何HTML這個語言有那麼多廢棄的標籤的緣由——人們只想單純的實現本身的效果，標籤上的style屬性已經不能知足於人們瘋狂的訴求。因而<center><font> <color> <s><strong>等一系列標籤解決了燃眉之急。這樣發展下去根本不利於後期的維護和擴展，因而人們發明了CSS-層疊樣式表來解決這個問題。經過編寫和維護一份樣式代碼多個頁面實現統一的效果。

後來人們有了搜索或者登陸的需求場景，有了最先的用戶交互行爲，當時的網速不好（以kb爲單位），用戶輸入信息提交後，須要等很長時間才能從服務器返回結果，結果返回了一個錯誤，這樣的交互體驗是極差的。網景公司首先想到了這一點，讓布蘭登開發一種在瀏覽器運行的腳本語言，經過發送信息前校驗用戶的輸入，優化交互體驗，這個僅用了10天就創造出來的語言就是LiveScript，因爲當時背景下SUN公司的Java語言很火爆，因而網景公司順勢將該語言改名javascript——請注意javascript與Java一點關係都沒有，可是兩個語言都有互相借鑑的部分。

至此，前端三大技術基本成型。javascript提供的DOM和BOM對象，實現了操做頁面文檔和瀏覽器的api接口，微軟發佈IE也實現了操做DOM和BOM的功能-JScript，愈來愈多的瀏覽器開始出現，致使了開發人員要編寫兼容性的代碼，這讓項目開始變得難以維護。互聯網的創始人蒂姆伯納斯李組建了W3C組織來制定互聯網技術的相關技術標準，第一次瀏覽器大戰落下帷幕。

2、互聯網的發展期，圍繞着如何能構建更好的交互體驗展開

爲前端帶來轉折的是一種異步通信的技術-Ajax-Async JavaScript and XML。Ajax經過異步請求的方式，能夠在不刷新整個頁面的狀況下更新頁面的數據，第二次瀏覽器大戰就此展開。網景此時已經將精力關注在1：1對ECMA標準實現的FireFox上，IE發佈了4-6，Safari和Chrome也加入進來，還有Opera，這就是5大主流瀏覽器和5大瀏覽器內核的由來。

Ajax爲前端開發帶來了全新的交互方式和更友好的用戶體驗，在這個進程中各類javascript庫百花齊放。protoType ，DOJO，雅虎的YUI，Ext JS，Mootools，還有jQuery。可是jQuery憑藉着先天的優點——輕量的體積，完善的兼容性，強大的選擇器，鏈式操做，事件處理機制和完善的Ajax，以Write less, do more爲設計核心迅速的成爲了javascript庫的佼佼者。

瀏覽器的同源策略是爲了提高其安全性的一種機制，可是多服務器部署方式，讓開發者甚是頭痛。爲了解決使用其餘服務器文件資源，一種新的技術產生了——JSONP，經過使用具有跨域能力的Script標籤，引用其餘服務器資源，並經過callback回調的方式實現數據的交互。

跨域原本是一種很友好的方式，可是其安全性也一再接收考驗，XSS跨站腳本攻擊一時間狼煙四起。爲了應對這個安全問題——跨站資源共享方案出現了，經過在服務器端設置可接收的訪問方式，設置請求頭類型來防範XSS等網絡攻擊。固然還有再也不常常用到的iframe，也有相似的遭遇。

當解決了API兼容性的問題後，前端進入了快速的發展時期，2007年隨着移動設備的出現——移動互聯網的時代開啓了。對移動設備來講流量是他們關注的核心，移動端項目的第一任務是解決應用體積的問題，以及頁面的性能。Zepto庫的出現偏偏是移動端的一個型號，移動端輕量級的標準開始普及開來。隨着移動終端的屏幕尺寸愈來愈多，另外一個問題出現了——如何能開發一套代碼適配多個移動終端設備？——響應式佈局方案出現了。經過編寫一套代碼適配多種移動終端設備，便於維護減小成本。

這個時期，以bootstrap爲表明的UI框架出現了，也表明着前端進入了繁榮時期。經過使用媒體查詢API能夠動態的設置頁面的展現效果，從而在不一樣移動終端呈現完美的佈局和交互。

3、互聯網的成熟期，當技術愈發成熟，更快更友好的構建應用變得可能

當前端應用的體積迅速增大後，經過壓縮和合並方式，減小項目體積的工具大量涌現。UglifyJS，gulp,grount都是具備表明性的相關工具。而頁面的數量缺並無減小，人們經過抽取公共代碼的形式，將項目拆分紅不一樣的頁面結構——組件的模糊概念呼之欲出。經過組合不一樣的頁面結構，能夠減小不少的維護成本，還有開發量。目前市面上仍是能看到不少經過這種方式實現的項目。如今，webpack將全部的工程開發的工做集成一體，配置簡單易學，但卻功能強大。

最早到來的是模塊化，requirejs,seajs是這一時期很有表明性的兩個庫，經過將不一樣的功能代碼拆分，在不一樣的頁面中將模塊注入，來實現業務層和視圖層解耦。包括後期的commonjs都是在解耦的路上越走越遠。AMD規範和CMD規範是針對模塊化開發的兩種實現方式，它們都是爲了實現解耦而出現。緊接着對前端來講具備里程碑意義的angular出現了,同時表明着前端進入了框架時代。這相似於Java之於Spring Boot框架，經過將通用的模塊進行封裝成庫，減小了不少入坑的難題。讓開發人員不用再爲了項目環境抓緊掣肘。

對於前端來講，這一切都要歸功於 nodejs的誕生，將前端開發集成化和工程化開發推向了頂峯。angularjs經過將前端抽象成數據層，控制器層，視圖層開啓了一個單頁面應用的時代。這一方式充分的實踐了MVC開發思想。angularjs經過使用指令的方式實現DOM操做，事件綁定，路由控制，而且經過原生JS編寫相應的業務邏輯——固然其中還有單向數據流的開發思想實現。也正是由於angularjs，使得後來的不少框架借鑑了其優點，讓前端的開發方式變得愈加輕鬆。

當facebook面對一樣的項目開發問題的時候，發現當時的全部開發方式都不符合本身的預期。因而，facebook開發了一套開源的前端框架——react，經過JS的新特性，和良好的性能體驗，迅速得到了開發者的擁護。react在性能上的創新來自於虛擬DOM，經過虛擬DOM與真實DOM的比較修改對應的節點，以此來提升性能。然後來的Flux和redux都是借鑑angularjs的單向數據流思想的一種實現。經過使用狀態管理模塊，實現數據的可預測，以及數據狀態的集中管理和分發。

當國內還處於基礎的前端開發階段時，一個適合國內開發者的前端框架誕生了——vuejs。其同時借鑑了angular和react，將這兩個框架的核心思想一指令，虛擬DOM一繼承和發揚光大。vuejs經過完美的封裝，解決了開發者的學習難度和成本。更加輕量的文件體積，更加優秀的性能，以及直觀的開發方式，迅速在開發者中引爆開來。經過編寫更少的代碼，實現更多更豐富的交互。

至此, 前端框架三足鼎立，但同時又另外一個問題浮出水面。如此多的項目技術棧，如何才能更快的搭建開發環境？——這就是腳手架工具的由來，經過簡單的幾行指令快速的搭建一個項目，迅速上手任何框架沒有任何壓力。而大部分的腳手架工具都選擇webpack最爲基礎配置，足以說明其的簡潔配置和性能優越。

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 標準的近一步完善，會使得前端更加的全能化，也可能會出現更多的細分工做領域。

http://www.javashuo.com/article/p-vouwcqix-me.html

https://blog.csdn.net/kevinx610/article/details/86385217