日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue實現(xiàn)原理+前端性能優(yōu)化

 一、Vue實現(xiàn)原理

1、Vue簡介

現(xiàn)在的大前端時代，是一個動蕩紛爭的時代，江湖中已經(jīng)分成了很多門派，主要以Vue，React還有Angular為首，形成前端框架三足鼎立的局勢。Vue在前端框架中的地位就像曾經(jīng)的jQuery，由于其簡單易懂、開發(fā)效率高，已經(jīng)成為了前端工程師必不可少的技能之一。

Vue是一種漸進式JavaScript框架，完美融合了第三方插件和UI組件庫，它和jQuery最大的區(qū)別在于，Vue無需開發(fā)人員直接操作DOM節(jié)點，就可以改變頁面渲染內(nèi)容，在應(yīng)用開發(fā)者具有一定的HTML、CSS、JavaScript的基礎(chǔ)上，能夠快速上手，開發(fā)出優(yōu)雅、簡潔的應(yīng)用程序模塊。

但是我們提及Vue的時候，更多的是關(guān)注它的用法，而不是學(xué)習(xí)它是如何解決前端問題的，這多少有點亞健康。有前端開發(fā)經(jīng)驗的人，一定在開發(fā)過程中遇到過奇奇怪怪的問題，然后稀里糊涂地解決，倘若再次遇到相似的問題，便再次手足無措，作為一名前端工程師，在遇到問題的時候我們是否能準(zhǔn)確定位產(chǎn)生問題的原因并及時解決，主要取決于我們對前端框架的理解是否足夠深入。

2、Vue實現(xiàn)原理

2.1 虛擬DOM（Virtual DOM）

隨著時代的發(fā)展，Web應(yīng)用的頁面交互效果越來越復(fù)雜，頁面功能越來越豐富，需要維護的狀態(tài)越來越多，DOM操作也越來越頻繁。DOM操作雖然簡單易用，但是會產(chǎn)生不好維護的問題。

在程序執(zhí)行的過程中，Watcher初始化時會將每一個節(jié)點和狀態(tài)進行一一關(guān)聯(lián)和映射，setter監(jiān)聽到Data的狀態(tài)發(fā)生改變后，就會通知Watcher，Watcher會將這些變化通知曾經(jīng)記錄過的DOM以及跟這些狀態(tài)相關(guān)的節(jié)點，從而觸發(fā)頁面的渲染過程。組件接收到狀態(tài)變化后，會通過編譯將模板轉(zhuǎn)換成渲染函數(shù)Render，執(zhí)行渲染函數(shù)就會得到一個虛擬DOM樹，通過對比舊的虛擬DOM和新生成的虛擬DOM樹，來更新對應(yīng)的實際DOM節(jié)點，執(zhí)行頁面渲染。

主流前端框架幾乎都在使用虛擬DOM，但是在使用虛擬DOM的時候，Angular和React都無法確定具體是哪個狀態(tài)發(fā)生了變化，因此需要在舊的虛擬DOM和新的虛擬DOM之間進行暴力對比，但Vue從1.0版本開始，就通過細粒度的綁定來更新視圖，也就是說，當(dāng)狀態(tài)發(fā)生變化的時候Vue可以知道具體是哪個狀態(tài)哪些節(jié)點需要發(fā)生改變，從而對這個節(jié)點執(zhí)行更新，然而這種細粒度的變化偵測會有一些內(nèi)存開銷影響性能，一個項目越復(fù)雜，開銷就越大。

Vue從2.0版本后，為了優(yōu)化性能，引入了虛擬DOM，選擇了一個折中的方案，既不需要暴力對比整個新舊虛擬DOM，也不需要通過細粒度的綁定來實現(xiàn)視圖的更新，即以組件為單位進行Watcher監(jiān)聽，也就是說即便一個組件內(nèi)有多個節(jié)點使用了某個狀態(tài)，也只需一個Watcher來監(jiān)聽這個狀態(tài)的變化，當(dāng)這個狀態(tài)發(fā)生變化時，Watcher通知組件，組件內(nèi)部通過虛擬DOM的方式去進行節(jié)點的對比和重新渲染。

2.2 常用指令實現(xiàn)原理

指令是指Vue提供的以“v-”前綴的特性，當(dāng)指令中表達式的內(nèi)容發(fā)生變化時，會連帶影響DOM內(nèi)容發(fā)生變化。Vue.directive全局API可以創(chuàng)建自定義指令，并獲取全局指令，除了自定義指令，Vue還內(nèi)置了一些開發(fā)過程中常用的指令，如v-if、v-for等。在Vue模板解析時，會將指令解析到AST，使用AST生成字符串的過程中實現(xiàn)指令的功能。

在解析模板時，會將節(jié)點上的指令解析出來并添加到AST的directives屬性中，directives將數(shù)據(jù)發(fā)送到VNode中，在虛擬DOM進行頁面渲染時，會觸發(fā)某些鉤子函數(shù)，當(dāng)鉤子函數(shù)被觸發(fā)后，就說明指令已生效。

2.2.1 v-if指令原理

在應(yīng)用程序中使用v-if指令： 

 
 
 
 
    
  
  
  
  
  1. create if
  
  • create else
    •  

    在編譯階段生成： 

     
 
 
 
      
  
  
  
  
    1. (create)  
      2. 
  
  
  
  
    2.  ? _c('div',[_v("create if")])  
      3. 
  
  
  
  
    3.  : _c('div',[_v("create else")]) 
      4.

    在代碼執(zhí)行時，會根據(jù)create的值來選擇創(chuàng)建哪個節(jié)點。

    2.2.2 v-for指令原理

    在應(yīng)用程序中使用v-for指令： 

     
 
 
 
      
  
  
  
  
    1. {{item}}
      2.  

    在編譯階段生成： 

     
 
 
 
      
  
  
  
  
    1. _l((list), function(item, index){  
      2. 
  
  
  
  
    2.  return _c('li',[  
      3. 
  
  
  
  
    3.   _v(_s(item))  
      4. 
  
  
  
  
    4.  ]) 
      5. 
  
  
  
  
    5. }) 
      6.

    _l是renderList的別名，執(zhí)行代碼時，_l函數(shù)會循環(huán)list變量，調(diào)用第二個參數(shù)中傳遞的函數(shù)，傳遞兩個參數(shù)：item和index，當(dāng)_c函數(shù)被調(diào)用時，會執(zhí)行_v函數(shù)，創(chuàng)建一個節(jié)點。

    2.2.3 自定義指令原理

    在應(yīng)用程序中，指令的處理邏輯分別監(jiān)聽了create函數(shù)、update函數(shù)以及destory函數(shù)，具體實現(xiàn)如下： 

     
 
 
 
      
  
  
  
  
    1. export default {  
      2. 
  
  
  
  
    2.  create: updateDirectives,  
      3. 
  
  
  
  
    3.  update: updateDirectives,  
      4. 
  
  
  
  
    4.  destory: function unbindDirectives (vnode){  
      5. 
  
  
  
  
    5.   updateDirectives(vnode, emptyNode)  
      6. 
  
  
  
  
    6.  }  
      7. 
  
  
  
  
    7. } 
      8.

    鉤子函數(shù)被觸發(fā)后，會執(zhí)行updateDirectives函數(shù)，代碼如下： 

     
 
 
 
      
  
  
  
  
    1. function updateDirectives(oldVnode, vnode){  
      2. 
  
  
  
  
    2.  if (oldVnode.data.directives || vnode.data.directives) {  
      3. 
  
  
  
  
    3.   _update(oldVnode, vnode)  
      4. 
  
  
  
  
    4.  }  
      5. 
  
  
  
  
    5. } 
      6.

    在該函數(shù)中，不論是否存在舊虛擬節(jié)點，只要其中存在directives，就會執(zhí)行_update函數(shù)，_update函數(shù)代碼如下： 

     
 
 
 
      
  
  
  
  
    1. function _update(oldVnode, vnode) {  
      2. 
  
  
  
  
    2.  const isCreate = oldVnode === emptyNode  
      3. 
  
  
  
  
    3.  const isDestory = vnode === emptyNode  
      4. 
  
  
  
  
    4.  const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)  
      5. 
  
  
  
  
    5.  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)  
      6. 
  
  
  
  
    6.  const dirsWithInsert = []  
      7. 
  
  
  
  
    7.  const dirsWithPostpatch = []  
      8. 
  
  
  
  
    8.  let key, oldDir, dir  
      9. 
  
  
  
  
    9.  for (key in newDirs) {  
      10. 
  
  
  
  
    10.   oldDir = oldDirs[key]  
      11. 
  
  
  
  
    11.   dir = newDirs[key]  
      12. 
  
  
  
  
    12.   if (!oldDir) { //新指令觸發(fā)bind  
      13. 
  
  
  
  
    13.    callHook(dir, 'bind', vnode, oldVnode)  
      14. 
  
  
  
  
    14.    if (dir.def && dir.def.inserted) {  
      15. 
  
  
  
  
    15.     dirsWithInsert.push(dir)  
      16. 
  
  
  
  
    16.    }  
      17. 
  
  
  
  
    17.   } else { //指令已存在觸發(fā)update  
      18. 
  
  
  
  
    18.    dir.oldValue = oldDir.value  
      19. 
  
  
  
  
    19.    callHook(dir, 'update', vnode, oldVnode)  
      20. 
  
  
  
  
    20.    if (dir.def && dir.def.componentUpdated) {  
      21. 
  
  
  
  
    21.     dirsWithPostpatch.push(dir)  
      22. 
  
  
  
  
    22.    }  
      23. 
  
  
  
  
    23.   }  
      24. 
  
  
  
  
    24.  }  
      25. 
  
  
  
  
    25.  if (dirsWithInsert.length) {  
      26. 
  
  
  
  
    26.   const callInsert = () => {  
      27. 
  
  
  
  
    27.    for (let i = 0; i < dirsWithInsert.length; i++) {  
      28. 
  
  
  
  
    28.     callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)  
      29. 
  
  
  
  
    29.    }  
      30. 
  
  
  
  
    30.   }  
      31. 
  
  
  
  
    31.   if (isCreate) {  
      32. 
  
  
  
  
    32.    mergeVNodeHook(vnode, 'insert', callInsert) 
      33. 
  
  
  
  
    33.    } else {  
      34. 
  
  
  
  
    34.    callInsert()  
      35. 
  
  
  
  
    35.   }  
      36. 
  
  
  
  
    36.  }  
      37. 
  
  
  
  
    37.  if (dirsWithPostpatch.length) {  
      38. 
  
  
  
  
    38.   mergeVNodeHook(vnode, 'postpatch', () => {  
      39. 
  
  
  
  
    39.    for(let i = 0; i < dirsWithPostpatch.length; i++) {  
      40. 
  
  
  
  
    40.     callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)  
      41. 
  
  
  
  
    41.    }  
      42. 
  
  
  
  
    42.   })  
      43. 
  
  
  
  
    43.  }  
      44. 
  
  
  
  
    44.  if (!isCreate) {  
      45. 
  
  
  
  
    45.   for(key in oldDirs) {  
      46. 
  
  
  
  
    46.    if (!newDirs[key]) {  
      47. 
  
  
  
  
    47.     callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestory)  
      48. 
  
  
  
  
    48.    }  
      49. 
  
  
  
  
    49.   }  
      50. 
  
  
  
  
    50.  }  
      51. 
  
  
  
  
    51. } 
      52.

    isCreate：判斷該虛擬節(jié)點是否是一個新建的節(jié)點。

    isDistory：判斷是否刪除一個舊虛擬節(jié)點。

    oldDirs：舊的指令集合，oldVnode中保存的指令。

    newDirs：新的指令集合，vnode中保存的指令。

    dirsWithInsert：觸發(fā)inserted指令鉤子函數(shù)的指令列表。

    dirsWithPostpatch：觸發(fā)componentUpdated鉤子函數(shù)的指令列表。

    通過normalizeDirectives函數(shù)將模板中使用的指令從用戶注冊的自定義指令集合中取出來的結(jié)果如下： 

     
 
 
 
      
  
  
  
  
    1. {  
      2. 
  
  
  
  
    2.  v-customize: {  
      3. 
  
  
  
  
    3.   def: {inserted: f},  
      4. 
  
  
  
  
    4.   modifiers: {},  
      5. 
  
  
  
  
    5.   name: "customize",  
      6. 
  
  
  
  
    6.   rawName: "v-customize"  
      7. 
  
  
  
  
    7.  }  
      8. 
  
  
  
  
    8. } 
      9.

    自定義指令的代碼為： 

     
 
 
 
      
  
  
  
  
    1. Vue.directives('customize', {  
      2. 
  
  
  
  
    2.  inserted: function (el) {  
      3. 
  
  
  
  
    3.   el.customize()  
      4. 
  
  
  
  
    4.  }  
      5. 
  
  
  
  
    5. }) 
      6.

    虛擬DOM在對比和渲染時，會根據(jù)不同情景觸發(fā)不同的鉤子函數(shù)，當(dāng)使用虛擬節(jié)點創(chuàng)建一個新的實際節(jié)點時，會觸發(fā)create鉤子函數(shù)，當(dāng)一個DOM節(jié)點插入到父節(jié)點時，會觸發(fā)insert鉤子函數(shù)。

    callHook函數(shù)執(zhí)行鉤子函數(shù)的方式如下： 

     
 
 
 
      
  
  
  
  
    1. function callHook(dir, hook, vnode, oldVnode, isDestory) {  
      2. 
  
  
  
  
    2.  const fn = dir.def && dir.def[hook]  
      3. 
  
  
  
  
    3.  if (fn) {  
      4. 
  
  
  
  
    4.   try {  
      5. 
  
  
  
  
    5.    fn(vnode.elm, dir, vnode, oldVnode, isDestory)  
      6. 
  
  
  
  
    6.   } catch (e) {  
      7. 
  
  
  
  
    7.    handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`) 
      8. 
  
  
  
  
    8.   }  
      9. 
  
  
  
  
    9.  }  
      10. 
  
  
  
  
    10. } 
      11.

    callHook函數(shù)的參數(shù)意義分別為：

    dir：指令對象。

    hook：將要觸發(fā)的鉤子函數(shù)名。

    vnode：新的虛擬節(jié)點。

    oldVnode：舊的虛擬節(jié)點。

    isDestory：判斷是否刪除一個舊虛擬節(jié)點。

    虛擬DOM在渲染時會觸發(fā)的所有鉤子函數(shù)及其觸發(fā)機制如下：

    需要注意的是，remove函數(shù)是只有一個元素從其父元素中移除時才會觸發(fā)，如果該元素是被移除元素的子元素，則不會觸發(fā)remove函數(shù)。

    二、前端性能優(yōu)化

    前端在一個應(yīng)用中，主要承擔(dān)在用戶打開一個頁面時，發(fā)送請求到服務(wù)器，接收服務(wù)器返回的頁面進行渲染并將渲染結(jié)果呈現(xiàn)給用戶的功能。

    要提高前端性能需要從與用戶操作無關(guān)的客戶端和服務(wù)端交互和瀏覽器解析頁面著手，也就是從傳輸和渲染兩方面著手。

    1、請求傳輸

    1.1請求維度

    基于目前前后端傳輸廣泛使用的HTTP 1.1協(xié)議，可以從壓縮請求的大小和減少請求的數(shù)量兩方面著手進行優(yōu)化，主要的優(yōu)化手段如下：

    1.2協(xié)議維度

    從1.0的短連接到1.1的長連接到HTTP2.0、3.0，做出了很多改變，每次協(xié)議的升級對前端性能優(yōu)化來講都是一次飛躍。HTTP2.0的新特性如下：

    二進制分幀：HTTP2.0在應(yīng)用層與傳輸層之間增加一個二進制分幀層，將所有傳輸?shù)男畔⒎指顬楦〉南⒑蛶?并對它們采用二進制格式的編碼，使通信都在一個可以承載任意數(shù)量的雙向數(shù)據(jù)流的TCP連接上完成。

    壓縮頭部：使用HPACK算法，規(guī)定了在客戶端和服務(wù)器端會使用并且維護“首部表”來跟蹤和存儲之前發(fā)送的鍵值對，對于相同的頭部，不必再通過請求發(fā)送，減少了頭部開銷。

    多路復(fù)用：客戶端和服務(wù)器可以把HTTP消息分解為互不依賴的幀，然后亂序發(fā)送，最后再在另一端把它們重新組合起來。

    請求優(yōu)先級：每個流都可以帶有一個31bit的優(yōu)先值：0表示最高優(yōu)先級；2的31次方-1表示最低優(yōu)先級。

    服務(wù)器推送：通過提供push-promise幀來實現(xiàn)真正意義上的瀏覽器推送，擺脫利用ajax輪詢進行偽實時的場景。

    2、瀏覽器渲染

    2.1 瀏覽器單線程解析渲染阻塞

    瀏覽器的主要構(gòu)成如下：

    它的幾個常駐線程如下：

    由于GUI線程和JS引擎線程互斥，故衍生了一系列避免渲染過程中發(fā)生阻塞的優(yōu)化方法，如樣式文件放頭部，腳本文件放在DOM節(jié)點最末尾；針對不需要操作DOM的腳本，可以采用動態(tài)創(chuàng)建script標(biāo)簽的方式載入；腳本文件加上async或者defer等。

    2.2 巨大的DOM開銷

    在瀏覽器渲染的過程中，巨大的DOM開銷無疑成為了渲染效率是最大瓶頸。通過如下代碼可以輸出一個空DOM節(jié)點，查看它所包含的300余個屬性和事件。 

     
 
 
 
      
  
  
  
  
    1. let ele = document.createElement("div")  
      2. 
  
  
  
  
    2. let obj = {}  
      3. 
  
  
  
  
    3. for (const prop in ele) {  
      4. 
  
  
  
  
    4.   obj[prop]=ele[prop]  
      5. 
  
  
  
  
    5. }  
      6. 
  
  
  
  
    6. console.log(obj) 
      7.

    2.2.1重繪與回流

    重繪是指當(dāng)頁面展示元素中的一些元素需要更新屬性，這些屬性只是影響元素的外觀、風(fēng)格，而不會影響布局的，比如background-color?；亓魇侵府?dāng)頁面展示元素中的一部分(或全部)因為元素的規(guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建。顯然，重繪不一定導(dǎo)致回流，回流必然導(dǎo)致重繪。

    它們都會帶來一定的DOM開銷，需要盡力去避免，常見的避免手段有避免觸發(fā)同步布局事件;對于復(fù)雜動畫效果,使用絕對定位讓其脫離文檔流；css3硬件加速（transform、opacity、filters、Will-change）等。

    2.2.2虛擬DOM

    針對巨大的DOM開銷，除了盡力避免重繪和回流，近幾年還有一種比較流行的，各大框架比如VUE、react都使用的虛擬DOM的方式。

    虛擬DOM是一顆以js對象為基礎(chǔ)的樹，用對象屬性來描述節(jié)點，是對DOM的抽象，通過一系列操作將其映射到真實環(huán)境。

    用一段代碼來模擬展示一下這個過程，首先用戶編寫模板如下： 

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.  {{item}}
      3.   
  
  
  
  
    3.  
      4.

    編譯后的內(nèi)容如下所示，采用了creatElement語法糖的形式創(chuàng)建節(jié)點。 

     
 
 
 
      
  
  
  
  
    1. createElement {  
      2. 
  
  
  
  
    2.  "ul",  
      3. 
  
  
  
  
    3.  {  
      4. 
  
  
  
  
    4.   attr:{  
      5. 
  
  
  
  
    5.    id: "myId"  
      6. 
  
  
  
  
    6.   }  
      7. 
  
  
  
  
    7.  },  
      8. 
  
  
  
  
    8.  [  
      9. 
  
  
  
  
    9.   createElement("li", 1), 
      10. 
  
  
  
  
    10.   createElement("li", 2), 
      11. 
  
  
  
  
    11.   createElement("li", 3)  
      12. 
  
  
  
  
    12.  ]  
      13. 
  
  
  
  
    13. } 
      14.

    經(jīng)過渲染函數(shù)的執(zhí)行生成虛擬DOM樹，其大致結(jié)構(gòu)如下：

    最終將虛擬DOM樹轉(zhuǎn)化為真實DOM。

    虛擬DOM對性能的DOM開銷的優(yōu)化主要體現(xiàn)在當(dāng)節(jié)點有變化時，它可以通過differ算法比較變化前后的虛擬DOM結(jié)構(gòu)的變化，通過對節(jié)點屬性的修改做必要的調(diào)整，而不是無腦的銷毀舊節(jié)點創(chuàng)建新節(jié)點。

    這個過程的主要步驟是：用js對象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)，然后用這個樹構(gòu)造一個真正的DOM樹，插入文檔中；當(dāng)狀態(tài)變更時，重新構(gòu)造一棵新樹，與舊樹進行對比，記錄差異；將記錄的差異應(yīng)用到所構(gòu)建的真正的DOM樹上。需要特別注意的是，differ算法遵循同級比較的原則，在使用的過程中要盡量減少跨層級的DOM調(diào)整。


    當(dāng)前文章：Vue實現(xiàn)原理+前端性能優(yōu)化
    網(wǎng)站鏈接：http://www.dlmjj.cn/article/djhoceo.html