發(fā)布時間：2021-06-27 07:14

　　隨著時代的發(fā)展,科技的進(jìn)步,互聯(lián)網(wǎng)越來越成為人們生活中不可或缺的一部分。各式各樣的Web應(yīng)用層出不窮,爭奇斗艷,營造了一種良性的競爭氛圍。各家公司都爭相把速度最快,性能最好的產(chǎn)品展示給客戶,都不約而同的將提高Web應(yīng)用的性能和用戶滿意度作為核心競爭力。在此基礎(chǔ)上要想提高用戶的滿意度,需要結(jié)合用戶的反饋對Web應(yīng)用的性能進(jìn)行優(yōu)化。資料顯示當(dāng)頁面的首屏加載時間超過5秒后,大約超過50%的訪問用戶會因等待時間太久而選擇跳出頁面,可見頁面的加載速度會直接影響用戶的去留。并且,若一款Web應(yīng)用沒有良好的易用性,就容易讓用戶在使用過程中產(chǎn)生各種困惑,從而會給用戶體驗帶來負(fù)面影響,降低用戶的使用意愿。本文以優(yōu)化作文瀏覽和賞析系統(tǒng)的性能和提高用戶滿意度為目標(biāo),研究如何在前端職責(zé)范圍內(nèi),提高頁面加載速度和易用性。首先,本文對原作文檢索和賞析系統(tǒng)的設(shè)計和實現(xiàn)做了概要敘述。該系統(tǒng)基于Vue.js框架進(jìn)行開發(fā),主要實現(xiàn)了作文檢索、作文閱讀和作文賞析等功能。方便用戶在廣泛的作文素材中快速地查找到目標(biāo)內(nèi)容,并且有利于用戶在閱讀作文的過程中將自己獨到的見解記錄并保存下來,以便復(fù)習(xí)查看,進(jìn)而利于用戶提高寫作能力。然后... 

【文章來源】：華中師范大學(xué)湖北省 211工程院校 教育部直屬院校

【文章頁數(shù)】：77 頁

【學(xué)位級別】：碩士

【部分圖文】：

圖２．１利用Ｎｏｄｅ中間層進(jìn)行服務(wù)端渲染??由圖２．１可知本文利用Ｎｏｄｅ作為中間層，Ｎｏｄｅ中間層收到客戶端發(fā)來的ＨＴＭＬ??

＾?、碩士學(xué)位論之??ＭＡＳ?Ｉ?！?Ｒ＇Ｓ?ｒｎｉ．ｓｉｓ??將Ｄａｔａ?Ｂｉｎｇｉｎｇｓ和ＤＯＭ?Ｌｉｓｔｅｎｅｒｓ這兩個監(jiān)聽器綁定了起來。當(dāng)Ｖｉｅｗ層的視圖發(fā)生??變化時，Ｖｕｅ將會通過ＤＯＭ?Ｌｉｓｔｅｎｅｒｓ來監(jiān)聽并改變Ｍｏｄｅｌ層的數(shù)據(jù)。反之，當(dāng)Ｍｏｄｅｌ??層的數(shù)據(jù)發(fā)生改變時，Ｖｕｅ也將會通過Ｄａｔａ?Ｂｉｎｇｉｎｇｓ來監(jiān)聽并改變Ｖｉｅｗ層的展示。??這樣便實現(xiàn)了一個雙向數(shù)據(jù)綁定的功能，也是Ｖｕｅ．ｊｓ數(shù)據(jù)驅(qū)動的原理所在，具體的??Ｖｕｅ數(shù)據(jù)驅(qū)動的概念模型如圖２．２所示。??／?ＶｉｅｗＭｏｄｅｌ?／???—ＤＯ．Ｍ?Ｌｉｓｔｅｎｅｒｓ?—?？??Ｖｉｅｗ?：?．二、?——＾??７?？?Ｄａｔａ?Ｂｉｎｇｉｎｇｓ?Ｖ＾＾Ｍｏｄｅｌ＾＾／??．?１?１??ＤＯＭ?Ｖｕｅ?Ｐｌａｉｎ?ＪａｖａＳｃｒｉｐｔ?Ｏｂｊｅｃｔｓ??圖２．２?Ｖｕｅ數(shù)據(jù)驅(qū)動的概念模型??結(jié)合Ｖｕｅ．ｊｓ的特性和作文檢索和賞析項目特點，本文將Ｖｕｅ．ｊｓ作為前端開發(fā)框??架，利用Ｖｕｅ．ｊｓ技術(shù)解決前端數(shù)據(jù)綁定問題，極大地簡化了?Ｗｅｂ前端開發(fā)流程并使??開發(fā)難度降低；配套使用Ｅｌｅｍｅｎｔ作為ＵＩ組件庫，統(tǒng)一了前端開發(fā)的樣式，使呈現(xiàn)??出來的前端界面更加美觀、舒適。??２．４?Ｗｅｂｐａｃｋ??Ｗｅｂｐａｃｋ通常被稱為前端各種資源的打包和加載工具［２２］。Ｗｅｂｐａｃｋ也可以被叫??做模塊打包器，其具體功能是將項目的結(jié)構(gòu)進(jìn)行分析，以便于將ＪａｖａＳｃｒｉｐｔ代碼模塊??找到，并將一些其它的拓展性語言找到，如Ｓｃｓｓ，接著把以上資源打包成合適的形??式提供給瀏覽器來使用。本作文檢索和賞析項目中Ｗｅｂｐａ

建、配置、??開發(fā)和部署工作大大簡化［２５］。其中，內(nèi)嵌的Ｔｏｍａｃｔ容器使得單一?ＪＡＲ包的部署和管??理都變得非常方便，還可利用其來監(jiān)控項目，提高了監(jiān)控的效率［２６］；配套使用非關(guān)??系型數(shù)據(jù)庫ＭｏｎｇｏＤＢ來對數(shù)據(jù)進(jìn)行存儲和操作，確保數(shù)據(jù)的安全性和可靠性并且保??證自動故障恢復(fù)［２７］；還利用Ｅｌａｓｔｉｃ?Ｓｅａｒｃｈ實現(xiàn)全文搜索和結(jié)構(gòu)化搜索１２８］，使得本項??目的搜索具有近實時、高性能、分布式和零配置的優(yōu)點，使搜索的效率得到有效提??升。本作文檢索和賞析系統(tǒng)的技術(shù)架構(gòu)圖如圖３．１所示。??？Ｒ＊項Ｈ的技犬槳構(gòu)設(shè)汁??醒灘一一＾ｓｐｉｎａＢｏｏｔ??—??；?（?？——一一?＾??！?ＨＴＭＬ．?ｊ?嚷祕你里啦有??Ａ??ｉ?存＇ｒ??讓?／?１?；??＼?Ｊ?／??ｉ?Ｓ?＾?一＾、?１?Ｊ?ｘｅｄｉｓＭ??Ｍ?＼?！??綏存運??：錄?＼?Ｉ?Ｊ?ｓｐｒｉｒａｊ＾Ｗ?＾?ｃｃｉｎｔｒｏ＾??．??一＿?Ｃ?￣￣＾?賽函鈐?＞?知＊?仁?ＭｏｎｓｒｏＤＢ??＞?ｍｙｒｎ？＼＾ｍ?－４１—?ｍ?蠆接懸??Ｉ?．?核學(xué)玄?ｊ?ｒ?ｉ??一?—?１?Ｊ?：｜?一??；??￣￣￣?—??圖３．１作文檢索和鬩讀系統(tǒng)技術(shù)架構(gòu)圖??原作文檢索和賞析系統(tǒng)整體的系統(tǒng)架構(gòu)由用戶層、前端頁面層、數(shù)據(jù)庫層和業(yè)??務(wù)邏輯層這四層組成。??用戶層：用戶訪問瀏覽器上展示出來的界面，可以和系統(tǒng)中的數(shù)據(jù)進(jìn)行交互。??前端頁面層：將本系統(tǒng)前端頁面的程序打包后放在服務(wù)器上運行。服務(wù)器能在??同一時間段內(nèi)將消息發(fā)送給不同的用戶，通過這種方式實現(xiàn)了用戶和的前端頁

【參考文獻(xiàn)】：
期刊論文
[1]手機界面視覺設(shè)計易用性發(fā)展趨勢[J]. 葉琪.  設(shè)計. 2020(05)
[2]基于SpringBoot和Vue框架的教代會提案系統(tǒng)的設(shè)計與實現(xiàn)[J]. 顏治平.  科技創(chuàng)新與應(yīng)用. 2020(03)
[3]vue.js前端應(yīng)用技術(shù)分析[J]. 李廣宏.  中國新通信. 2019(20)
[4]一種大規(guī)模MongoDB集群監(jiān)控方案的設(shè)計與實現(xiàn)[J]. 李云婷,張海明,黎建輝.  科研信息化技術(shù)與應(yīng)用. 2019(04)
[5]黑盒測試在環(huán)境質(zhì)量監(jiān)測系統(tǒng)測試中的應(yīng)用[J]. 宋麗.  電子技術(shù)與軟件工程. 2019(12)
[6]基于Vue.js的移動應(yīng)用可視化平臺的研究[J]. 馮傳波,彭章友,張鐘浩.  工業(yè)控制計算機. 2019(05)
[7]基于Node.js和JS的前后端分離實現(xiàn)[J]. 張鵬飛,王乾,胡曉冬,楊明浩,崔明旺.  軟件. 2019(04)
[8]高并發(fā)Web應(yīng)用系統(tǒng)的性能優(yōu)化分析與研究[J]. 王偉,譚松榮.  現(xiàn)代信息科技. 2019(03)
[9]2018中國產(chǎn)業(yè)互聯(lián)網(wǎng)發(fā)展白皮書[J]. 顧文彬,劉浩然.  互聯(lián)網(wǎng)經(jīng)濟(jì). 2019(Z1)
[10]基于Nodejs實現(xiàn)web端實時在線監(jiān)測[J]. 韓利峰,李嘉曾,黃文博,吳麗梅.  儀器儀表用戶. 2018(10)

碩士論文
[1]基于Diff算法的Web前端性能優(yōu)化及評估[D]. 曹帥.北京郵電大學(xué) 2019
[2]基于攜程旅行APP特賣匯項目的前端優(yōu)化設(shè)計與實現(xiàn)[D]. 郭慧敏.華中科技大學(xué) 2018
[3]基于美團(tuán)點評拼團(tuán)項目的前端優(yōu)化實踐[D]. 冀乃彬.南京大學(xué) 2018
[4]基于Bigpipe與Node.js的Web框架的設(shè)計與實現(xiàn)[D]. 劉燦.北京郵電大學(xué) 2018
[5]基于MVVM模式的響應(yīng)式輕量級前端組件設(shè)計與實現(xiàn)[D]. 彭顯雯.華中科技大學(xué) 2017



本文編號：3252390