基于改進(jìn)的Diff算法的Web前端性能優(yōu)化及應(yīng)用.pdf

1、近些年來隨著移動(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ī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)化同

2、等的重視程度，依舊存在很大的優(yōu)化空間。本文重點(diǎn)研究Web前端性能優(yōu)化，在保持后端系統(tǒng)不變的情況下，努力提升Web應(yīng)用的整體性能。
　　本文首先闡述前端性能優(yōu)化的課題背景、國內(nèi)與國外的研究狀況，再分析前端性能優(yōu)化的必要性。而后在對(duì)Web前端的工作流程進(jìn)行逐步分析與描述，從HTTP協(xié)議本身到瀏覽器的工作原理，以及移動(dòng)開發(fā)的特殊性等方面，分別進(jìn)行相關(guān)研究與分析。著眼于性能優(yōu)化的方向，本文從瀏覽器相關(guān)特性出發(fā)，并分析編程語言特性，具體到瀏

3、覽器緩存的使用、CDN加速、圖片優(yōu)化等多方面來逐一進(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年國內(nèi)最受關(guān)注的前端技術(shù)是FaceBook公司推出的開源項(xiàng)目React，React提出了Virtual DOM的全新概念，優(yōu)化了虛擬DOM的diff算法，進(jìn)而提升了DOM樹的對(duì)比速度。從

4、算法應(yīng)用角度來看，React實(shí)現(xiàn)了diff算法在前端方向的落地。它通過改變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í)間、頁面資源是否有效等相關(guān)信息，實(shí)現(xiàn)對(duì)Web應(yīng)用性能和質(zhì)量的監(jiān)控，系統(tǒng)也可以監(jiān)控用戶行為