vue.js 3.x 學習手冊 (2) Virtual DOM所帶來的好處

第 12 屆 iThome 鐵人賽

DAY 2

自我挑戰組

網頁前端框架 Vue 3 從頭開始系列第 2 篇

12th鐵人賽

史坦利

2020-09-03 09:12:20

3833 瀏覽

分享至

前一篇文章提到，其實並不是每一個專案都適合使用框架進行開發，應當是了解框架能夠帶來的優點後，在針對自己常接觸的專案進行評估導入，像我身邊許多朋友做的是中、小企業的形象網頁，在更新率不高、頁面數不多、瀏覽數有限的狀態下，實在未必需要利用框架，但當然這樣的網站利潤不會太高，所以在往更高階、資料互動性更高、網站瀏覽人數更多的網站上，框架往往能提供我們意想不到的好處，今天要來介紹的是我羅列出來最後一個框架的特色“Virtual DOM”（當然特色不僅如此，只是重點羅列）。

Virtual DOM是現代框架提昇網頁效能上的一個重點，在Vue 3的特色中也提到了有比前一版本更快速的Virtual DOM處理，至於為何Virtual DOM能提昇網頁的效能，大家就必須了解我們透過Javascirpt更新實體DOM時會產生的效能問題開始了解。

實體DOM更新的效能測試

這邊製作一個簡單的範例對實體DOM和虛擬DOM的效能進行說明：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="main">
        <div class="itemList">
          <p id="pID">Item 1</p>
        </div>
      </div>
    </div>
    <button onClick="insertItems()">Go</button>
  </div>
</body>
</html>
<script>
  var itemData = "";
  function insertItems() {
    for (var i = 1; i <= 100000; i++) {
      itemData = "Item " + i
      document.getElementById("pID").innerHTML = itemData;
    }
  }
</script>

上面這個案例當使用者按下按鈕的時候，程式會透過一個迴圈去更新頁面上的內容，在傳統HTML DOM的操作上只要頁面元素有變更，就可能會觸發Reflow或Repaint這樣的動作，瀏覽器也會耗費相當多的資源在進行這些動作，以上述的例子來看，當我們按下頁面上的按鈕之後，就會透過迴圈去改變p的內容，這樣將會觸發多次的瀏覽器動作。

下圖是我們在Chrome中獲得的效能資訊：

若是我們將上述程式中的第27行移除，則效能會改變如下圖所示：

這樣可以很明確的了解效能殺手就是程式中的第27行，而這行程式的目的是去更新瀏覽器中的內容，若沒有這行沒辦法讓使用者看到最終的結果，因為我們必須透過這樣的方式更新DOM內容。

虛擬DOM的效能測試

同樣頁面的效果，我們在Vue裡面的作法如下（主要在分析Virtual DOM的效能，大家可以先不用在乎程式的內容是否能弄懂）：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <div class="wrapper">
      <div class="container">
        <div class="main">
          <div class="itemList">
            <p id="pID">{{ message }}</p>
          </div>
        </div>
      </div>
      <button @click="insertItems">Go</button>
    </div>
  </div>
</body>
</html>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Item 1'
      }
    },
    methods: {
      insertItems() {
        for (var i = 1; i <= 100000; i++) {
          this.message = "Item " + i;
        }
      }
    }
  }).mount('#app');
</script>

同樣的結果在Vue會在Javascript和瀏覽器中加入一層Virturl DOM，待Virturl DOM更新完畢之後，再寫入瀏覽器中。

透過這樣的方法，使用這得到的一樣的效果，但大大提高了使用者端瀏覽器的效能，可以從下圖觀察的出來（大部分的浪費的時間是我點選錄製與停止錄製的Idle Time）。

在Virtual DOM的架構中，會把程式的動作動作集中在Virtual DOM中運算，當確定整個頁面結構之後，再一次性地將結果繪製到頁面中，可以想像成原本的DOM操作就是在每一次在CPU運算之後，直接把結果寫到硬碟當中，而Virtual DOM就是在CPU與硬碟間加入了記憶體層，CPU運算後先將結果儲存在記憶體中，最後再將記憶體的資料一次性的寫入硬碟。

PS：記憶體的運算速度超過硬碟很多倍。

結論

綜合上述所說，網頁專案中採用前端框架，有著減少開發時間、易於維護、增加頁面效能…等優點，但若你的專案並不會大量與後端串接、製作上元件重複使用的機會不高、在頁面中也不太會對DOM進行Reflow與Repaint，可能是一個活動網頁、公司形象網頁…等，也許就沒有必要去選用一個前端框架，簡言之工具用在正確的地方，才能顯現出它的價值，當然目前符合使用框架的專案也一定非常多，也就是這樣的原因，才會造成前端框架的流行。