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

1、近些年來隨著移動終端的廣泛普及，移動互聯(lián)網(wǎng)的增長已經(jīng)成為互聯(lián)網(wǎng)發(fā)展的主角。然而以HTML5為代表的移動Web應(yīng)用，還處于初級發(fā)展階段，其本身標(biāo)準(zhǔn)也在不斷改進和完善之中。當(dāng)用戶選擇產(chǎn)品時，一定會優(yōu)先選擇反應(yīng)迅速、交互設(shè)計完美的產(chǎn)品。因此，優(yōu)化頁面響應(yīng)速度就必須要對Web應(yīng)用進行全面性能優(yōu)化，從而為用戶提供更好體驗。Web應(yīng)用的性能優(yōu)化分為前端優(yōu)化和后端優(yōu)化兩個方向。目前后端方向的性能優(yōu)化已經(jīng)相對成熟，而前端性能優(yōu)化并未得到與后端性能優(yōu)化同

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

3、覽器緩存的使用、CDN加速、圖片優(yōu)化等多方面來逐一進行分析，優(yōu)化的主要目標(biāo)是CPU和內(nèi)存，再聯(lián)系移動開發(fā)的特殊性，進行有針對性的移動前端性能優(yōu)化方案介紹。其次，對Virtual DOM的差異化算法(diff algorithm)做出了進一步優(yōu)化。2015年國內(nèi)最受關(guān)注的前端技術(shù)是FaceBook公司推出的開源項目React，React提出了Virtual DOM的全新概念，優(yōu)化了虛擬DOM的diff算法，進而提升了DOM樹的對比速度。從

4、算法應(yīng)用角度來看，React實現(xiàn)了diff算法在前端方向的落地。它通過改變diff的流程與規(guī)則，使對比效率大大提升。本文在此基礎(chǔ)上，進一步調(diào)整算法流程，新增相關(guān)規(guī)則，從而進一步對算法進行優(yōu)化，并展示優(yōu)化效果。最后，設(shè)計并實現(xiàn)了Web前端性能監(jiān)控系統(tǒng)，可以實時監(jiān)控Web應(yīng)用狀況，獲取應(yīng)用性能參數(shù)與用戶操作信息，比如:首屏加載時間、白屏?xí)r間、用戶可操作時間、頁面資源是否有效等相關(guān)信息，實現(xiàn)對Web應(yīng)用性能和質(zhì)量的監(jiān)控，系統(tǒng)也可以監(jiān)控用戶行為