虛擬DOM性能優化實戰，一樣是操做DOM，爲何說他快？

爲何說虛擬DOM快？

虛擬DOM不會進行排版與重繪操做
虛擬DOM進行頻繁修改，而後一次性比較並修改真實DOM中須要改的部分（注意！），最後並在真實DOM中進行排版與重繪，減小過多DOM節點排版與重繪損耗
真實DOM頻繁排版與重繪的效率是至關低的
虛擬DOM有效下降大面積（真實DOM節點）的重繪與排版，由於最終與真實DOM比較差別，能夠只渲染局部（同2）
使用虛擬DOM的損耗計算：
總損耗=虛擬DOM增刪改+（與Diff算法效率有關）真實DOM差別增刪改+（較少的節點）排版與重繪
直接使用真實DOM的損耗計算：
總損耗=真實DOM徹底增刪改+（可能較多的節點）排版與重繪
總之，一切爲了減弱頻繁的大面積重繪引起的性能問題，不一樣框架不必定須要虛擬DOM，關鍵看框架是否頻繁會引起大面積的DOM操做。

虛擬DOM優化實戰

若是我有1000條數據，我修改了其中兩條，真實的DOM會從新渲染1000條數據，只要發生了變化，就會從新渲染所有數據，虛擬dom 會生成1000個對象 （它是不會被瀏覽器圖形化渲染的），虛擬dom 裏的東西會和真實dom綁定在一塊兒，當數據發生變化 虛擬dom和以前的虛擬dom 會去作數據的比較，當數據發生變化時，纔會去更新數據發生改變的那部分真實的dom元素

可是數組沒有默認的標識，因此數組每次改變都要從新排序，性能影響較大，因此在實時偵聽遍歷數組數據時，須要引入key屬性，用來標識數組數據，通常使用下標標識

<template>
  <div>
      <ul><!--遍歷數組時，添加 key 屬性是爲了優化vnode-->
        <li 
          v-for="(item,index) in list"
          :key="index" 
          @click="list.push('laowang')"
          >
          {{item}}
        </li>
      </ul>
  </div>
</template>
 
<script>
export default {
  mounted() {
    console.log(this);
  },
  data() {
    return {
      list: ["zhangsan", "lisi"]
    };
  }
};
</script>
 
<style>
</style>

下面咱們談一下DOM的key值，你們應該也在小程序，vue中遇到過for循環時，若是不給循環的標籤一個key值，瀏覽器會console一個警告，那麼這個key值究竟有什麼用呢，以及爲何不建議用index作key值呢？

左圖描述了一個數組，咱們在渲染的時候讓數組中的5個數據生成了5個虛擬DOM樹，這時咱們新增長一個數據，因爲咱們沒有給節點key值，因此當咱們在作兩個虛擬DOM比對時，節點與節點之間的關係就很難被確立，這點會損耗比對過程的性能。

因此建議你們必定要在循環中給節點加上key值，爲何不推薦用index作key值呢，緣由在於兩個虛擬DOM比對時，若是key值是固定的（如對象自己，若是是從數據庫讀取的數據，key值能夠設置成這條數據的id），這時比對的效率會很是高。

假設使用index作key值，那麼咱們在刪除一項數據的時候，會致使index值錯位，如：

原始數據： A-0, B-1, C-2
這時咱們刪除A，數據變爲：B-0, C-1

這樣key值就失去了存在的意義，因此官方建議咱們使用一個穩定的值去作key值。

以上爲本期介紹的虛擬DOM優化實戰，您能夠關注個人公衆號，關注更多前端知識，還有前端大羣一塊兒交流學習！