| 失效鏈接處理 |
|
Vue.js在前端開(kāi)發(fā)應(yīng)用中的性能影響研究 PDF 下載
本站整理下載：
提取碼：o6hj
相關(guān)截圖：
主要內(nèi)容：
1 研究背景及意義
因?yàn)榛ヂ?lián)網(wǎng)技術(shù)的日新月異，出現(xiàn)了很多新的語(yǔ)言、框
架和新的工具，讓想要學(xué)習(xí)軟件開(kāi)發(fā)的人，或者是正在開(kāi)發(fā)
項(xiàng)目的開(kāi)發(fā)者無(wú)法在眾多的模型和框架里面選擇出最適合
自己的一種。也因?yàn)樾畔⒓夹g(shù)的不斷更新發(fā)展，軟件開(kāi)發(fā)逐
漸變得多樣化，因此需要對(duì)項(xiàng)目的框架搭建與邏輯結(jié)構(gòu)相當(dāng)
清晰，才能夠?qū)懗鰞?yōu)質(zhì)的軟件。在傳統(tǒng)的軟件開(kāi)發(fā)項(xiàng)目中，
前后端代碼混雜，前端與后臺(tái)的開(kāi)發(fā)沒(méi)有明確的分界線，所
以開(kāi)發(fā)人員不僅要掌握后端開(kāi)發(fā)技術(shù)的同時(shí)也要熟練前端
開(kāi)發(fā)原理，這就導(dǎo)致術(shù)業(yè)無(wú)法專攻，使得開(kāi)發(fā)人員的任務(wù)繁
重會(huì)影響軟件的整體質(zhì)量，也加大了后期測(cè)試與軟件維護(hù)的
工作強(qiáng)度。所以現(xiàn)在的開(kāi)發(fā)人員普遍希望前端與后臺(tái)的開(kāi)發(fā)
能夠分開(kāi)，使得軟件開(kāi)發(fā)更加的結(jié)構(gòu)化。
于是為了提高用戶體驗(yàn)率以及開(kāi)發(fā)人員的工作效率，陸
續(xù)涌現(xiàn)了多種前端架構(gòu)，例如 MVC、MVVM 等，通過(guò)將程
序模塊化來(lái)降低前后端的耦合度。引用架構(gòu)使得開(kāi)發(fā)人員只
需要專門(mén)負(fù)責(zé)其中一方面的開(kāi)發(fā)，提高自身技術(shù)的同時(shí)也可
以提高軟件的整體質(zhì)量。其中 MVVM 相較于 MVC 有低耦合、
獨(dú)立開(kāi)發(fā)、可重用、可測(cè)試等優(yōu)勢(shì)。而本文的目的主要介紹
基于 MVVM 模式的 Vuejs 框架在虛擬 DOM、雙向數(shù)據(jù)綁定、
組件開(kāi)發(fā)方面的性能優(yōu)勢(shì)，以及相對(duì)于當(dāng)下流行的前端框架
所特有的優(yōu)勢(shì)，提供給開(kāi)發(fā)人員選擇 Vue 框架有力參考依據(jù)。
2 Vue.js 技術(shù)的概述
Vue.js 作為前端開(kāi)發(fā)的漸進(jìn)式框架，嚴(yán)格遵循 CMD 標(biāo)
準(zhǔn)。同時(shí)提供了 MVVM 前端架構(gòu)模式和 Vue 全家桶用于系
統(tǒng)的前端開(kāi)發(fā)。不同于其他的前端開(kāi)發(fā)框架，Vue 是能夠從
底層組件到上層框架分層次應(yīng)用，充分體現(xiàn)了 Vue 的漸進(jìn)
式原理，Vue 的優(yōu)勢(shì)主要在于運(yùn)行速度快、將視圖、數(shù)據(jù)、
結(jié)構(gòu)分離并且作為一個(gè)輕量型的框架，使得開(kāi)發(fā)人員更易學(xué)
習(xí)與理解。
目前 Vue.js 在國(guó)內(nèi)外都收獲了很大的關(guān)注，尤其在國(guó)
內(nèi)受到很多開(kāi)發(fā)者的青睞。因?yàn)?Vue 是針對(duì)于前端開(kāi)發(fā)的
框架，降低前后端代碼的耦合度，前端人員只需要擔(dān)任界面
開(kāi)發(fā)的任務(wù)，后臺(tái)負(fù)責(zé)前端響應(yīng)的數(shù)據(jù)處理。兩者除了在
數(shù)據(jù)接口上有不可避免交集，其他部分的代碼完全沒(méi)有聯(lián)
系?，F(xiàn)在前端開(kāi)發(fā)普遍用超文本標(biāo)記語(yǔ)言（HTML）進(jìn)行
界面設(shè)計(jì)，HTML 可以很便捷的引用 Vue 配合組成 UI 界面，
Vue 的組件化開(kāi)發(fā)也使得界面的結(jié)構(gòu)更加清晰、分工細(xì)致且
明確。
3 Vue 在前端開(kāi)發(fā)中的應(yīng)用及其性能分析
■ 3.1 虛擬 DOM
DOM 是文檔對(duì)象模型的簡(jiǎn)稱，可以訪問(wèn)和修改一個(gè)
文檔的內(nèi)容和結(jié)構(gòu)。虛擬 DOM 實(shí)際上是一個(gè)虛擬構(gòu)建的
DOM 樹(shù)模型，主要區(qū)別于實(shí)際存在于界面的 DOM 樹(shù)結(jié)構(gòu)。
我們以往使用的 DOM 都是實(shí)際存在于頁(yè)面的，通過(guò) API 和
jQuery 對(duì) DOM 進(jìn)行操作時(shí)，瀏覽器會(huì)將 DOM 樹(shù)上所有的
節(jié)點(diǎn)逐層執(zhí)行一遍。盡管現(xiàn)在的硬件設(shè)備在不斷地更新迭
代，要對(duì)一個(gè)實(shí)際存在的 DOM 節(jié)點(diǎn)進(jìn)行頻繁的操作，成本
依舊非常的昂貴，并且頁(yè)面性能下降，用戶得不到好的體驗(yàn)
效果。虛擬 DOM 在很大程度上解決了瀏覽器性能的問(wèn)題，
其核心算法是 Diff 算法。Diff 算法的原理就是在一次操作過(guò)
程中，對(duì)真實(shí)的 DOM 樹(shù)上所有節(jié)點(diǎn)數(shù)據(jù)進(jìn)行分析，將其中
有改變的數(shù)據(jù)信息匯聚在一個(gè) js 文件里面。然后實(shí)施這個(gè)
本地的 js 文件，使得原來(lái)的 DOM 樹(shù)的節(jié)點(diǎn)屬性被更改，從
而通知瀏覽器執(zhí)行界面重新繪制工作。對(duì)改變前的 DOM 樹(shù)
與改變后的 DOM 樹(shù)進(jìn)行 Diff 算法分析，找到兩棵樹(shù)的最少
轉(zhuǎn)換步驟，減少了大量的無(wú)效計(jì)算。這一過(guò)程中使用的 js
文件是存在于操作內(nèi)存的文件，速度明顯快很多，很大程度
上提高了性能。
■ 3.2 雙向數(shù)據(jù)綁定
前端開(kāi)發(fā)通常用于 MV * 的開(kāi)發(fā)模式，其中 M (model)
指的是模型，也指的數(shù)據(jù)，V(view) 指的是界面視圖。目
Vue.js 在前端開(kāi)發(fā)應(yīng)用中的性能影響研究
唐斌斌，葉奕
（南華大學(xué)，湖南衡陽(yáng)，421000）
摘要：由于信息技術(shù)的不斷更新迭代，人們漸漸的接觸到各式各樣的應(yīng)用軟件、小程序和網(wǎng)頁(yè)等互聯(lián)網(wǎng)應(yīng)用。這使得用戶對(duì)前端的使用要
求也逐漸提高，往往使得技術(shù)人員的工作量增加，開(kāi)發(fā)難度也上升。因此出現(xiàn)了很多的開(kāi)發(fā)模式與工具，使得開(kāi)發(fā)人員無(wú)法選擇最合適的
模式和最優(yōu)的框架。本文將研究當(dāng)下流行的基于MVVM模式的Vue.js在前端開(kāi)發(fā)中的性能優(yōu)勢(shì)，其優(yōu)勢(shì)體現(xiàn)在虛擬DOM在時(shí)間方面的性能
優(yōu)勢(shì)，雙向數(shù)據(jù)綁定提高渲染效率以達(dá)到更優(yōu)的用戶體驗(yàn)效果，使用組件化的開(kāi)發(fā)使得代碼可以反復(fù)利用，減少了開(kāi)發(fā)人員的工作量。論
文首先介紹了Vue技術(shù)原理及其顯著特點(diǎn)，接著具體分析每一項(xiàng)特有技術(shù)的性能特點(diǎn)，最后通過(guò)各方面的性能總結(jié)，得出此框架相較于當(dāng)
下其他流行的前端框架的突出優(yōu)勢(shì)。
關(guān)鍵詞：Vue.js 框架； MVVM模式；前端；互聯(lián)網(wǎng)
DOI:10.16589/j.cnki.cn11-3571/tn.2020.10.020
軟件開(kāi)發(fā)
50 | 電子制作 2020 年 05 月
前幾個(gè)流行的前端 MVC 框架已經(jīng)實(shí)現(xiàn)了單向數(shù)據(jù)綁定，而
Vue.js 是根據(jù) MVVM 啟發(fā)而創(chuàng)建的一個(gè)框架。MVVM 是一
種前端開(kāi)發(fā)的架構(gòu)模式，其核心問(wèn)題就是提供了對(duì) View 和
Model 的雙向數(shù)據(jù)的綁定。單向數(shù)據(jù)綁定只能以單方向從
Model 流動(dòng)到 View，而雙向數(shù)據(jù)綁定是將 Model 與 View
之間通過(guò) ViewMode 關(guān)聯(lián)，ViewModel 負(fù)責(zé)對(duì) view 進(jìn)行
數(shù)據(jù)綁定并更改模型數(shù)據(jù)，再通知 view 對(duì)瀏覽器進(jìn)行繪制。
其模型如圖 1 所示。
圖 1
雙向數(shù)據(jù)綁定是由數(shù)據(jù)劫持與發(fā)布 - 訂閱者的設(shè)計(jì)教學(xué)
模式來(lái)具體實(shí)現(xiàn)的，首先劫持?jǐn)?shù)據(jù)，也就是通過(guò)對(duì)象屬性
的獲取函數(shù)來(lái)劫持對(duì)象屬性的 setter 與 getter 的操作，通
過(guò) getter 獲取依賴屬性，setter 作為觀察者通知 view 繪制
界面。發(fā)布 - 訂閱者設(shè)計(jì)模式通常適用于消息隊(duì)列中，首先
是使用生產(chǎn)者消費(fèi)者來(lái)實(shí)現(xiàn)，其次是用戶和出版商模型來(lái)實(shí)
現(xiàn)。訂閱者的需要注冊(cè)到發(fā)布者中，發(fā)布者接收到注冊(cè)來(lái)發(fā)
布消息，會(huì)依次向各個(gè)訂閱者發(fā)布。也就是視圖的改變通過(guò)
數(shù)據(jù)綁定改變模型數(shù)據(jù)，觸發(fā)相應(yīng)的數(shù)據(jù)監(jiān)聽(tīng)器，通知訂閱
者對(duì)視圖進(jìn)行更新操作。即可完成 View 與 Model 的雙向
的數(shù)據(jù)綁定。雙向數(shù)據(jù)綁定是數(shù)據(jù)是獨(dú)立觸發(fā)的，在瀏覽
器渲染過(guò)程中節(jié)省了很多不必要的數(shù)據(jù)修改，提高系統(tǒng)工
作效率。
■ 3.3 組件化開(kāi)發(fā)
Vue.js 拓展使用 HTML 語(yǔ)言，封裝可重復(fù)使用的代碼，
形成組件 , 即模板代碼。先將單個(gè)頁(yè)面進(jìn)行宏觀布局，在上
層組件中寫(xiě)好標(biāo)簽，為組件提供容器，同時(shí)在標(biāo)簽屬性里面
為要引用的模板傳遞參數(shù)，在引用模板傳參的過(guò)程是就類似
于函數(shù)傳參的過(guò)程，再將多個(gè)組件匯聚在同一界面上面，完
成對(duì)于整個(gè)前端界面設(shè)計(jì)。組件化開(kāi)發(fā)有利于提高代碼的復(fù)
用率，在開(kāi)發(fā)寫(xiě)作中形成一套固有組件格式便于協(xié)同開(kāi)發(fā)，
簡(jiǎn)化了調(diào)試的步驟并且提高了軟件的可維護(hù)性。
■ 3.4 性能優(yōu)勢(shì)總結(jié)
瀏覽器渲繪制需要加載頁(yè)面中的所有的資源，包括
HTML、CSS、JavaScript、圖片和其他資源。工作流程將
解析 HTML 來(lái)構(gòu)建 DOM 樹(shù)，解析 CSS 來(lái)生成 CSS 規(guī)則樹(shù)，
然后將 DOM 樹(shù)與 CSS 規(guī)則樹(shù)合并生成渲染樹(shù) , 來(lái)完成頁(yè)面
的布局。但因?yàn)?Vue 的響應(yīng)式系統(tǒng)與虛擬的 DOM 系統(tǒng)，
Vue 在渲染組件的過(guò)程中能夠自動(dòng)追蹤數(shù)據(jù)的依賴，并精
確的知曉需要更新數(shù)據(jù)的具體組件，渲染之后的組件由虛
擬 DOM 的 Diff 算法取得最少的轉(zhuǎn)換步驟，更新最開(kāi)始的
DOM 樹(shù)，在這個(gè)過(guò)程中，Vue 減少了很多傳統(tǒng)開(kāi)發(fā)中不必
要的計(jì)算與數(shù)據(jù)更新。Vue 使用 Diff 算法的目標(biāo)是用盡可
能通過(guò)簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)進(jìn)行綁定，使用組件技術(shù)
開(kāi)發(fā)以實(shí)現(xiàn)復(fù)合視圖組件。
4 與同類技術(shù)比較
Angular.js，React.js 與 Vue 是當(dāng)前三大主流前端框架。
Vue 相較于 Angular，兩者的相同點(diǎn)是都支持內(nèi)置的過(guò)
濾器自定義過(guò)濾器，以及內(nèi)置指令和自定義指令，支持雙
向數(shù)據(jù)綁定提高系統(tǒng)響應(yīng)能力。兩者的不同點(diǎn)在于 Angular
對(duì)于初學(xué)者或者普通開(kāi)發(fā)人員而言學(xué)習(xí)成本高，而 Vue 有
簡(jiǎn)明的文檔容易學(xué)習(xí)與理解。在性能上雖然兩者都實(shí)現(xiàn)了雙
向數(shù)據(jù)綁定，但是 Angular 依賴于對(duì)數(shù)據(jù)進(jìn)行臟檢查，所
以創(chuàng)建的 Watcher 越多，頁(yè)面反應(yīng)速度越慢，用戶體驗(yàn)率
下降。Vue.js 使用異步隊(duì)列更新依賴基于跟蹤和觀察。數(shù)據(jù)
的觸發(fā)只針對(duì)于那些有修改的數(shù)據(jù)信息。因此，在開(kāi)發(fā)大型
應(yīng)用系統(tǒng)的時(shí)候，在數(shù)據(jù)綁定對(duì)性能的影響差異還是比較顯
著的。
Vue 相較于 React，兩者的相同點(diǎn)是兩者都有自己的全
家桶，即生態(tài)圈，其中包含了開(kāi)發(fā)相對(duì)大型軟件必須使用的
插件和框架。兩者的都實(shí)現(xiàn)了組件化的開(kāi)發(fā)，一切界面開(kāi)
發(fā)依賴于模板，都使用了虛擬 DOM 對(duì)瀏覽器進(jìn)行渲染。但
兩者最大的不同也在于虛擬 DOM 的使用。React 依賴于虛
擬 DOM，而 Vue 只是使用了 DOM 模板。React 使用虛擬
DOM 需要將呈現(xiàn)的結(jié)果做臟檢查。在渲染過(guò)程中 Vue 可以
精確知道數(shù)據(jù)的變化，而 React 是通過(guò)比較各個(gè)組件來(lái)判
斷其數(shù)據(jù)信息是否變化，過(guò)程中會(huì)引起許多不必要的 DOM
渲染，降低系統(tǒng)性能。
Vue 的優(yōu)勢(shì)體現(xiàn)在其文檔簡(jiǎn)潔更易上手，具有靈活的、
簡(jiǎn)單的接口，在與其他的庫(kù)、工具或者框架結(jié)合使用時(shí)不會(huì)
顯得臃腫。 該框架不但兼顧雙向數(shù)據(jù)綁定技術(shù)和虛擬 DOM
技術(shù)，還在此基礎(chǔ)上實(shí)現(xiàn)了組合開(kāi)發(fā)，是一個(gè)款功能性很強(qiáng)
的輕量型前端框架
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
蘇公網(wǎng)安備 32061202001004號(hào)
