石器時代 (90 年代)

時間軸

  • 1990: 第一個 Web Browser 出現
  • 1994: Navigator 發布
  • 1995: Javascript 由 Brendan Eich 開發
  • 2002: IE 贏得瀏覽器大戰，市佔超過 96%

主流設計概念

  • MVC，由 Model 負責 Data
  • 除了 html, css, javascript 外，開始用到 JSP 與 Smarty 模板。雖然此時已經可以顯示後端數據，但是此時要刷新整個頁面，耗費頁面載入時間。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>smarty</title>
  </head>
  <body>
    his name is {$name}
  </body>
</html>
  • 2004 Google 發布 Gmail，此時可以透過 Ajax 異步獲取數據刷新頁面，前端不再受限後端模板，宣告 Web 2.0 時代到來。

鐵器時代

  • jQuery 出現，解決瀏覽器兼容性問題，是 jQuery + Bootstrap 的主流時期
$("#alert-btn").on("click", function () {
  $("#app .input").val("hi");
});
  • 2009 年，AngularJS 與 Node.js 誕生，開始了前端的工業革命時代。

工業時代

  • AngularJS 引領前端的 MVVM 模式的流行，此時 Angular，React，Vue 開始出現
  • MVVM 將 Controller 變成 View-Model layer，作為 Model 與 View 的橋樑，由 VM 來同步 View 與 Model 層。

前端三大框架比較

主流設計概念

目標一致：數據驅動頁面

data-driven

框架比較

Angular1

  • 使用 Dirty Check，只要數據變化，就去更新 DOM 一次。

Angular(2)

  • 向前不相容，引入了 TypeScript 與 RxJS

Vue1

  • 響應式，使用 watcher 監聽數據的屬性變化，就可以知道哪個 Key 改變了，再去修改對應的 DOM。

vue1

React

  • 在 Browser 的 DOM 之上，提出了 Virtual DOM 概念，使用 Javascript Object 去描述整個 DOM Tree，透過 Virtual DOM 計算出變化的數據，去修改頁面。

    <div id="app">
  <p class="item">item1</p>
  <div class="item">item2</div>
</div>

    此時的 Virtual DOM 長成這樣：

    {
  "tag": "div",
  "attrs": {
    "id": "app"
  },
  "children": [
    {
      "tag": "p",
      "attrs": {
        "className": "item"
      },
      "children": ["item1"]
    },
    {
      "tag": "p",
      "attrs": {
        "className": "item"
      },
      "children": ["item2"]
    }
  ]
}

diff

計算 Diff ，可以減少 DOM 修改，使得效率提高。

Vue 與 React 對比

  • Vue 情況下，如果數據變化，框架會透過 Watcher 主動告訴你哪些數據變化了。但是當項目大時，太多 Watcher 會影響效能。
  • Vue2 使用 Virtual DOM 在 Component 內，Component 間使用 watcher 達到響應式更新，從而降低 watcher 數量。
  • React 情況下，只能透過新舊數據 virtual DOM Diff 被動得知。如果 Virtual DOM Tree 太大，會使得計算時間太久，造成性能卡頓。
  • React 引入了 Fiber 架構，將 virtual DOM 變成 Chain，利用空閑時間計算 Diff。