本文關(guān)鍵詞：基于改進(jìn)的Diff算法的Web前端性能優(yōu)化及應(yīng)用，由筆耕文化傳播整理發(fā)布。

【摘要】：近些年來(lái)隨著移動(dòng)終端的廣泛普及,移動(dòng)互聯(lián)網(wǎng)的增長(zhǎng)已經(jīng)成為互聯(lián)網(wǎng)發(fā)展的主角。然而以HTML5為代表的移動(dòng)Web應(yīng)用,還處于初級(jí)發(fā)展階段,其本身標(biāo)準(zhǔn)也在不斷改進(jìn)和完善之中。當(dāng)用戶選擇產(chǎn)品時(shí),一定會(huì)優(yōu)先選擇反應(yīng)迅速、交互設(shè)計(jì)完美的產(chǎn)品。因此,優(yōu)化頁(yè)面響應(yīng)速度就必須要對(duì)Web應(yīng)用進(jìn)行全面性能優(yōu)化,從而為用戶提供更好體驗(yàn)。Web應(yīng)用的性能優(yōu)化分為前端優(yōu)化和后端優(yōu)化兩個(gè)方向。目前后端方向的性能優(yōu)化已經(jīng)相對(duì)成熟,而前端性能優(yōu)化并未得到與后端性能優(yōu)化同等的重視程度,依舊存在很大的優(yōu)化空間。本文重點(diǎn)研究Web前端性能優(yōu)化,在保持后端系統(tǒng)不變的情況下,努力提升Web應(yīng)用的整體性能。本文主要做了以下工作：首先,闡述前端性能優(yōu)化的課題背景、國(guó)內(nèi)與國(guó)外的研究狀況,再分析前端性能優(yōu)化的必要性。而后在對(duì)Web前端的工作流程進(jìn)行逐步分析與描述,從HTTP協(xié)議本身到瀏覽器的工作原理,以及移動(dòng)開發(fā)的特殊性等方面,分別進(jìn)行相關(guān)研究與分析。著眼于性能優(yōu)化的方向,本文從瀏覽器相關(guān)特性出發(fā),并分析編程語(yǔ)言特性,具體到瀏覽器緩存的使用、CDN加速、圖片優(yōu)化等多方面來(lái)逐一進(jìn)行分析,優(yōu)化的主要目標(biāo)是CPU和內(nèi)存,再聯(lián)系移動(dòng)開發(fā)的特殊性,進(jìn)行有針對(duì)性的移動(dòng)前端性能優(yōu)化方案介紹。其次,對(duì)Virtual DOM的差異化算法(diff algorithm)做出了進(jìn)一步優(yōu)化。2015年國(guó)內(nèi)最受關(guān)注的前端技術(shù)是FaceBook公司推出的開源項(xiàng)目React, React提出了Virtual DOM的全新概念,優(yōu)化了虛擬DOM的diff算法,進(jìn)而提升了DOM樹的對(duì)比速度。從算法應(yīng)用角度來(lái)看,React實(shí)現(xiàn)了diff算法在前端方向的落地。它通過(guò)改變diff的流程與規(guī)則,使對(duì)比效率大大提升。本文在此基礎(chǔ)上,進(jìn)一步調(diào)整算法流程,新增相關(guān)規(guī)則,從而進(jìn)一步對(duì)算法進(jìn)行優(yōu)化,并展示優(yōu)化效果。最后,設(shè)計(jì)并實(shí)現(xiàn)了Web前端性能監(jiān)控系統(tǒng),可以實(shí)時(shí)監(jiān)控Web應(yīng)用狀況,獲取應(yīng)用性能參數(shù)與用戶操作信息,比如：首屏加載時(shí)間、白屏?xí)r間、用戶可操作時(shí)間、頁(yè)面資源是否有效等相關(guān)信息,實(shí)現(xiàn)對(duì)Web應(yīng)用性能和質(zhì)量的監(jiān)控,系統(tǒng)也可以監(jiān)控用戶行為,進(jìn)而為產(chǎn)品后期優(yōu)化提供可靠的數(shù)據(jù)保證。
【關(guān)鍵詞】：Web前端 性能優(yōu)化 虛擬DOM Diff dom tree 性能監(jiān)控
【學(xué)位授予單位】：華中師范大學(xué)
【學(xué)位級(jí)別】：碩士
【學(xué)位授予年份】：2016
【分類號(hào)】：TP393.09
【目錄】：

• 摘要5-6
• Abstract6-10
• 1 緒論10-14
• 1.1 研究背景及意義10-11
• 1.2 國(guó)內(nèi)外研究現(xiàn)狀11-12
• 1.3 本文研究?jī)?nèi)容12-13
• 1.4 本文結(jié)構(gòu)安排13-14
• 2 Web系統(tǒng)前端性能優(yōu)化的概述14-22
• 2.1 Web系統(tǒng)概述14-16
• 2.1.1 Web應(yīng)用系統(tǒng)概述14
• 2.1.2 Web系統(tǒng)的起源和發(fā)展14-15
• 2.1.3 Web前端應(yīng)用的演變15-16
• 2.1.4 Web前端內(nèi)容16
• 2.2 Web應(yīng)用前端性能優(yōu)化相關(guān)原理16-20
• 2.2.1 剖析一個(gè)URL請(qǐng)求響應(yīng)過(guò)程16-17
• 2.2.2 瀏覽器工作機(jī)制17-18
• 2.2.3 HTTP協(xié)議分析18-20
• 2.3 移動(dòng)Web開發(fā)的特殊性20-21
• 2.3.1 屏幕尺寸多樣化20
• 2.3.2 移動(dòng)端瀏覽器內(nèi)核種類繁多20-21
• 2.3.3 移動(dòng)設(shè)備性能差異化21
• 2.4 本章小結(jié)21-22
• 3 Web前端性能優(yōu)化方案22-34
• 3.1 客戶端顯示優(yōu)化處理22-28
• 3.1.1 HTML的優(yōu)化處理22-23
• 3.1.2 CSS的優(yōu)化處理23-25
• 3.1.3 JavaScript的優(yōu)化處理25-27
• 3.1.4 壓縮組件27-28
• 3.2 圖片優(yōu)化方式28-29
• 3.2.1 字體與SVG圖標(biāo)28
• 3.2.2 圖片格式選擇28
• 3.2.3 圖片優(yōu)化處理28-29
• 3.3 Web緩存優(yōu)化的優(yōu)化方案29-33
• 3.3.1 瀏覽器緩存優(yōu)化30-31
• 3.3.2 Web緩存優(yōu)化31-32
• 3.3.3 CDN技術(shù)32-33
• 3.4 本章小結(jié)33-34
• 4 改進(jìn)的Diff DOM Tree算法對(duì)Web前端性能的優(yōu)化34-49
• 4.1 DOM定義及操作34-35
• 4.1.1 DOM的定義34
• 4.1.2 DOM的節(jié)點(diǎn)34-35
• 4.1.3 DOM操作方法35
• 4.2 虛擬DOM35-38
• 4.2.1 虛擬DOM的定義35-36
• 4.2.2 Virtula DOM的簡(jiǎn)單實(shí)現(xiàn)36-38
• 4.3 改進(jìn)的Diff算法在Web前端性能優(yōu)化中的應(yīng)用38-48
• 4.3.1 Virtual DOM Diff算法的由來(lái)38-39
• 4.3.2 傳統(tǒng)的Diff算法39-41
• 4.3.3 改進(jìn)的Diff算法41-46
• 4.3.4 基于改進(jìn)的diff算法的優(yōu)化46-48
• 4.4 本章小結(jié)48-49
• 5 Web前端性能監(jiān)控系統(tǒng)應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)49-54
• 5.1 Web前端性能監(jiān)控系統(tǒng)應(yīng)用需求分析49-50
• 5.1.1 系統(tǒng)背景介紹49
• 5.1.2 系統(tǒng)功能需求49
• 5.1.3 系統(tǒng)非功能需求49-50
• 5.2 前端性能監(jiān)控系統(tǒng)應(yīng)用原型設(shè)計(jì)50-51
• 5.2.1 前端埋點(diǎn)50-51
• 5.2.2 用戶管理模塊51
• 5.2.3 后端處理數(shù)據(jù)模塊51
• 5.2.4 數(shù)據(jù)展示模塊51
• 5.3 前端性能監(jiān)控系統(tǒng)應(yīng)用的實(shí)現(xiàn)過(guò)程51-53
• 5.3.1 前端性能監(jiān)控系統(tǒng)的技術(shù)選型51
• 5.3.2 前端性能監(jiān)控系統(tǒng)的系統(tǒng)架構(gòu)51-52
• 5.3.3 前端性能監(jiān)控系統(tǒng)的監(jiān)控信息頁(yè)面的展示52-53
• 5.4 本章小結(jié)53-54
• 6 總結(jié)與展望54-56
• 6.1 總結(jié)54
• 6.2 展望54-56
• 參考文獻(xiàn)56-58
• 攻讀碩士期間參與項(xiàng)目和科研成果58-59
• 致謝59-60

【相似文獻(xiàn)】

中國(guó)期刊全文數(shù)據(jù)庫(kù) 前10條

1 丁燕云;魏娟;;淺析SQL數(shù)據(jù)庫(kù)的性能優(yōu)化問(wèn)題[J];科技信息(學(xué)術(shù)研究);2007年34期

2 ;簡(jiǎn)單易用網(wǎng)絡(luò)性能優(yōu)化軟件[J];網(wǎng)絡(luò)與信息;1999年10期

3 袁山龍,吳潔明;證券網(wǎng)上集中交易系統(tǒng)性能優(yōu)化的研究與應(yīng)用[J];微計(jì)算機(jī)應(yīng)用;2003年05期

4 張建華;王群華;;對(duì)系統(tǒng)性能優(yōu)化的十點(diǎn)辨析[J];計(jì)算機(jī)系統(tǒng)應(yīng)用;2007年05期

5 王勇;;基于SQL數(shù)據(jù)庫(kù)的性能優(yōu)化問(wèn)題分析[J];電腦知識(shí)與技術(shù);2008年15期

6 王保平;;性能優(yōu)化的簡(jiǎn)單法則[J];程序員;2009年09期

7 李培慧;何宗鍵;;某人力資源管理系統(tǒng)中用戶導(dǎo)入模塊性能優(yōu)化方案分析[J];科技信息;2010年35期

8 曉慧;;本本性能優(yōu)化圣手[J];電腦知識(shí)與技術(shù)(經(jīng)驗(yàn)技巧);2012年01期

9 王江偉;陳琛;;淺析軟件性能優(yōu)化[J];科技風(fēng);2012年08期

10 楊波;;系統(tǒng)性能優(yōu)化問(wèn)題研究[J];科技致富向?qū)?2013年09期

中國(guó)重要會(huì)議論文全文數(shù)據(jù)庫(kù) 前10條

1 姚杰;;寶鋼不銹鋼系統(tǒng)數(shù)據(jù)庫(kù)性能優(yōu)化方案[A];中國(guó)計(jì)量協(xié)會(huì)冶金分會(huì)2007年會(huì)論文集[C];2007年

2 代桂平;殷保群;奚宏生;周亞平;;受控M／G／1排隊(duì)系統(tǒng)的性能優(yōu)化[A];第二十二屆中國(guó)控制會(huì)議論文集（下）[C];2003年

3 李彥;王屹;徐繼明;;ERP系統(tǒng)的性能優(yōu)化[A];全國(guó)煉鋼連鑄過(guò)程自動(dòng)化技術(shù)交流會(huì)論文集[C];2006年

4 趙海波;楊昭;方箏;徐振軍;;燃?xì)鈮嚎s式熱泵系統(tǒng)全年季節(jié)性能優(yōu)化[A];中國(guó)制冷學(xué)會(huì)2007學(xué)術(shù)年會(huì)論文集[C];2007年

5 高明星;;DB2數(shù)據(jù)庫(kù)應(yīng)用性能優(yōu)化問(wèn)題淺談[A];科技、工程與經(jīng)濟(jì)社會(huì)協(xié)調(diào)發(fā)展——中國(guó)科協(xié)第五屆青年學(xué)術(shù)年會(huì)論文集[C];2004年

6 奚宏生;唐昊;殷保群;周亞平;;Markov控制過(guò)程在緊致行動(dòng)集上的性能優(yōu)化[A];第二十一屆中國(guó)控制會(huì)議論文集[C];2002年

7 高明星;;DB2數(shù)據(jù)庫(kù)應(yīng)用性能優(yōu)化問(wèn)題淺談[A];鐵道部信息技術(shù)中心成立30周年暨鐵路運(yùn)輸管理信息系統(tǒng)（TMIS）工程全面竣工投產(chǎn)TMIS工程建設(shè)論文專輯（二）[C];2005年

8 高明星;;DB2數(shù)據(jù)庫(kù)應(yīng)用性能優(yōu)化問(wèn)題淺談[A];中國(guó)鐵道學(xué)會(huì)——2004年度學(xué)術(shù)活動(dòng)優(yōu)秀論文評(píng)獎(jiǎng)?wù)撐募痆C];2005年

9 杜勁松;李強(qiáng);包勁松;;國(guó)產(chǎn)600MW機(jī)組循環(huán)效率試驗(yàn)及性能優(yōu)化分析[A];2008中國(guó)可持續(xù)發(fā)展論壇論文集（3）[C];2008年

10 杜勁松;李強(qiáng);包勁松;;國(guó)產(chǎn)600MW機(jī)組循環(huán)效率試驗(yàn)及性能優(yōu)化分析[A];全國(guó)火電大機(jī)組（600MW級(jí)）競(jìng)賽第十二屆年會(huì)論文集（上冊(cè)）[C];2008年

中國(guó)重要報(bào)紙全文數(shù)據(jù)庫(kù) 前4條

1 陳翔;性能優(yōu)化只能救火[N];中國(guó)計(jì)算機(jī)報(bào);2007年

2 本報(bào)記者 郭平;EMC簡(jiǎn)單高效實(shí)現(xiàn)私有云[N];計(jì)算機(jī)世界;2010年

3 ;安圖特引入新型數(shù)據(jù)加速解決方案[N];人民郵電;2008年

4 陳洪康 郭寶群 李雪梅;淺談VLDB性能優(yōu)化與維護(hù)[N];人民郵電;2001年

中國(guó)博士學(xué)位論文全文數(shù)據(jù)庫(kù) 前8條

1 李攀攀;云服務(wù)SLA合規(guī)性驗(yàn)證及性能優(yōu)化研究[D];哈爾濱工業(yè)大學(xué);2016年

2 陳偉鋒;大規(guī)模復(fù)雜過(guò)程系統(tǒng)的高性能優(yōu)化理論與方法研究[D];浙江大學(xué);2011年

3 李磊;分布式系統(tǒng)中容錯(cuò)機(jī)制性能優(yōu)化技術(shù)研究[D];國(guó)防科學(xué)技術(shù)大學(xué);2007年

4 賈海鵬;面向GPU計(jì)算平臺(tái)的若干并行優(yōu)化關(guān)鍵技術(shù)研究[D];中國(guó)海洋大學(xué);2012年

5 那俊;基于兩階段適應(yīng)的ASBS性能持續(xù)優(yōu)化方法研究[D];東北大學(xué);2011年

6 魏丫丫;Web傳輸?shù)男阅軆?yōu)化[D];清華大學(xué);2006年

7 何倩;P2P系統(tǒng)性能優(yōu)化若干關(guān)鍵技術(shù)研究[D];北京郵電大學(xué);2010年

8 毛宏燕;基于部分計(jì)值的服務(wù)性能優(yōu)化研究[D];上海交通大學(xué);2006年

中國(guó)碩士學(xué)位論文全文數(shù)據(jù)庫(kù) 前10條

1 鄒興偉;防偽纖維熒光檢測(cè)儀性能優(yōu)化研究[D];西南科技大學(xué);2015年

2 邱能俊;科學(xué)大數(shù)據(jù)云分析服務(wù)的性能優(yōu)化技術(shù)研究[D];貴州大學(xué);2015年

3 陳俊t，

本文編號(hào)：431060