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

　　隨著時(shí)代的發(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)頁面的首屏加載時(shí)間超過5秒后,大約超過50%的訪問用戶會因等待時(shí)間太久而選擇跳出頁面,可見頁面的加載速度會直接影響用戶的去留。并且,若一款Web應(yīng)用沒有良好的易用性,就容易讓用戶在使用過程中產(chǎn)生各種困惑,從而會給用戶體驗(yàn)帶來負(fù)面影響,降低用戶的使用意愿。本文以優(yōu)化作文瀏覽和賞析系統(tǒng)的性能和提高用戶滿意度為目標(biāo),研究如何在前端職責(zé)范圍內(nèi),提高頁面加載速度和易用性。首先,本文對原作文檢索和賞析系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)做了概要敘述。該系統(tǒng)基于Vue.js框架進(jìn)行開發(fā),主要實(shí)現(xiàn)了作文檢索、作文閱讀和作文賞析等功能。方便用戶在廣泛的作文素材中快速地查找到目標(biāo)內(nèi)容,并且有利于用戶在閱讀作文的過程中將自己獨(dú)到的見解記錄并保存下來,以便復(fù)習(xí)查看,進(jìn)而利于用戶提高寫作能力。然后... 

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

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

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

【部分圖文】：

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

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

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

【參考文獻(xiàn)】：
期刊論文
[1]手機(jī)界面視覺設(shè)計(jì)易用性發(fā)展趨勢[J]. 葉琪.  設(shè)計(jì). 2020(05)
[2]基于SpringBoot和Vue框架的教代會提案系統(tǒng)的設(shè)計(jì)與實(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è)計(jì)與實(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è)控制計(jì)算機(jī). 2019(05)
[7]基于Node.js和JS的前后端分離實(shí)現(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實(shí)現(xiàn)web端實(shí)時(shí)在線監(jiān)測[J]. 韓利峰,李嘉曾,黃文博,吳麗梅.  儀器儀表用戶. 2018(10)

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



本文編號：3252390