您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何理解Vue實(shí)現(xiàn)原理與前端性能優(yōu)化”,在日常操作中,相信很多人在如何理解Vue實(shí)現(xiàn)原理與前端性能優(yōu)化問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”如何理解Vue實(shí)現(xiàn)原理與前端性能優(yōu)化”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
一、Vue實(shí)現(xiàn)原理
1、Vue簡介
現(xiàn)在的大前端時(shí)代,是一個(gè)動(dòng)蕩紛爭的時(shí)代,江湖中已經(jīng)分成了很多門派,主要以Vue,React還有Angular為首,形成前端框架三足鼎立的局勢(shì)。Vue在前端框架中的地位就像曾經(jīng)的jQuery,由于其簡單易懂、開發(fā)效率高,已經(jīng)成為了前端工程師必不可少的技能之一。
Vue是一種漸進(jìn)式JavaScript框架,完美融合了第三方插件和UI組件庫,它和jQuery最大的區(qū)別在于,Vue無需開發(fā)人員直接操作DOM節(jié)點(diǎn),就可以改變頁面渲染內(nèi)容,在應(yīng)用開發(fā)者具有一定的HTML、CSS、JavaScript的基礎(chǔ)上,能夠快速上手,開發(fā)出優(yōu)雅、簡潔的應(yīng)用程序模塊。
但是我們提及Vue的時(shí)候,更多的是關(guān)注它的用法,而不是學(xué)習(xí)它是如何解決前端問題的,這多少有點(diǎn)亞健康。有前端開發(fā)經(jīng)驗(yàn)的人,一定在開發(fā)過程中遇到過奇奇怪怪的問題,然后稀里糊涂地解決,倘若再次遇到相似的問題,便再次手足無措,作為一名前端工程師,在遇到問題的時(shí)候我們是否能準(zhǔn)確定位產(chǎn)生問題的原因并及時(shí)解決,主要取決于我們對(duì)前端框架的理解是否足夠深入。
2、Vue實(shí)現(xiàn)原理
2.1 虛擬DOM(Virtual DOM)
隨著時(shí)代的發(fā)展,Web應(yīng)用的頁面交互效果越來越復(fù)雜,頁面功能越來越豐富,需要維護(hù)的狀態(tài)越來越多,DOM操作也越來越頻繁。DOM操作雖然簡單易用,但是會(huì)產(chǎn)生不好維護(hù)的問題。
在程序執(zhí)行的過程中,Watcher初始化時(shí)會(huì)將每一個(gè)節(jié)點(diǎn)和狀態(tài)進(jìn)行一一關(guān)聯(lián)和映射,setter監(jiān)聽到Data的狀態(tài)發(fā)生改變后,就會(huì)通知Watcher,Watcher會(huì)將這些變化通知曾經(jīng)記錄過的DOM以及跟這些狀態(tài)相關(guān)的節(jié)點(diǎn),從而觸發(fā)頁面的渲染過程。組件接收到狀態(tài)變化后,會(huì)通過編譯將模板轉(zhuǎn)換成渲染函數(shù)Render,執(zhí)行渲染函數(shù)就會(huì)得到一個(gè)虛擬DOM樹,通過對(duì)比舊的虛擬DOM和新生成的虛擬DOM樹,來更新對(duì)應(yīng)的實(shí)際DOM節(jié)點(diǎn),執(zhí)行頁面渲染。
主流前端框架幾乎都在使用虛擬DOM,但是在使用虛擬DOM的時(shí)候,Angular和React都無法確定具體是哪個(gè)狀態(tài)發(fā)生了變化,因此需要在舊的虛擬DOM和新的虛擬DOM之間進(jìn)行暴力對(duì)比,但Vue從1.0版本開始,就通過細(xì)粒度的綁定來更新視圖,也就是說,當(dāng)狀態(tài)發(fā)生變化的時(shí)候Vue可以知道具體是哪個(gè)狀態(tài)哪些節(jié)點(diǎn)需要發(fā)生改變,從而對(duì)這個(gè)節(jié)點(diǎn)執(zhí)行更新,然而這種細(xì)粒度的變化偵測會(huì)有一些內(nèi)存開銷影響性能,一個(gè)項(xiàng)目越復(fù)雜,開銷就越大。
Vue從2.0版本后,為了優(yōu)化性能,引入了虛擬DOM,選擇了一個(gè)折中的方案,既不需要暴力對(duì)比整個(gè)新舊虛擬DOM,也不需要通過細(xì)粒度的綁定來實(shí)現(xiàn)視圖的更新,即以組件為單位進(jìn)行Watcher監(jiān)聽,也就是說即便一個(gè)組件內(nèi)有多個(gè)節(jié)點(diǎn)使用了某個(gè)狀態(tài),也只需一個(gè)Watcher來監(jiān)聽這個(gè)狀態(tài)的變化,當(dāng)這個(gè)狀態(tài)發(fā)生變化時(shí),Watcher通知組件,組件內(nèi)部通過虛擬DOM的方式去進(jìn)行節(jié)點(diǎn)的對(duì)比和重新渲染。
2.2 常用指令實(shí)現(xiàn)原理
指令是指Vue提供的以“v-”前綴的特性,當(dāng)指令中表達(dá)式的內(nèi)容發(fā)生變化時(shí),會(huì)連帶影響DOM內(nèi)容發(fā)生變化。Vue.directive全局API可以創(chuàng)建自定義指令,并獲取全局指令,除了自定義指令,Vue還內(nèi)置了一些開發(fā)過程中常用的指令,如v-if、v-for等。在Vue模板解析時(shí),會(huì)將指令解析到AST,使用AST生成字符串的過程中實(shí)現(xiàn)指令的功能。
在解析模板時(shí),會(huì)將節(jié)點(diǎn)上的指令解析出來并添加到AST的directives屬性中,directives將數(shù)據(jù)發(fā)送到VNode中,在虛擬DOM進(jìn)行頁面渲染時(shí),會(huì)觸發(fā)某些鉤子函數(shù),當(dāng)鉤子函數(shù)被觸發(fā)后,就說明指令已生效。
2.2.1 v-if指令原理
在應(yīng)用程序中使用v-if指令:
<div v-if="create">create if</div> <div v-else>create else</div>
在編譯階段生成:
(create) ? _c('div',[_v("create if")]) : _c('div',[_v("create else")])
在代碼執(zhí)行時(shí),會(huì)根據(jù)create的值來選擇創(chuàng)建哪個(gè)節(jié)點(diǎn)。
2.2.2 v-for指令原理
在應(yīng)用程序中使用v-for指令:
<li v-for="(item,index) in list">{{item}}</li>
在編譯階段生成:
_l((list), function(item, index){ return _c('li',[ _v(_s(item)) ]) })
_l是renderList的別名,執(zhí)行代碼時(shí),_l函數(shù)會(huì)循環(huán)list變量,調(diào)用第二個(gè)參數(shù)中傳遞的函數(shù),傳遞兩個(gè)參數(shù):item和index,當(dāng)_c函數(shù)被調(diào)用時(shí),會(huì)執(zhí)行_v函數(shù),創(chuàng)建一個(gè)節(jié)點(diǎn)。
2.2.3 自定義指令原理
在應(yīng)用程序中,指令的處理邏輯分別監(jiān)聽了create函數(shù)、update函數(shù)以及destory函數(shù),具體實(shí)現(xiàn)如下:
export default { create: updateDirectives, update: updateDirectives, destory: function unbindDirectives (vnode){ updateDirectives(vnode, emptyNode) } }
鉤子函數(shù)被觸發(fā)后,會(huì)執(zhí)行updateDirectives函數(shù),代碼如下:
function updateDirectives(oldVnode, vnode){ if (oldVnode.data.directives || vnode.data.directives) { _update(oldVnode, vnode) } }
在該函數(shù)中,不論是否存在舊虛擬節(jié)點(diǎn),只要其中存在directives,就會(huì)執(zhí)行_update函數(shù),_update函數(shù)代碼如下:
function _update(oldVnode, vnode) { const isCreate = oldVnode === emptyNode const isDestory = vnode === emptyNode const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context) const newDirs = normalizeDirectives(vnode.data.directives, vnode.context) const dirsWithInsert = [] const dirsWithPostpatch = [] let key, oldDir, dir for (key in newDirs) { oldDir = oldDirs[key] dir = newDirs[key] if (!oldDir) { //新指令觸發(fā)bind callHook(dir, 'bind', vnode, oldVnode) if (dir.def && dir.def.inserted) { dirsWithInsert.push(dir) } } else { //指令已存在觸發(fā)update dir.oldValue = oldDir.value callHook(dir, 'update', vnode, oldVnode) if (dir.def && dir.def.componentUpdated) { dirsWithPostpatch.push(dir) } } } if (dirsWithInsert.length) { const callInsert = () => { for (let i = 0; i < dirsWithInsert.length; i++) { callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode) } } if (isCreate) { mergeVNodeHook(vnode, 'insert', callInsert) } else { callInsert() } } if (dirsWithPostpatch.length) { mergeVNodeHook(vnode, 'postpatch', () => { for(let i = 0; i < dirsWithPostpatch.length; i++) { callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode) } }) } if (!isCreate) { for(key in oldDirs) { if (!newDirs[key]) { callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestory) } } } }
isCreate:判斷該虛擬節(jié)點(diǎn)是否是一個(gè)新建的節(jié)點(diǎn)。
isDistory:判斷是否刪除一個(gè)舊虛擬節(jié)點(diǎn)。
oldDirs:舊的指令集合,oldVnode中保存的指令。
newDirs:新的指令集合,vnode中保存的指令。
dirsWithInsert:觸發(fā)inserted指令鉤子函數(shù)的指令列表。
dirsWithPostpatch:觸發(fā)componentUpdated鉤子函數(shù)的指令列表。
通過normalizeDirectives函數(shù)將模板中使用的指令從用戶注冊(cè)的自定義指令集合中取出來的結(jié)果如下:
{ v-customize: { def: {inserted: f}, modifiers: {}, name: "customize", rawName: "v-customize" } }
自定義指令的代碼為:
Vue.directives('customize', { inserted: function (el) { el.customize() } })
虛擬DOM在對(duì)比和渲染時(shí),會(huì)根據(jù)不同情景觸發(fā)不同的鉤子函數(shù),當(dāng)使用虛擬節(jié)點(diǎn)創(chuàng)建一個(gè)新的實(shí)際節(jié)點(diǎn)時(shí),會(huì)觸發(fā)create鉤子函數(shù),當(dāng)一個(gè)DOM節(jié)點(diǎn)插入到父節(jié)點(diǎn)時(shí),會(huì)觸發(fā)insert鉤子函數(shù)。
callHook函數(shù)執(zhí)行鉤子函數(shù)的方式如下:
function callHook(dir, hook, vnode, oldVnode, isDestory) { const fn = dir.def && dir.def[hook] if (fn) { try { fn(vnode.elm, dir, vnode, oldVnode, isDestory) } catch (e) { handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`) } } }
callHook函數(shù)的參數(shù)意義分別為:
dir:指令對(duì)象。
hook:將要觸發(fā)的鉤子函數(shù)名。
vnode:新的虛擬節(jié)點(diǎn)。
oldVnode:舊的虛擬節(jié)點(diǎn)。
isDestory:判斷是否刪除一個(gè)舊虛擬節(jié)點(diǎn)。
虛擬DOM在渲染時(shí)會(huì)觸發(fā)的所有鉤子函數(shù)及其觸發(fā)機(jī)制如下:
需要注意的是,remove函數(shù)是只有一個(gè)元素從其父元素中移除時(shí)才會(huì)觸發(fā),如果該元素是被移除元素的子元素,則不會(huì)觸發(fā)remove函數(shù)。
二、前端性能優(yōu)化
前端在一個(gè)應(yīng)用中,主要承擔(dān)在用戶打開一個(gè)頁面時(shí),發(fā)送請(qǐng)求到服務(wù)器,接收服務(wù)器返回的頁面進(jìn)行渲染并將渲染結(jié)果呈現(xiàn)給用戶的功能。
要提高前端性能需要從與用戶操作無關(guān)的客戶端和服務(wù)端交互和瀏覽器解析頁面著手,也就是從傳輸和渲染兩方面著手。
1、請(qǐng)求傳輸
1.1請(qǐng)求維度
基于目前前后端傳輸廣泛使用的HTTP 1.1協(xié)議,可以從壓縮請(qǐng)求的大小和減少請(qǐng)求的數(shù)量兩方面著手進(jìn)行優(yōu)化,主要的優(yōu)化手段如下:
1.2協(xié)議維度
從1.0的短連接到1.1的長連接到HTTP2.0、3.0,做出了很多改變,每次協(xié)議的升級(jí)對(duì)前端性能優(yōu)化來講都是一次飛躍。HTTP2.0的新特性如下:
二進(jìn)制分幀:HTTP2.0在應(yīng)用層與傳輸層之間增加一個(gè)二進(jìn)制分幀層,將所有傳輸?shù)男畔⒎指顬楦〉南⒑蛶?并對(duì)它們采用二進(jìn)制格式的編碼,使通信都在一個(gè)可以承載任意數(shù)量的雙向數(shù)據(jù)流的TCP連接上完成。
壓縮頭部:使用HPACK算法,規(guī)定了在客戶端和服務(wù)器端會(huì)使用并且維護(hù)“首部表”來跟蹤和存儲(chǔ)之前發(fā)送的鍵值對(duì),對(duì)于相同的頭部,不必再通過請(qǐng)求發(fā)送,減少了頭部開銷。
多路復(fù)用:客戶端和服務(wù)器可以把HTTP消息分解為互不依賴的幀,然后亂序發(fā)送,最后再在另一端把它們重新組合起來。
請(qǐng)求優(yōu)先級(jí):每個(gè)流都可以帶有一個(gè)31bit的優(yōu)先值:0表示最高優(yōu)先級(jí);2的31次方-1表示最低優(yōu)先級(jí)。
服務(wù)器推送:通過提供push-promise幀來實(shí)現(xiàn)真正意義上的瀏覽器推送,擺脫利用ajax輪詢進(jìn)行偽實(shí)時(shí)的場景。
2、瀏覽器渲染
2.1 瀏覽器單線程解析渲染阻塞
瀏覽器的主要構(gòu)成如下:
它的幾個(gè)常駐線程如下:
由于GUI線程和JS引擎線程互斥,故衍生了一系列避免渲染過程中發(fā)生阻塞的優(yōu)化方法,如樣式文件放頭部,腳本文件放在DOM節(jié)點(diǎn)最末尾;針對(duì)不需要操作DOM的腳本,可以采用動(dòng)態(tài)創(chuàng)建script標(biāo)簽的方式載入;腳本文件加上async或者defer等。
2.2 巨大的DOM開銷
在瀏覽器渲染的過程中,巨大的DOM開銷無疑成為了渲染效率是最大瓶頸。通過如下代碼可以輸出一個(gè)空DOM節(jié)點(diǎn),查看它所包含的300余個(gè)屬性和事件。
let ele = document.createElement("div") let obj = {} for (const prop in ele) { obj[prop]=ele[prop] } console.log(obj)
2.2.1重繪與回流
重繪是指當(dāng)頁面展示元素中的一些元素需要更新屬性,這些屬性只是影響元素的外觀、風(fēng)格,而不會(huì)影響布局的,比如background-color。回流是指當(dāng)頁面展示元素中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸、布局、隱藏等改變而需要重新構(gòu)建。顯然,重繪不一定導(dǎo)致回流,回流必然導(dǎo)致重繪。
它們都會(huì)帶來一定的DOM開銷,需要盡力去避免,常見的避免手段有避免觸發(fā)同步布局事件;對(duì)于復(fù)雜動(dòng)畫效果,使用絕對(duì)定位讓其脫離文檔流;css3硬件加速(transform、opacity、filters、Will-change)等。
2.2.2虛擬DOM
針對(duì)巨大的DOM開銷,除了盡力避免重繪和回流,近幾年還有一種比較流行的,各大框架比如VUE、react都使用的虛擬DOM的方式。
虛擬DOM是一顆以js對(duì)象為基礎(chǔ)的樹,用對(duì)象屬性來描述節(jié)點(diǎn),是對(duì)DOM的抽象,通過一系列操作將其映射到真實(shí)環(huán)境。
用一段代碼來模擬展示一下這個(gè)過程,首先用戶編寫模板如下:
<ul id="myId"> <li v-for="item in list">{{item}}</li> </ul>
編譯后的內(nèi)容如下所示,采用了creatElement語法糖的形式創(chuàng)建節(jié)點(diǎn)。
createElement { "ul", { attr:{ id: "myId" } }, [ createElement("li", 1), createElement("li", 2), createElement("li", 3) ] }
經(jīng)過渲染函數(shù)的執(zhí)行生成虛擬DOM樹,其大致結(jié)構(gòu)如下:
最終將虛擬DOM樹轉(zhuǎn)化為真實(shí)DOM。
虛擬DOM對(duì)性能的DOM開銷的優(yōu)化主要體現(xiàn)在當(dāng)節(jié)點(diǎn)有變化時(shí),它可以通過differ算法比較變化前后的虛擬DOM結(jié)構(gòu)的變化,通過對(duì)節(jié)點(diǎn)屬性的修改做必要的調(diào)整,而不是無腦的銷毀舊節(jié)點(diǎn)創(chuàng)建新節(jié)點(diǎn)。
這個(gè)過程的主要步驟是:用js對(duì)象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu),然后用這個(gè)樹構(gòu)造一個(gè)真正的DOM樹,插入文檔中;當(dāng)狀態(tài)變更時(shí),重新構(gòu)造一棵新樹,與舊樹進(jìn)行對(duì)比,記錄差異;將記錄的差異應(yīng)用到所構(gòu)建的真正的DOM樹上。需要特別注意的是,differ算法遵循同級(jí)比較的原則,在使用的過程中要盡量減少跨層級(jí)的DOM調(diào)整。
到此,關(guān)于“如何理解Vue實(shí)現(xiàn)原理與前端性能優(yōu)化”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。