發(fā)布時間：2020-08-22 12:34

【摘要】：近些年隨著互聯(lián)網(wǎng)尤其是移動互聯(lián)網(wǎng)的不斷發(fā)展,Web應(yīng)用的需求和復(fù)雜度不斷增加,Web前端代碼體積越來越龐大。為解決前端開發(fā)過程中出現(xiàn)的代碼可重用性不高、擴展性差、維護管理困難、項目構(gòu)建低效等問題,涌現(xiàn)出一批優(yōu)秀的前端框架。然而,在移動網(wǎng)絡(luò)中,網(wǎng)絡(luò)環(huán)境相對較差,體積龐大的前端框架本身可能造成網(wǎng)絡(luò)瓶頸,而頻繁的DOM操作也使頁面刷新效率成為前端性能主要制約因素之一,Web應(yīng)用開發(fā)對能解決以上問題并合理縮減自身體積提高加載效率以適應(yīng)低速網(wǎng)絡(luò)環(huán)境的輕型前端框架的需求越來越迫切。本文采用MVVM架構(gòu),實現(xiàn)了以虛擬DOM為核心的輕型前端框架Luna。具體研究內(nèi)容如下:首先,對該前端框架進行業(yè)務(wù)需求分析,確定框架的總體架構(gòu),確定該框架MVVM主要功能模塊,并分別對Luna前端框架各模塊進行了詳細的功能分析以及對該框架的性能優(yōu)化和框架代碼構(gòu)建需求進行了詳細分析,確定了性能測試的相關(guān)指標。其次,基于MVVM架構(gòu)對該前端框架進行了設(shè)計與實現(xiàn)。前端框架Luna由種子模塊、模型數(shù)據(jù)模塊、視圖模塊和視圖模型模塊四個基本模塊組成,本文對各個模塊分別進行了詳細設(shè)計和代碼實現(xiàn)。種子模塊提供了框架必要的環(huán)境準備和通用功能函數(shù),并針對JavaScript語言特性做了必要補充,實現(xiàn)了組件化設(shè)計和前端路由等前端框架必要功能,并為該框架提供了入口。模型數(shù)據(jù)模塊以數(shù)據(jù)對象為核心,實現(xiàn)了前端數(shù)據(jù)的存儲、讀取、監(jiān)聽、更新和與服務(wù)端交互等相關(guān)功能。視圖模塊以虛擬DOM為核心,通過JavaScript對象模擬DOM樹結(jié)構(gòu),并比較視圖改動前后虛擬DOM差異來減少DOM操作,提高了頁面的渲染性能和加載效率。視圖模型模塊將模型數(shù)據(jù)和視圖模塊進行自動關(guān)聯(lián)和雙向綁定,使開發(fā)者無需手動維護視圖更新,實現(xiàn)了視圖與數(shù)據(jù)的解耦,使數(shù)據(jù)更改可以同時更新所有關(guān)聯(lián)的元素節(jié)點和組件。接著利用緩存機制減少HTTP請求次數(shù),并通過對框架代碼合理壓縮與合并,減少了框架文件的網(wǎng)絡(luò)負載,進而提高了頁面的加載速度。最后,對本文實現(xiàn)的Luna前端框架各功能模塊的主要功能做詳細測試,通過構(gòu)建Web應(yīng)用和模擬移動網(wǎng)絡(luò)環(huán)境測試其關(guān)鍵性能指標,并與業(yè)界流行的React和Angular框架進行性能測試對比,同時對測試結(jié)果進行分析。本文實現(xiàn)的前端框架Luna所采用的MVVM架構(gòu)有效地解決了前端代碼組織混亂、可維護性差等問題,采用優(yōu)化的虛擬DOM技術(shù)提高了頁面加載和刷新效率,利用壓縮緩存技術(shù)縮減了代碼體積,并使用合理的構(gòu)建方式使提升了應(yīng)用開發(fā)者的開發(fā)效率。該框架有效地提高了在特殊網(wǎng)絡(luò)環(huán)境下的前端性能,基于該框架的Web應(yīng)用頁面加載速度在較差網(wǎng)絡(luò)環(huán)境中相比于主流前端框架得到了較大提高,為前端框架的設(shè)計與研發(fā)提出了新的解決方案。
【學(xué)位授予單位】：西安電子科技大學(xué)
【學(xué)位級別】：碩士
【學(xué)位授予年份】：2019
【分類號】：TP393.09
【圖文】：

頻繁地發(fā)送 HTTP 請求這些資源會嚴重影響頁面初始化速度，帶來較差的用戶體驗。圖3.5 移動 Web 應(yīng)用頁面加載文件示例為了加快此類文件的加載，可以將相同文件類型的文件進行合并，如將多個JavaScript 框架類庫的文件按照依賴關(guān)系合并為一個文件，將所需的圖標文件默認使用精靈圖合并為一個圖片文件，在移動應(yīng)用中可以將所有圖標放到一個 SVG 文件中。此外，由于 JavaScript、CSS 等在瀏覽器解析過程中沒有格式要求，因此可以對文件進行壓縮處理以節(jié)省網(wǎng)絡(luò)帶寬。JavaScript 壓縮指的是把 JavaScript 文件中所有與運行無關(guān)的部分進行剝離的過程，剝離的內(nèi)容包括注釋和不必要的空白符號，再使用將局部變量名縮短、將方括號表示法替換為點表示法、合并常量等方式進行進一步壓縮，最后使用 Gzip 對文件進行壓縮處理。CSS 壓縮則更為簡單

內(nèi)部使用 MVVM 模式構(gòu)建，包含 data 對象與模板字符串對應(yīng)的虛擬 DOM 樹，其內(nèi)部 MVVM 整體架構(gòu)如圖 4.3 所示。圖4.3 組件內(nèi)部 MVVM 架構(gòu)從圖 4.3 可以看出，每個包含數(shù)據(jù)的動態(tài)組件只有一個數(shù)據(jù)對象，但由于數(shù)據(jù)屬性可以是 Object 類型，因此可能包含有多個 watcherList。此外，每個模板指令和標

經(jīng)過 patch 操作后，圖 4.7 中所示的抽象語法樹示例將會被渲染成為圖 4.8 所示的 DOM 節(jié)點。圖4.8 由抽象語法樹渲染出的 DOM 節(jié)點示例從圖 4.8 可以看出，type 為 text 的虛擬節(jié)點會直接被渲染為 HTML 的 textNode，除此之外還會做一些其他處理，比如會將駝峰屬性名轉(zhuǎn)化成 HTML 支持的連字符形式的屬性名。View 視圖模塊與 ViewModel 視圖模型模塊及 Model 模型數(shù)據(jù)模塊的交互主要通過 Template 動態(tài)模板類的_watch 和_update 兩個方法建立聯(lián)系的，而對內(nèi)則調(diào)用了虛擬 DOM 更新視圖，因此 Template 動態(tài)模板類起到了承上啟下的作用。4.2.3 虛擬 DOM 的設(shè)計實現(xiàn)通過Template動態(tài)模板類可以實現(xiàn)視圖與數(shù)據(jù)之間的聯(lián)動，當數(shù)據(jù)發(fā)生變化時，

【相似文獻】

相關(guān)期刊論文 前10條

1 孫正峰;閔西英;李西順;;汽車全塑前端框架拓撲優(yōu)化研究[J];汽車零部件;2017年08期

2 孫玉紅;胡遠航;齊賀;牟雪雷;;汽車前端框架力學(xué)性能分析及優(yōu)化設(shè)計[J];汽車零部件;2016年03期

3 李翠萍;孫玉紅;牟雪雷;胡遠航;宋廣晶;吳亮發(fā);;汽車前端框架上梁拓撲優(yōu)化設(shè)計[J];汽車工程師;2015年09期

4 蔡章恒;牟雪雷;楊晶晶;;全塑前端框架有限元分析[J];汽車零部件;2016年12期

5 陳濤;;塑料前端框架與車身安裝方式的研究[J];內(nèi)燃機與配件;2019年20期

6 于淑云;;高�？膳渲镁W(wǎng)站集群前端框架設(shè)計[J];長春工業(yè)大學(xué)學(xué)報;2015年05期

7 宋劉洋;劉小杰;吳方武;王鎮(zhèn)斌;許鈺龍;;某SUV車型塑料前端框架的研究[J];汽車零部件;2019年05期

8 周銀萍;王跟成;;MiniUI前端框架研究[J];福建電腦;2015年07期

9 胡遠航;孫玉紅;楊廣鋒;刁芳芳;周震;陳浩;;前端框架Moldflow分析及優(yōu)化[J];汽車零部件;2016年05期

10 嚴春燕;戴仕明;;基于框架的web前端(Bootstrap和MUI)之比較[J];網(wǎng)絡(luò)安全技術(shù)與應(yīng)用;2017年04期

相關(guān)會議論文 前3條

1 高翔;李波;周佳;李陽;高聰;;汽車前端框架以塑代鋼輕量化開發(fā)[A];2019中國汽車工程學(xué)會年會論文集（2）[C];2019年

2 張雷;鄒素平;朱德霞;;鎂合金前端框架設(shè)計[A];2019中國汽車工程學(xué)會年會論文集（2）[C];2019年

3 孫正峰;李西順;;汽車全塑前端框架拓撲優(yōu)化研究[A];2017Altair技術(shù)大會論文集[C];2017年

相關(guān)重要報紙文章 前1條

1 胡小建;華中銅業(yè)5月份實現(xiàn)“五項突破”[N];中國有色金屬報;2017年

相關(guān)碩士學(xué)位論文 前10條

1 顧睿;基于MVVM的虛擬DOM輕型Web前端框架的設(shè)計與實現(xiàn)[D];西安電子科技大學(xué);2019年

2 林偉強;實時跨平臺桌面證券交易系統(tǒng)前端框架的設(shè)計與實現(xiàn)[D];深圳大學(xué);2018年

3 張佳佳;基于Web App服務(wù)平臺的移動搜索的應(yīng)用研究[D];河北工業(yè)大學(xué);2016年

4 劉志飛;基于模型驅(qū)動的前端框架MBB設(shè)計與實現(xiàn)[D];華中科技大學(xué);2018年

5 于晶晶;基于MVVM的前端框架MTCG的設(shè)計與實現(xiàn)[D];天津大學(xué);2017年

6 許珊;針對百度品牌專區(qū)業(yè)務(wù)的前端框架的設(shè)計與實現(xiàn)[D];南京大學(xué);2017年

7 胡智超;騰訊Q~+應(yīng)用商店前端框架設(shè)計與實現(xiàn)及性能優(yōu)化[D];哈爾濱工業(yè)大學(xué);2013年

8 王光輝;基于iOS平臺的客戶端框架設(shè)計與實現(xiàn)[D];中國地質(zhì)大學(xué)(北京);2016年

9 鄭杰;AngularJS前端框架與后端代碼自動生成系統(tǒng)的設(shè)計與實現(xiàn)[D];西南交通大學(xué);2016年

10 羅銳;基于AJAX的組件式WebGIS客戶端框架的研究與實現(xiàn)[D];華北電力大學(xué)（北京）;2008年

本文編號：2800692