1990 HTML前端
1990 年,Tim 以超文本語言 HTML 爲基礎在 NeXT 電腦上發明了最原始的 Web 瀏覽器。
1991 年,Tim 做爲佈道者在 Internet 上普遍推廣 Web 的理念,與此同時,美國國家超算應用中心(National Center for Supercomputer Applications)對此表現出了濃厚的興趣,並開發了名爲 Mosaic 的瀏覽器,於 1993 年 4 月進行了發佈。
1994 年 5 月,第一屆萬維網大會在日內瓦召開。node
1994.7 HTML 2.0 規範發佈程序員
1994 年 9 月,因特網工程任務組(Internet Engineering Task Force)設立了 HTML 工做組。
1994 年 11 月,Mosaic 瀏覽器的開發人員建立了網景公司(Netscape Communications Corp.),併發布了 Mosaic Netscape 1.0 beta 瀏覽器,後更名爲 Navigator。web
1994 萬維網聯盟(World Wide Web Consortium)成立,簡稱 W3C數據庫
1994 年末,由 Tim 牽頭的萬維網聯盟(World Wide Web Consortium)成立,這標誌着萬維網的正式誕生。
此時的網頁以 HTML 爲主,是純靜態的網頁,網頁是「只讀」的,信息流只能經過服務器到客戶端單向流通,由此世界進入了 Web 1.0 時代。編程
1995 網景推出 JavaScript1995 年,網景工程師 Brendan Eich 花了10天時間設計了 JavaScript 語言。起初這種腳本語言叫作 Mocha,後更名 LiveScript,後來爲了藉助 Java 語言創造良好的營銷效果最終更名爲 JavaScript。網景公司把這種腳本語言嵌入到了 Navigator 2.0 之中,使其能在瀏覽器中運行。後端
與此相對的是,1996 年,微軟發佈了 VBScript 和 JScript。JScript 是對 JavaScript 進行逆向工程的實現,並內置於 Internet Explorer 3 中。可是 JavaScript 與 JScript 兩種語言的實現存在差異,這致使了程序員開發的網頁不能同時兼容 Navigator 和 Internet Explorer 瀏覽器。 Internet Explorer 開始搶奪 Netscape 的市場份額,這致使了第一次瀏覽器戰爭。
瀏覽器
第一次瀏覽器戰爭
1996 年 11 月,爲了確保 JavaScript 的市場領導地位,網景將 JavaScript 提交到歐洲計算機制造商協會(European Computer Manufacturers Association)以便將其進行國際標準化。服務器
1996.12 W3C 推出了 CSS 1.0 規範網絡
1997.1 HTML3.2 做爲 W3C 推薦標準發佈
1997.6 ECMA 以 JavaScript 語言爲基礎制定了 ECMAScript 1.0 標準規範
1997 年 6 月,ECMA 以 JavaScript 語言爲基礎制定了 ECMAScript 標準規範 ECMA-262。JavaScript 是 ECMAScript 規範最著名的實現之一,除此以外,ActionScript 和 JScript 也都是 ECMAScript 規範的實現語言。自此,瀏覽器廠商都開始逐步實現 ECMAScript 規範。
1997.12 HTML 4.0 規範發佈
1998 W3C 推出了 CSS 2.0 規範
1998.6 ECMAScript 2 規範發佈
1998 年 6 月,ECMAScript 2 規範發佈,並經過 ISO 生成了正式的國際標準 ISO/IEC 16262 。
1999.12 ECMAScript 3 規範發佈
1999 年 12 月,ECMAScript 3 規範發佈,在此後的十年間,ECMAScript 規範基本沒有發生變更。ECMAScript 3 成爲當今主流瀏覽器最普遍使用和實現的語言規範基礎。
第一次瀏覽器戰爭以 IE 瀏覽器完勝 Netscape 而結束,IE 開始統領瀏覽器市場,份額的最高峯達到 2002 年的 96%。隨着第一輪大戰的結束,瀏覽器的創新也隨之減小。
XHTML
1999 W3C 發佈 HTML 4.01 標準,同年微軟推出用於異步數據傳輸的 ActiveX,隨即各大瀏覽器廠商模仿實現了 XMLHttpRequest(AJAX 雛形)。
2000: W3C 採用了一個大膽的計劃,把 XML 引入 HTML,XHTML1.0 做爲 W3C 推薦標準發佈
2001.5 W3C 推出了 CSS 3.0 規範草案
2002-2006 XHTML 2.0 最終放棄
2009 W3C 宣佈 XHTML2.0 再也不繼續,宣告死亡
動態頁面的崛起
JavaScript 誕生以後,能夠用來更改前端 DOM 的樣式,實現一些相似於時鐘之類的小功能。那時候的JavaScript 僅限於此,大部分的前端界面還很簡單,顯示的都是純靜態的文本和圖片。這種靜態頁面不能讀取後臺數據庫中的數據,爲了使得 Web 更加充滿活力,以 PHP、JSP、ASP.NET 爲表明的動態頁面技術相繼誕生。
PHP(PHP:Hypertext Preprocessor)最初是由 Rasmus Lerdorf 在 1995 年開始開發的,如今PHP 的標準由 PHP Group 維護。PHP 是一種開源的通用計算機腳本語言,尤爲適用於網絡開發並可嵌入 HTML 中使用。PHP 的語法借鑑吸取 C 語言、Java 和 Perl 等流行計算機語言的特色,易於通常程序員學習。PHP 的主要目標是容許網絡開發人員快速編寫動態頁面。
JSP(JavaServer Pages)是由 Sun 公司倡導和許多公司參與共同建立的一種使軟件開發者能夠響應客戶端請求,從而動態生成 HTML、XML 或其餘格式文檔的 Web 網頁的技術標準。JSP 技術是以 Java 語言爲基礎的。1999 年,JSP 1.2 規範隨着 J2EE 1.2 發佈。
ASP(Active Server Pages)1.0 在 1996 年隨着 IIS 3.0 而發佈。2002 年,ASP.NET 發佈,用於替代 ASP。
隨着這些動態服務器頁面技術的出現,頁面再也不是靜止的,頁面能夠獲取服務器數據信息並不斷更新。以 Google 爲表明的搜索引擎以及各類論壇相繼出現,使得 Web 充滿了活力。
隨着動態頁面技術的不斷髮展,後臺代碼變得龐大臃腫,後端邏輯也愈來愈複雜,逐漸難以維護。此時,後端的各類 MVC 框架逐漸發展起來,以 JSP 爲例,Struct、Spring 等框架層出不窮。
從 Web 誕生至 2005 年,一直處於後端重、前端輕的狀態。
AJAX 的流行
在 Web 最初發展的階段,前端頁面要想獲取後臺信息須要刷新整個頁面,這是很糟糕的用戶體驗。
Google 分別在 2004 年和 2005 年前後發佈了兩款重量級的 Web 產品:Gmail 和 Google Map。這兩款 Web 產品都大量使用了 AJAX 技術,不須要刷新頁面就可使得前端與服務器進行網絡通訊,這雖然在當今看來是理所應當的,可是在十幾年前AJAX倒是一項革命性的技術,顛覆了用戶體驗。
隨着 AJAX 的流行,愈來愈多的網站使用 AJAX 動態獲取數據,這使得動態網頁內容變成可能,像 Facebook 這樣的社交網絡開始變得繁榮起來,前端一時間呈現出了欣欣向榮的局面。
AJAX 使得瀏覽器客戶端能夠更方便地向服務器發送數據信息,這促進了 Web 2.0 的發展。
Google Trend: AJAX 從 2005 年開始獲得開發人員的普遍關注。
2006 XMLHttpRequest 被 W3C 正式歸入標準。
第二次瀏覽器大戰
前端兼容性框架的出現
IE 在第一次瀏覽器大戰中擊敗 Netscape 贏得勝利,壟斷了瀏覽器市場。做爲獨裁者,IE 並不遵循 W3C 的標準,IE 成了事實標準。
Netscape 於 1998 年被 AOL 收購前建立了 Mozilla 社區,Firefox 於 2004 年 11 月首次發佈,而且 9 個月內下載量超過 6000 萬,獲取了巨大的成功,IE 的主導地位首次受到了挑戰, Firefox 被認爲是 Netscape 的精神續做。
以後 Firefox 瀏覽器一路奮起直追,逐漸蠶食 IE 市場份額,這引起了第二次瀏覽器戰爭。在 2008 年末時,Firefox 的市場份額達到了 25% 以上,IE 則跌至 65% 如下。
第二次瀏覽器戰爭中,隨着以 Firefox 和 Opera 爲首的 W3C 陣營與 IE 對抗程度的加重,瀏覽器碎片化問題愈來愈嚴重,不一樣的瀏覽器執行不一樣的標準,對於開發人員來講這是一個惡夢。
爲了解決瀏覽器兼容性問題,Dojo、jQuery、YUI、ExtJS、MooTools 等前端 Framework 相繼誕生。前端開發人員用這些 Framework 頻繁發送 AJAX 請求到後臺,在獲得數據後,再用這些 Framework 更新 DOM 樹。
其中,jQuery 獨領風騷,幾乎成了全部網站的標配。Dojo、YUI、ExtJS 等提供了不少組件,這使得開發複雜的企業級 Web 應用成爲可能。
Google Trend: 藍色 jQuery,紅色 Dojo,綠色 YUI,紫色 ExtJS,黃色 MooTools
HTML 5
1999年,W3C發佈了 HTML 4.01 版本,在以後的幾年,沒有再發布更新的 Web 標準。隨着Web的迅猛發展,舊的Web標準已不能知足 Web 應用的快速增加。
2004 年 6 月,Mozilla 基金會和 Opera 軟件公司在萬維網聯盟(W3C)所主辦的研討會上提出了一份聯合建議書,其中包括 Web Forms 2.0 的初步規範草案。建議舉行一次投票,以表決 W3C 是否應該擴展 HTML 和 DOM,從而知足 Web 應用中的新需求。研討會最後以 8 票同意,14 票反對否決此建議,這引發一些人的不滿,不久後,部分瀏覽器廠商宣佈成立網頁超文本技術工做小組(WHATWG),以繼續推進該規範的開發工做,該組織再度提出 Web Applications 1.0 規範草案,後來這兩種規範合併造成 HTML5。2007 年,得到 W3C 接納,併成立了新的 HTML 工做團隊。2008 年 1 月 22 日,第一份正式草案發布。
2008.12 Chrome 發佈,JavaScript 引擎 V8
HTML5 草案發布不久,Google 在 2008 年 12 月發佈了 Chrome 瀏覽器,加入了第二次瀏覽器大戰當中。Chrome 使用了 Safari 開源的 WebKit 做爲佈局引擎,而且研發了高效的 JavaScript 引擎 V8。
儘管 HTML5 在網絡開發人員中很是出名了,可是它成爲主流媒體的一個話題是在 2010 年的 4 月,當時蘋果公司的 CEO 喬布斯發表一篇題爲「對 Flash 的思考」的文章,指出隨着 HTML5 的發展,觀看視頻或其它內容時,Adobe Flash 將再也不是必須的。這引起了開發人員間的爭論,包括 HTML5 雖然提供了增強的功能,但開發人員必須考慮到不一樣瀏覽器對標準不一樣部分的支持程度的不一樣,以及 HTML5 和 Flash 間的功能差別。
在第二次瀏覽器大戰中,各個瀏覽器廠商都以提高 JavaScript 運行效率和支持 HTML5 各類新特性爲主要目標,促進了瀏覽器的良性競爭。在這一場戰爭中,Chrome 攻城略地,搶奪 IE 市場份額。2013 年,Chrome 超過 IE,成爲市場份額最高的瀏覽器。2016 年,Chrome 佔據了瀏覽器市場的半壁江山。
自 2008 年以來,瀏覽器中不斷支持的 HTML5 新特性讓開發者激動不已:WebWorker 可讓 JavaScript 運行在多線程中,WebSocket 能夠實現前端與後臺的雙工通訊,WebGL 能夠建立 Web3D 網頁遊戲…
桌面瀏覽器對 HTML5 支持程度(2009-2017)
2009.12 ECMAScript 5.0 規範發佈
2011.6 ECMAScript 5.1 規範發佈
2012.10 微軟發佈 TypeScript 公開版
TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集,並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。
TypeScript 擴展了 JavaScript 的語法,因此任何現有的 JavaScript 程序能夠不加改變的在 TypeScript 下工做。TypeScript 是爲大型應用之開發而設計,而編譯時它產生 JavaScript 以確保兼容性。
2013.6.19 TypeScript 0.9 正式版
2014.10.28 W3C 正式發佈 HTML 5.0 推薦標準
2014 年 10 月 28 日,W3C 正式發佈 HTML 5.0 推薦標準。
Node.js 的爆發
早在 1994 年,Netspace 就公佈了其 Netspace Enterprise Server 中的一種服務器腳本實現,叫作 LiveWire,是最先的服務器端 JavaScript,甚至早於瀏覽器中的 JavaScript。對於這門圖靈完備的語言,Netspace 很早就開始嘗試將它用在後端。
微軟在 1996 年發佈的 IE 3.0 中內嵌了本身的 JScript語言,其兼容 JavaScript 語法。1997 年年初,微軟在它的服務器 IIS 3.0 中也包含了 JScript,這就是咱們在 ASP 中能使用的腳本語言。
1997 年,Netspace 爲了用 Java 實現 JavaScript 而建立了 Rhino 項目,最終 Rhino 演變成一個基於 Java 實現的 JavaScript 引擎,由 Mozilla 維護並開源。Rhino 能夠爲 Java 應用程序提供腳本能力。2006 年 12 月,J2SE 6 將 Rhino 做爲 Java 默認的腳本引擎。
SpiderMonkey 是 Mozilla 用 C/C++ 語言實現的一個 JavaScript 引擎,從 Firefox 3.5 開始做爲 JavaScript 編譯引擎,並被 CouchDB 等項目做爲服務端腳本語言使用。
能夠看到,JavaScript 最開始就能同時運行在先後端,但時在先後端的待遇卻不盡相同。隨着 Java、PHP、.Net 等服務器端技術的風靡,與前端瀏覽器中的 JavaScript 愈來愈流行相比,服務端 JavaScript 逐漸式微。
2008 年 Chrome 發佈,其 JavaScript 引擎 V8 的高效執行引發了 Ryan Dahl 的注意。2009 年,Ryan 利用 Chrome 的 V8 引擎打造了基於事件循環的異步 I/O 框架 —— Node.js 誕生。
Node.js 具備如下特色:
基於事件循環的異步 I/O 框架,可以提升 I/O 吞吐量
單線程運行,可以避免了多線程變量同步的問題
使得 JavaScript 能夠編寫後臺代碼,先後端編程語言統一。
Node.js 的出現吸引了不少前端開發人員開始用 JavaScript 開發服務器代碼,其異步編程風格也深受開發人員的喜好。Node.js 的偉大不只在於拓展了 JavaScript 在服務器端的無限可能,更重要的是它構建了一個龐大的生態系統。
2010 年 1 月,NPM 做爲 Node.js 的包管理系統首次發佈。開發人員能夠按照 CommonJS 的規範編寫 Node.js 模塊,而後將其發佈到 NPM 上面供其餘開發人員使用。目前 NPM 具備 40 萬左右的模塊,是世界上最大的包模塊管理系統。
2016 年常見包管理系統模塊數量,NPM 高居榜首
Node.js 也催生了 node-webkit 等項目,用 JavaScript 開發跨平臺的桌面軟件也成爲可能。Node.js 給開發人員帶來了無窮的想象,JavaScript 大有一統天下的趨勢。
隨着 HTML5 的流行,前端再也不是人們眼中的小玩意,之前在 C/S 中實現的桌面軟件的功能逐步遷移到了前端,前端的代碼邏輯逐漸變得複雜起來。
之前只用於後臺的 MV* 等架構在前端逐漸使用起來,如下列舉了部分經常使用的 MV* 框架。
隨着這些 MV* 框架的出現,網頁逐漸由 Web Site 演變成了 Web App,最終致使了複雜的單頁應用( Single Page Application)的出現。
隨着 iOS 和 Android 等智能手機的普遍使用,移動瀏覽器也逐步增強了對 HTML5 特性的支持力度。
移動瀏覽器對 HTML5 支持程度(2009-2017)
移動瀏覽器的發展,致使了流量入口逐漸從 PC 分流到移動平臺,這是 Web 發展的新機遇。移動 Web 面臨着更大的碎片化和兼容性問題,jQuery Mobile、Sencha Touch、Framework七、Ionic 等移動 Web 框架也隨之出現。
相比於 Native App,移動 Web 開發成本低、跨平臺、發佈週期短的優點愈發明顯,可是 Native App的性能和 UI 體驗要遠勝於移動 Web。移動 Web 與 Native App 孰優孰劣的爭論愈演愈烈,在無數開發者的實踐中,人們發現二者不是替代關係,而是應該將二者結合起來,取長補短,Hybrid 技術逐漸獲得認同。
Hybrid 技術指的是利用 Web 開發技術,調用 Native 相關 API,實現移動與 Web 兩者的有機結合,既能體現 Web 開發週期短的優點,又能爲用戶提供 Native 體驗。
根據實現原理,Hybrid 技術能夠分爲兩大類:
將 HTML 5 的代碼放到 Native App 的 WebView 控件中運行,WebView 爲 Web 提供宿主環境,JavaScript 代碼經過 WebView 調用 Native API。典型表明有 PhoneGap(Cordova) 以及國內的 AppCan 等。
將 HTML 5 代碼針對不一樣平臺編譯成不一樣的原生應用,實現了 Web 開發,Native 部署。這一類的典型表明有 Titanium 和 NativeScript。
Hybrid 一系列技術中很難找出一種方案適應全部應用場景,咱們須要根據自身需求對不一樣技術進行篩選與整合。
ECMAScript 6 JavaScript 語言是 ECMAScript 標準的一種實現,截止 2017 年 2 月,ECMAScript 一共發佈了 7 個版本。 1997 年 6 月, ECMAScript 1.0 標準發佈。 1998 年 6 月,ECMAScript 2.0 發佈。 1999 年 12 月,ECMAScript 3.0 發佈。 2007 年 10 月,Mozilla 主張的 ECMAScript 4.0 版草案發布,對 3.0 版作了大幅升級,該草案遭到了以 Yahoo、Microsoft、Google 爲首的大公司的強烈反對,JavaScript 語言的創造者 Brendan Eich 和 IE 架構師 Chris Wilson 甚至在博客上就ES4向後兼容性問題打起了口水仗,最後因爲各方分歧太大,ECMA 開會決定廢棄停止 ECMAScript 4.0 草案。經各方妥協,在保證向下兼容的狀況下,將部分加強的功能放到 ECMAScript 3.1 標準中,將原有 ECMAScript 4.0 草案中激進的功能放到之後的標準中。不久,ECMAScript 3.1 就更名爲 ECMAScript 5。2009 年 12 月,本着’Don’t break the web’原則,ECMAScript 5 發佈。新增了 strict 模式、屬性 getter 和 setter 等。2011 年 6 月,ECMAScript 5.1 發佈。2015 年 6 月,ECMAScript 6.0 發佈。該版本增長了許多新的語法,包括支持 let、const、Arrow function、Class、Module、Promise、Iterator、Generator、Set、Map、async、Symbol、Proxy、Reflect、Decorator 等。TC39 委員會計劃之後每一年都發佈一個新版本的 ECMAScript,因此 ECMAScript 6.0 更名爲 ECMAScript 2015。2016 年 6 月,在 ECMAScript 2015 的基礎上進行了部分加強,發佈了 ECMAScript 2016。在 ECMAScript 的各個版本中,ECMAScript 6.0 無疑最受人矚目的,它增長了許多新特性,極大拓展了 JavaScript 語法和能力,以致於許多瀏覽器都只能支持部分 ES6 中的新特性。隨之,Babel 和 TypeScript 逐漸流行起來,編寫 ES6 代碼,而後用 Babel 或 TypeScript 將其編譯爲 ES5 等瀏覽器支持的 JavaScript。ECMAScript 之後每一年將會發佈一個新版本,這無疑將持續促使瀏覽器廠商不斷爲 JavaScript 注入新的功能與特性,JavaScript走上了快速發展的正軌。本文轉自:https://blog.csdn.net/freekiteyu/article/details/79927047