前端的發展歷程

阿新 • • 發佈：2019-01-10

什麼是前端

前端：針對瀏覽器的開發，程式碼在瀏覽器執行
後端：針對伺服器的開發，程式碼在伺服器執行

前端三劍客

HTML
CSS
JavaScript

HTML

HTML（超文字標記語言——HyperText Markup Language）是構成 Web 世界的基石。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及移動應用程式的使用者介面。
超文字標記語言（第一版）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）：
HTML 2.0——1995年11月作為RFC 1866釋出，在RFC 2854於2000年6月釋出之後被宣佈已經過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
HTML 5——2014年10月28日，W3C推薦標準

CSS

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。

JavaScript

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

前端的發展離不開瀏覽器的發展

瀏覽器的發展其實也是前端的發展
我們來簡單瞭解一下瀏覽器的發展歷史

1991年，WorldWideWeb 瀏覽器釋出
這款由 Web 之父 Tim Berners-Lee 親手設計的圖形化瀏覽器還包含一個所見即所得 HTML 編輯器，為了避免同 WWW 混淆，這個瀏覽器後來改名為 Nexus.
1993年，Mosaic 釋出
Internet 的流行應該歸功於 Mosaic，這款瀏覽器將 Web 帶向了大眾。諸如 IE， Firefox 一類的當代瀏覽器仍然在延用 Mosaic 的圖形化操作介面思想。
1994年，Netscape 成立
Marc Andreessen 帶領 Mosaic 的程式設計師成立了 Netscape 公司，併發布了第一款商業瀏覽器 Netscape Navigator.
1995年，IE 釋出，瀏覽器之戰即將爆發
微軟針對 Netscape 釋出了他們自己的瀏覽器，IE，第一場瀏覽器之戰爆發。
1996年，Opera 釋出
Telenor 是挪威最大的通訊公司，他們推出了 Opera，並在兩年後進軍移動市場，推出 Opera 的移動版。
1998年，Mozilla 專案成立
Netscape 成立 Mozilla 開源專案，開發下一代瀏覽器，後來證明，使用原有程式碼開發新東西是一種負擔，接著他們著手從新開發。
1998年，Netscape 瀏覽器走向開源
隨著同 IE 征戰的失利，Netscape 市場份額急劇下降，Netscape 決定將自己的瀏覽器開源以期重整山河。
2002年，IE 開始主導瀏覽器市場
市場份額達到95%，藉助作業系統的捆綁優勢，IE 贏得第一場瀏覽器之戰。
2003年，蘋果 Safari 瀏覽器登場
蘋果進入了瀏覽器市場，推出自己的 Webkit 引擎，該引擎非常優秀，後來被包括 Google， Nokia 之類的廠商用於手機瀏覽器。
2004年，Firefox 引發第二場瀏覽器之戰
Firefox 1.0 推出。早在 Beta 測試期間就積累了大量人氣的 Firefox 引發了第二場瀏覽器之戰，當年年底，Firefox 已經贏得 7.4% 的市場份額。
2006年，IE7 釋出
IE6 釋出後的第六年，迫於 Firefox 的壓力，微軟匆匆推出 IE7 應戰，吸取了 Firefox 的一些設計思想，如標籤式瀏覽，反釣魚等。但這款瀏覽器現在看來並不成功。
2008年，Google 攜 Chrome 參戰
Google 釋出了他們自己的瀏覽器，加入這場戰爭。輕量，快，異常的穩固讓這款瀏覽器成為不可輕視的一個對手。

瀏覽器現狀

瀏覽器核心

早期的前端

早期受制於瀏覽器以及技術、相容性等問題，導致網頁的顯示效果非常的單一，幾乎都是靜態頁，前端的工作也是非常簡單，說是前端，其實只是一個模板工程師，編寫頁面模板，然後讓後端負責渲染。所以在網際網路早期，前端工程師這個職位可以說是不存在，通常由後端或者是美工來兼任。

像這種古老的設計風格，現在已經很難看到了

後端MVC的開發模式

當時的網站開發，採用的是後端MVC模式

Model（模型層）：提供/儲存資料
Controller（控制層）：資料處理，實現業務邏輯
View（檢視層）：展示資料，提供使用者介面前端只是後端 MVC 的 V

當用戶訪問網站時，會向後臺傳送一個請求，後臺接收到請求，生成靜態HTML頁面，傳送到瀏覽器。比如JSP

<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>

Ajax

Ajax技術誕生，改變了一切。前端不再是後端的模板，可以獨立得到各種資料。
Ajax是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
通過在後臺與伺服器進行少量資料交換，Ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

舉個例子：使用者註冊

如果仔細觀察一個表單的提交，你就會發現，一旦使用者點選“提交”按鈕，表單開始提交，瀏覽器就會重新整理頁面，然後在新頁面裡告訴你操作是成功了還是失敗了。如果不幸由於網路太慢或者其他原因，就會得到一個404頁面。
這就是Web的運作原理：一次HTTP請求對應一個頁面。
如果要讓使用者留在當前頁面中，同時發出新的HTTP請求，就可以使用Ajax傳送這個新請求，接收到資料後，再用JavaScript更新頁面，這樣一來，使用者就感覺自己仍然停留在當前頁面，但是資料卻可以不斷地更新。

2004年：最早大規模使用AJAX的就是Gmail，Gmail的頁面在首次載入後，剩下的所有資料都依賴於AJAX來更新。

Web 2.0

Ajax技術促成了 Web 2.0 的誕生。
Web 1.0：靜態網頁，純內容展示
Web 2.0：動態網頁，富互動，前端資料處理

至此，前端早期的發展史就介紹完了，當時對於前端的要求並不高，只要掌握html css js和一個jquery就足夠開發網頁了

新時代的前端

到目前為止 HTML已經發展到HTML5
CSS已經發展到CSS3.0
JavaScript已經發展到ES9，但是常用的還是ES5和ES6
現代標準瀏覽器(遵循W3C標準的瀏覽器)基本已經支援HTML5 CSS3 ES6的大部分特性

瀏覽器市場份額(2018.9)

由於IE的不思上進，導致市場份額越來越少，現在幾乎是現代標準瀏覽器的天下。
所以前端開發一個網頁幾乎不需要考慮IE相容性

得益於前端技術和瀏覽器的發展，現在的網頁能展示越來越豐富的內容了，比如動畫遊戲畫圖等等
所以，對於前端的要求也越來越高，特別是近幾年框架、技術、工具呈爆發式發展，前端變化特別快！

MVVM

MVVM最早由微軟提出來，它借鑑了桌面應用程式的MVC思想，在前端頁面中，把Model用純JavaScript物件表示，View負責顯示，兩者做到了最大限度的分離把Model和View關聯起來的就是ViewModel。
ViewModel負責把Model的資料同步到View顯示出來，還負責把View的修改同步回Model
View 和 Model 之間的同步工作完全是自動的，無需人為干涉
因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理

一個MVVM框架和jQuery操作DOM相比有什麼區別？我們先看用jQuery實現的修改兩個DOM節點的例子：

<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>

Hello, Bart!

You are 12.

用jQuery修改name和age節點的內容：

var name = 'Homer';
var age = 51;

$('#name').text(name);
$('#age').text(age);

如果我們使用MVVM框架來實現同樣的功能，我們首先並不關心DOM的結構，而是關心資料如何儲存。最簡單的資料儲存方式是使用JavaScript物件：

var person = {
    name: 'Bart',
    age: 12
}

我們把變數person看作Model，把HTML某些DOM節點看作View，並假定它們之間被關聯起來了。

要把顯示的name從Bart改為Homer，把顯示的age從12改為51，我們並不操作DOM，而是直接修改JavaScript物件：

person.name = 'Homer';
person.age = 51;

執行上面的程式碼，我們驚訝地發現，改變JavaScript物件的狀態，會導致DOM結構作出對應的變化！這讓我們的關注點從如何操作DOM變成了如何更新JavaScript物件的狀態，而操作JavaScript物件比DOM簡單多了！

這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操作DOM的繁瑣步驟中解脫出來！

三大MVVM框架

Vue
React
Angular

Vue

Vue框架誕生於2014年，其作者為中國人——尤雨溪，也是新人最容易入手的框架之一，不同於React和Angular,其中文文件也便於大家閱讀和學習。

React

React起源於Facebook的內部專案，因為該公司對市場上所有JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設Instagram的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。

Angular

Angular是谷歌開發的 Web 框架，具有優越的效能和絕佳的跨平臺性。通常結合TypeScript開發，也可以使用JavaScript或Dart，提供了無縫升級的過渡方案。於2016年9月正式釋出。

目前國內使用人數最多、最火的框架是Vue

webpack

如今對於每一個前端工程師來說，webpack已經成為了一項基礎技能，它基本上包辦了本地開發、編譯壓縮、效能優化的所有工作。
它的誕生意味著一整套工程化體系開始普及，並且讓前端開發徹底告別了以前刀耕火種的時代。現在webpack之於前端開發，正如同gcc/g++之於C/C++，是一個無論如何都繞不開的工具。

TypeScript(TS)

TypeScript 是 Microsoft 開發和維護的一種面向物件的程式語言。它是JavaScript的超集，包含了JavaScript的所有元素，可以載入JavaScript程式碼執行，並擴充套件了JavaScript的語法。 TypeScript 具有以下特點：

TypeScript是Microsoft推出的開源語言，使用Apache授權協議
TypeScript增加了靜態型別、類、模組、介面和型別註解

在開發大型專案時使用TS更有優勢

NodeJs

Node.js是一個Javascript執行環境(runtime environment)，釋出於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下執行得更好。嚴格的來說，Node.js其實是一個後端語言。

特點：

單執行緒
非阻塞IO
事件驅動
V8引擎

現在的前端能做什麼？

遊戲開發(Egret Layabox coco2d-js)
web開發(pc 移動端裝置)
webApp開發(Dcloud RN weex ionic)
圖形開發WebGl(three.js)
小程式/快應用
後端(nodejs)
桌面應用(electron)
嵌入式開發(Ruff)

前端的未來

現在基於Web的前端技術，將演變為未來所有軟體的通用的GUI解決方案。所以前端有可能會變成一名端工程師。

PC端
手機端
TV端
VR端

......

一名合格的前端需要掌握哪些技能

photoshop切圖(必修)
html css js(特別是html5 css3 es6)(必修)
三大前端框架至少精通一個(必修)
nodejs(選修)
自動化構建工具webpack(必修)
http協議(必修)
瀏覽器渲染流程及原理(必修)
TypeScript(選修)

技能會過時計算機基礎知識不會過時

演算法
編譯原理

建議學習編譯原理和演算法這兩門課程
演算法的好處相信大家都懂在這裡簡單說一下
懂演算法的人善於計算時空複雜度，相當於在你做事情前，懂得怎麼去衡量效率和開銷

編譯原理：將源語言轉化為目標語言,也就是將一門語言轉化為另一門語言

編譯原理在前端中的應用

babel
TypeScript
Vue的VNode