一文帶你瞭解Web前端發展歷程

摘要：自互聯網行業發展以來，web前端不斷髮展變化着。在前人的基礎上，後人有幸可以站在前人的肩膀上行走。前端的發展變化不只是繼承式的迭代，同時也是不斷的變革和創造。

1、前端究竟是個什麼？

簡單點說，瀏覽器呈現出來的頁面，給用戶看的、操做的就是前端（客戶端）；你看不到的，相似一些遊戲數據、應用數據之類的就是後端（服務端）。

那麼再簡單點就能夠說，前端指的就是瀏覽器端，後端指的就是爲瀏覽器提供服務和數據的服務器端。

這是比較準確的描述，若是往大了講，你全部看到的一切，網頁、移動端網頁、小程序、甚至某些APP，都是屬於前端的範疇。

2、前端的起源

世界上第一臺計算機

背景：二戰時期，美國軍方爲了計算炮彈彈道，讓一些科學家造出了這世界上的第一臺計算機「ENIAC」。

1946年2月14日，世界上第一臺計算機「ENIAC」（埃尼阿克）在美國賓夕法尼亞大學誕生。這是一羣科研人員共同努力的成果，可是起到最關鍵做用的是其數學家馮 · 諾依曼的設計思想，因此其被稱爲「現代計算機之父」。

意義：標誌着電腦時代的開始。

想不到吧！！This Big Boy就是咱們如今電腦的祖先！！↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

（圖源來自：百度圖片）

互聯網的前身

背景：二戰時期，美國軍方爲了防止部分網絡被摧毀後失去通訊。

1969年，美國國防部的高級研究計劃局（ARPA）創建了軍用網叫「阿帕網」（ARPnet）。阿帕網就是互聯網的前身。

1983年，APRA和美國國防部通訊局研製了用於異構網絡（本文不作講解）的TCP/IP協議，後該協議在社會上流行起來，所以誕生了真正的Internet。

Internet和計算機的誕生，爲前端技術的開始奠基了基礎。

前端發展將近20年，也算是一個比較漫長的發展過程，大體能夠分爲如下幾個階段：

3、洪荒時代（1990~1995年）

這個時代最重大的幾件事有：WWW的誕生（1990）、瀏覽器的誕生（1992）、W3C理事會成立（1994）、JavaScript的誕生（1995）；

1. 1990年，WWW（萬維網）誕生。全稱：World Wide Web。
2. 1992年，NCSA研發了第一個瀏覽器：Mosaic，能夠窗口瀏覽網頁。隨後新一代瀏覽器：Netscape Navigator（網景瀏覽器），於1994年誕生；隸屬於Netscape（網景）公司，下文統稱爲網景公司。
3. 1994年，Tim Berners - Lee建立了W3C理事會。蒂姆 · 伯納斯 · 李被稱爲」萬維網之父「，南安普頓大學、麻省理工大學教授。W3C理事會主要負責HTML的發展路徑，其宗旨是經過促進通用協議的發展；成員機構：美國麻省理工大學、歐洲數學與信息學研究聯盟、日本慶應大學、中國北京航空航天大學。
4. 1995年，待這一切就緒後，JavaScript應運而生！發明者是Brendan Eich(布蘭登 · 艾奇)。
5. JavaScript主要語言特徵：借鑑了C語言的基本語法；借鑑了Java語言的數據類型和內存管理；借鑑了Scheme語言；借鑑了Self語言，使用基於原型的繼承機制；

（1994年，Netscape Navigator網景瀏覽器截圖，圖源來自百度圖片）

4、鐵器時代（1995~2005年）

這個時期的瀏覽器五花八門，互相競爭激烈。IE瀏覽器、網景瀏覽器、火狐瀏覽器、谷歌瀏覽器是這個時期的主角！

雖然當時已經有了比較統一的ECMA（JavaScript規範文檔）標準和W3C（HTML、CSS規範文檔），可是瀏覽器先於標準在市場上流行，成爲了事實標準。因此這就致使了咱們如今在開發項目的時候還要去處理一些瀏覽器兼容性問題（你們最遇到的IE兼容問題）。

隨着1998年，AJax的出現，前端開發從Web1.0升級到了Web2.0，從純內容的靜態頁面，發展到了動態網頁，富交互、前端數據處理的新時期。在這一時期，比較知名的兩個富交互動態的瀏覽器產品是：Gmail（2004年）、Google地圖（2005年）。

因爲動態交互、數據交互的需求增多，還衍生出了JQuery（2006年）這種跨瀏覽器的JS工具庫，主要用於DOM操做，數據交互。

2005~2009年的前端發展歷程就涉及到小做者的知識盲區啦~~還請有意的大佬們補充，給小白們科普科普嘻嘻！

5、JQuery時代（2009~2016年）

2006年，jQuery發佈，它當時的競爭對手不少，也很激烈基本持平。直到2009年，Sizzle選擇器引擎研發成功，jQuery才取得了壓倒性的優點。

這個時期，前端面對的主要是瀏覽器的兼容性問題，而jQuery在處理DOM兼容性問題上有這大量的解決方案。

jQuery的流行間接帶來如下的發展：

1. 促令人們對CSS1~CSS3選擇器的學習
2. 促進了瀏覽器原生選擇器引擎document.querySelectorAll、Element.matches的誕生
3. 提升人們對domReady的認識
4. 促進了Promise與requestAnimateFrame 的誕生
5. 下降前端門檻，前端工程師的隊伍愈來愈壯大。

這個時期涌現了大量jQuery-like的庫，其中最著名的是Zepto.js。Zepto的出現也標誌着咱們進入移動互聯網時代。

JQuery時代以RequireJS的誕生爲起點，以RN的出現結束。JQuery的出現讓前端開發更加輕鬆，假如工程師想實現一個功能，現搜索出一個jQuery插件來實現。

下一篇將爲你們繼續帶來三大框架時代的發展史，還有前端現狀以及將來的發展趨勢哈~敬請期待啦！

點擊關注，第一時間瞭解華爲雲新鮮技術~