前端科普系列（1）：前端簡史

時間 2020-12-01

標籤 javascript php html 前端 java webpack 程序員 web 面試數據庫欄目 JavaScript 简体版

原文原文鏈接

本文首發於 vivo互聯網技術微信公衆號
連接： https://mp.weixin.qq.com/s/VRSl5_yn5BZcqtRxWkXU-Q
做者：孔垂亮

1、什麼是前端

回答這個問題以前，我想起了一道很是經典的前端面試題：「從輸入URL到頁面呈如今你面前到底發生了什麼？」這個題目能夠回答的很簡單，但仔細思考，也能夠回答的很深，這個過程涉及的東西不少。先看一張圖：javascript

簡單說就是php

DNS (Domain Name System) 解析
TCP (Transmission Control Protocol) 連接
HTTP (HyperText Transfer Protocol) 請求
HTTP 響應
HTML解析 & CSS渲染
JS 解析執行

爲何提這個呢，由於這是一整個web服務生命週期的全過程，而在最先的時候是根本沒有前端或者後端的概念的。當時就是用 Dreamweaver 寫 html 靜態頁面，而後部署到一臺電腦的 IIS (Internet Information Services) 上。當請求這個頁面時，返回這個 html 文件。html

再後面一點，服務端變得複雜了一些，html 頁面開始使用各類模板來寫，譬如 Java 系列的 FreeMarker，還有 ASP 、 PHP 等等。此時，先後端開發是一體的，最多也就是模板的編寫算是最初的前端範疇，但那個時候，這個活兒每每都是如今的後端開發去幹的。前端

下面是一個比較典型的 PHP 的模板：java

<html>
  <head><title>Car {{ $car->id }}</title></head>
  <body>
    <h1>Car {{ $car->id }}</h1>
    <ul>
      <li>Make: {{ $car->make }}</li>
      <li>Model: {{ $car->model }}</li>
      <li>Produced on: {{ $car->produced_on }}</li>
    </ul>
  </body>
</html>

隨着 2005年 Ajax (Asynchronous JavaScript and XML) 的誕生，完全得改變了這一切。JS 腳本能夠獨立向服務器請求數據，拿到數據後，進行處理並更新網頁，這個過程當中，後端只負責提供數據，其餘事情都由前端來作。就是從這個時期開始，前端逐漸變得複雜，也是從在這個時期開始，設計師和後端開發已經開始放棄前端了，開發的崗位角色悄悄地發生了變化：webpack

聊到如今，什麼是前端的問題應該呼之欲出了:程序員

前端：針對瀏覽器的開發，代碼在瀏覽器中運行
後端：針對服務器的開發，代碼在服務器中運行

能夠說 Ajax 的出現是前端崗位出現的轉折點，但並非前端的起點，前端的起點，咱們稍後聊 JavaScript 的歷史會聊到。web

既然前端是針對瀏覽器的開發，那一個頁面呈現出來，在瀏覽器裏作了什麼呢？面試

瀏覽器收到服務器響應的 HTTP 報文後，邊解析邊渲染。首先瀏覽器解析 html 文件構建 DOM 樹，而後解析 CSS 文件構建渲染樹，等到渲染樹構建完成後，瀏覽器開始佈局渲染樹並將其繪製到屏幕上。除了表現以外，咱們還須要與頁面交互，因此離不開 JS，而 JS 的解析和運行是由瀏覽器中的 JS 引擎來完成，最有名的就是2008年由 Google 發佈的 V8。數據庫

因此，跑在瀏覽器的代碼無外乎這三種：HTML + CSS + JS。

HTML(HyperText Markup Language) 全稱是超文本標記語言，它不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標記語言。它由一系列的元素（elements）組成，這些元素能夠用來包圍不一樣部分的內容，使其以某種方式呈現或者工做。

咱們在瀏覽器中任意打開一個頁面的源碼，都會看到相似以下的內容：

CSS(Cascading Style Sheets) 全稱是層疊樣式表，它是用來樣式化和排版網頁的 —— 例如更改網頁內容的字體、顏色、大小和間距，將內容分割成多列或者加入動畫以及別的裝飾型效果。它經過選擇器選中上面提到的 HTML 元素，而後爲選中的元素添加顏色，間距等樣式。以下所示：

每個有追求有品味的頁面，都在借 CSS 給瀏覽者說一句話："我怎麼這麼好看！"

JS(JavaScript) 是一種具備函數優先的輕量級、解釋型編程語言。它因互聯網而生，緊跟着瀏覽器的出現而問世。它是一門計算機語言，隨着前端的迅猛發展，它已經不像剛開始出現時那樣，只是爲了作了一些頁面的校驗，已經成了構建企業級應用的重要語言之一，目前在全球範圍的使用狀況排名第三。

若是用一我的來做比喻網頁的話，HTML 就是一我的的骨骼， CSS 就是一我的的血肉，而 JS 則是一我的的靈魂！

前端開發工程師是近十年隨着前端發展才真正開始受到重視的一個新興職業。剛纔咱們提到前端的三個組成部分：HTML + CSS + JS，這三個部分看起來聽起來都感受很簡單，也正由於如此，前端開發領域有不少自學成「才」的同行，我甚至在校招面試時聽到候選人說是由於以爲後端太難，其它崗位面試通不過才選擇前端的。

確實，前端開發的入門門檻低，與後端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢，後面的學習曲線愈來愈陡峭，每前進一步都很難，致使大多數前端開發都停留在初級階段。

2、JavaScript 語言的歷史

JS 做爲網頁的靈魂，它是前端開發中最重要的一部分，因此接下來咱們來看看 JavaScript 做爲一門計算機語言是怎麼誕生的，又經歷了怎麼樣的發展。

1990年12月，歐洲核子研究中心（CERN）的科學家 Tim Berners-Lee 發明了萬維網（World Wide Web），2019年的3月12日，歐洲核子研究中心還舉辦了系列活動，慶祝萬維網發明三十週年。當時的網頁還只能在操做系統的終端裏瀏覽，也就是說只能使用命令行操做，網頁內容都是在字符窗口中顯示，這固然很是不方便。

1994年5月中科院高能物理研究所計算中心的許榕生研究員去 CERN 參加了由380人蔘加的第一屆國際 WWW 大會。會後，他帶領一批年輕人很快在高能所計算中心的一臺 PC 機上用 Linux 建立了中國第一個 WWW 服務器，並推出第一個網站 www.ihep.ac.cn (這個域名如今還在使用) 和英文網頁（IHEP/China Home Page），該網站成爲當時亞洲少數幾個網站之一。

1992年末，美國國家超級電腦應用中心（NCSA）開始開發一個獨立的瀏覽器，叫作 Mosaic。這是人類歷史上第一個瀏覽器，今後網頁能夠在圖形界面的窗口瀏覽。Mosaic 是後來你們耳熟能詳的網景瀏覽器（Netscape Navigator）的前身。

那時候尚未 Ajax，因此用戶每次操做，都會從新加載整個頁面。因而 Netscape 公司很快就發現一個問題，若是用戶尚未輸入內容，就點了「發送」摁鈕，服務器發現後把整個頁面從新返回給客戶端，僅僅只是在頁面中添加了一個錯誤提示。

那個時代網速很慢上網很貴，到服務器才發現這一點很明顯太晚了，最好能在用戶發出數據以前，就告訴用戶「請填寫內容」。這就須要在網頁中嵌入小程序，讓瀏覽器檢查每一欄是否都填寫了。

1995年4月，Netscape 公司僱傭了程序員 Brendan Eich 開發這種網頁腳本語言，Brendan Eich 只用了10天，就設計完成了這種語言的初版，最初名字叫作 Mocha，1995年9月改成 LiveScript。12月，Netscape 公司與 Sun 公司（Java 語言的發明者和全部者）達成協議，後者容許將這種語言叫作 JavaScript。

這樣一來，Netscape 公司能夠藉助 Java 語言的聲勢，而 Sun 公司則將本身的影響力擴展到了瀏覽器。實際上 JavaScript 與 Java 沒啥太大關係！

1996年8月，微軟模仿 JavaScript 開發了一種相近的語言，取名爲JScript（JavaScript 是 Netscape 的註冊商標，微軟不能用），首先內置於IE 3.0。Netscape 公司面臨喪失瀏覽器腳本語言的主導權的局面。

因而，Netscape 公司在1996年11月決定將 JavaScript 提交給國際標準化組織 ECMA (European Computer Manufacturers Association), 但願 JavaScript 可以成爲國際標準，以此抵抗微軟。

1997年7月，ECMA 組織發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲 ECMAScript。

之因此不叫 JavaScript，一方面是因爲商標的關係，Java 是 Sun 公司的商標，根據一份受權協議，只有 Netscape 公司能夠合法地使用 JavaScript 這個名字，且 JavaScript 已經被 Netscape 公司註冊爲商標，另外一方面也是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利於保證這門語言的開放性和中立性。

所以，ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現。在平常場合，這兩個詞是能夠互換的。

接下來的兩年，連續發佈了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一個巨大的成功，在業界獲得普遍支持，成爲通行標準，奠基了 JavaScript 語言的基本語法，之後的版本徹底繼承。直到今天，初學者一開始學習 JavaScript，其實就是在學 3.0 版的語法。

2000年，ECMAScript 4.0 開始醞釀。這個版本最後沒有經過，可是它的大部份內容被 ES6 繼承了。所以，ES6 制定的起點實際上是 2000 年。爲何 ES4 沒有經過呢？由於這個版本太激進了，對 ES3 作了完全升級（也就是如今的ES6），引來了以 Yahoo、Microsoft、Google 爲首的大公司的強烈反對，ECMA 開會決定，停止 ECMAScript 4.0 的開發。

只有 JavaScript 的創造者 Brendan Eich 所在的 Mozilla 公司堅持ES4的草案，有時候要創點新真得不容易！

2015年6月，ECMAScript 6 正式發佈，而且改名爲「ECMAScript 2015」。雖然從ES3以後，陸續發了 ES5 以及 ES5.1，但都是涉及現有功能改善的一小部分。

對於前端開發來講，接受並熟悉 ES6 是比較困難的，畢竟當年 Google 就接受不了，況且 ES6 是集過去15年的精華於一身。

3、Web開發技術演進

聊完 JavaScript 的歷史，咱們能夠看到，它並不隨前端的發展呈正相關，由於它在很長一段時間，並無什麼變化。因此接下來聊聊前端技術演進的歷史，看看這些年前端都發生了什麼。

1.Web 2.0

前面提到的 2005 年誕生的 Ajax，促進了先後端的分離。

實際上是在這一年穀歌發佈了測試版本的谷歌地圖，並在這個項目大量運用讓網頁透過 Javascript 以 XML 格式來回傳數據、達到異步更新網頁內容的技術。

這在當時是一個跨時代的壯舉，讓用戶終於有機會看到不須要刷新整個頁面就能夠更新狀態的地圖，咱們也看到了異步操做是如何給網站用戶帶來良好體驗的。

不誇張的說，這一年算得上是 Web 開發技術發展的元年。Web也從 1.0 的時代，步入 2.0 的時代。

2.MVC (model-view-controller)

前端能夠經過 Ajax 獲取數據，所以也就有了處理數據的需求，因而就促使了前端 MVC 的誕生。

我第一個前端項目就是使用 MVC 模式作的，使用的是 ExtJs，它曾經是一個很好的企業級 Web 富客戶端應用開發平臺，它作出來的頁面效果特別酷炫。以下圖所示：

而我在作這個項目時就應用了 MVC 的模式。

視圖（View）：用戶界面
控制器（Controller）：業務邏輯
模型（Model）：數據模型

View 做爲用戶界面，發送指令給 Controller，Controller 要求 Model 改變狀態，同時 Model 把更新過的數據發送給 View 反饋給用戶。

MVC 模型最核心的一點就是全部通訊都是單向的。

其實生活當中，MVC 的設計思想不少地方都有所體現，以家用微波爐爲例，能夠將它也理解成三層結構。微波爐的外觀以及上面的操做摁鈕就是"視圖層"（view），而其內部的微波產生裝置磁控管則是"數據層"（Model），這裏的"數據"能夠理解成"核心功能"。把操做摁鈕的指令轉化爲對磁控管的操做則是由「控制器層」的電路板來實現的。

若是如今要給微波爐更換一個新潮的外殼，或者更換一個更大功率的磁控管，徹底能夠在不更改其餘層的狀況下實現。每一層都是獨立的，這就是 MVC 模式的最大優點。

在這個階段的後期，前端逐漸開始有了一點工程化的影子，而且開始受 CommonJS 的影響，有了模塊化編程的概念，誕生了相應的 CMD 和 AMD 的規範。開始有了構建工具 Grunt/Gulp，開始有了編碼的規範 JsLint。

3.MVVM (Model-View-ViewModel)

MVVM 一樣是一種軟件架構模式，它是在 MVC 的基礎上演進過來的，去掉了 MVC 中的 Controller，增長了數據的雙向綁定。

最有表明性的框架就是 Google 公司推出的 Angular，它的風格屬於 HTML 語言的加強，核心概念就是數據雙向綁定。

Vue也能夠算是 MVVM 模型，雖然它沒有徹底遵照 MVVM 的設計，但受到了 MVVM 的啓發，在最開始的時候也是雙向數據綁定，而且一直使用 vm 表示 View-Model。就以 Vue爲例，簡單看下 MVVM 的思想。

4.SPA (single-page application)

SPA 是單頁應用的意思，它是區分傳統模式而言的。咱們一開始就探討過從輸入URL到頁面呈如今咱們面前的過程，也熟悉了 HTML 、 CSS 和 JS。如今換個角度來看這個過程：

當客戶端發起頁面請求後，後端收到請求，而後取出數據庫中的數據，組裝好 HTML，而後返回 HTML 、 CSS 和 JS。有了 Ajax 後，咱們在當前頁面能夠從新獲取數據，並更新頁面內容。但當咱們切換頁面，也就是有頁面跳轉時，整個過程會從頭再來一次。

精益求精的前端開發者們這個時候就在考慮，既然 Ajax 能夠在當前頁面獲取數據並隨時更新當前頁面，那是否是能夠作到切換頁面時也只經過 Ajax 獲取數據更新頁面，而不所有從新加載呢？

答案固然是能夠！以下圖所示，用戶第一次發起頁面請求時，後端收到請求，而後取出數據庫中的數據，返回 CSS 和 JS文件。

JS 文件包括了頁面切換邏輯的處理，這是單頁應用實現的關鍵，它利用 Hash 或者 History 的技術，實現了當切換頁面時，首先經過 Ajax 獲取到新頁面須要的數據，而後由 JS 根據要切換到的網址，使用獲取到的數據來拼接出要展現頁面的 HTML。

整個切換頁面的動做所有由前端來完成了。這就是單頁應用，全部的資源只在第一次頁面請求時被加載，後面都只會發起 Ajax 請求獲取數據而已。

5.SSR (server side render)

SPA 讓 web 變成了應用的形態，它是客戶端渲染（client side render）。客戶端渲染有它的弊端，譬如無法作 SEO(Search Engine Optimization)，因爲全部的 JS 和 CSS會在首次訪問時被所有加載，而且 HTML 是在前端組裝的，就勢必致使首屏加載以及渲染的時間會增長，影響用戶體驗。