分析Web前端性能優化研究及應用

賈麗娜

(武漢船舶職業技術學院計算機信息技術學院，湖北武漢，430050 )

1 Web技術分析

Web頁面是由W3C標準HTML類型的文件，CSS類型的文件，Javascript方式的腳本以及多種類型的圖片、涉及不同方面的音視頻及其他多媒體文件共同構成。以上不同組成部分具有差異性的作用，均在一定程度上支持Web前端，以HTML類型的文件來講，可以將其視為超出規范標準的文本標記語言，利用該語言描述文檔內容，可將內容詳細地、準確地、具體地呈現出來；而CSS類型的文檔，則是為了滿足不同用戶的實際應用需求對頁面的樣式進行多元化的布局。隨著互聯網技術研究越來越深入，Web前端各項技術均得到互聯網的支持，針對不同移動平臺設備應用情況，合理地設置與應用，極大程度上提高Web前端的應用價值[1]。

2 Web前端性能優化研究

2.1 Web前端性能優化模型及思想

總結以往Web前端設置及實際應用，可知Web前端性能可能受到多種因素的影響。如從宏觀角度講，Web前端性能可能遭受用戶操作系統、網絡環境、客戶端軟硬件平臺等方面的影響；如從結構構成的角度講，Web前端性能可能遭受HTML文檔結構、CSS樣式表、頁面javascript腳本等方面的影響。基于此，在優化Web前端性能時，應制定可行性的優化模型及思想，以便后續能夠有步驟、有計劃、有方向地展開性能優化，真正提高Web前端的應用效果。目前可概括表示Web前端性能的模型為負載模型、性能模型及成本模型。負載模型表示為請求和用戶操作事件所誘發的OS資源需求和負載的強度；性能模型則是對影響web應用性能的因素予以描述，比如加載耗時、響應速度、內存占有量等等；成本模型則是對web應用的外部環境損耗情況進行說明，尤其是對影響性能的因素進行描述。應用這三種模型有助于對性能實施優化，改善負載情況，提高web應用性能，減少成本[2]。綜合評估模型為性能優化給出衡量標準，這些標準則是由眾多性能參數和指標組成的，比如加載時間、相應速度、HTTP請求數目、數據流量等等。Web前端優化網站的過程中會出現不同程度的損耗，其性能勢必會收到不同程度的影響。如通過綜合評估模型，即可獲得具有參考作用的反饋數據，根據反饋結果及Web前端的構成情況，分析參數指標的相匹配組成模塊，定位參考指標的前端模型，并可行性應用的角度來設計并制定優化方案（如圖1所示）。

圖1 web前端性能優化模型

2.2 Web前端性能優化方法

2.2.1 相關請求優化

完整且具有較高應用價值的Web頁面勢必能夠滿足多樣化的文件格式的數據應用需求。這就意味著Web頁面涵蓋的文件類型較多，比如html文件的擁有，即可對腳本及圖片、音頻、視頻等多媒體資源進行處理，呈現內容豐富、色彩鮮艷的頁面，如此勢必能夠刺激用戶的感官，使之對頁面內容產生瀏覽興趣。在用戶打開瀏覽器某一頁面，瀏覽器會針對每個文件發出HTTP請求，在HTTP協議規范之下不同文件內容即可同步打開，呈現內容豐富的頁面。若HTTP請求過程中受到一些因素的影響，那么部分文件內容將無法快速傳輸，頁面顯示為部分內容正在加載，如此勢必會降低用戶Web瀏覽器使用體驗效果。為了避免此種情況發生，就要對相關請求予以優化。具體的做法是：合并處理同類文件，壓縮同類文件相對應的代碼。為了能夠滿足用戶不同信息查看需求，Web前端頁面文件涵蓋的信息種類繁多，那么頁面內容加載難度較大，而對文件予以合并、代碼壓縮，即可緩解文件加載緩慢、難以呈現信息的局面。需要注意的是合并處理同類文件，對于壓縮同類文件相對應的代碼不能盲目操作，主要是對.html、.js以及.css格式的文件予以合并，也就對以上類型文件的相同代碼予以分類，之后在各個子頁面內設置統一的link方式，進而顯著提高Web前端開發的效率，改善代碼冗余情況。通過將多個文件進行合并、壓縮后形成以一個文件，涵蓋多種語言內容，能滿足合并文件的要求，但存在的一個缺點是代碼可讀性被削弱，又因為開發后的版本不需要進行代碼閱讀，所以其存在的缺點可以被忽略，不會影響Web應用。

2.2.2 HTML結構相關的優化

HTML結構是Web前端的重要組成部分，但同樣容易受到諸多因素的影響，導致Web前端性能不佳。為了提高Web應用的可行性，應當進行HTML結構相關的優化。具體包括：

（1）HTML標簽語義化。HTML文檔是由不同意義的標簽構成的，而標簽又是由不同元素組成的，比如元素、元素、元素等等。對HTML標簽語義化處理，即：在文檔結構設計之際，對標簽本身所具有的含義予以設置，如段落就用

，標題選擇等，如此Web瀏覽器使用的過程中搜索引擎可根據標簽的語義來判斷是否權重等問題，進而對頁面予以優化。

（2）DOM操作優化。正常情況下Web瀏覽器在接收HTML文檔之后會進行解析處理，其中涵蓋DOM文檔解析和CSS樣式解析，兩者解析過程中會形成渲染樹，瀏覽器由此對頁面進行合理地排版及繪畫，其中涉及到 Reflow 和 Repaint。又因為 Reflow 和 Repaint所占據的瀏覽器內存較大，容易誘發用戶阻塞的現象。為了盡可能地避免此種情況發生，需要進行DOM操作優化，具體的做法是：比如在瀏覽器內存中動態新增片段對象。例如可以定義一個方法用于向頁面中動態添加鏈接，如文檔需要新增8個鏈接，那么整個操作過程可為：

如此即可在DOM外創建一個文檔對象，對其內存中的某個節點實施添加操作即可。

3 Web性能優化的應用

3.1 瀏覽器功能介紹

某國際版瀏覽器具有的功能有：

（1）流行應用及我的桌面應用

瀏覽器的主界面展示瀏覽使用排名靠前的、比較流行的Web應用，以便用戶能夠將Web應用圖標添加到桌面上。我的桌面應用則限制了客戶端獲取的桌面新型及Web應用的添加情況。

（2）應用搜索功能

在搜索界面輸入關鍵詞查詢，服務器接受請求后進行邏輯處理，獲得數據結果，并將其傳送至界面上，滿足用戶的應用需求。

3.2 Web前端性能優化

某國際版瀏覽器為典型的Web產品，遠程服務器負責核心數據的處理、推送、數據展示等。為了使瀏覽器能夠有效的應用，設置的Web前端框架涵蓋app-list、cate-detail等模塊；tab、box、dialog 等組件。Web應用實際情況表明瀏覽器頁面內容顯示效果不佳，在一定程度上降低了用戶使用體驗效果。對此，需要對Web前端性能予以優化，而采用的具體優化方法為：

3.2.1 減少請求

減少請求的做法有兩種，即文件合并與代碼壓縮。也就是對可歸為一類的文件進行合并處理，其中包括 baina.js、carousel.js、dolphin.js、list.js、listdataadapter.js、tab.js、zepto.min.js，將其均設置在Gruntfile.js文件內，如此即可減少110KB數量傳輸，相應的瀏覽器頁面加載速度增加。對圖片進行處理，則是將指示性icon予以合并，生成CSS Sprite圖片。

3.2.2 改進DOM操作方式

頁面結構類似的模塊較多，如若均進行DOM操作，頁面內容呈現需要較長的時間。為了避免此種情況發生，需要正確認識到舊版本DOM操作存在的效率問題，也就是在每次append操作之后都需要對復雜的模塊進行修改操作，這會造成很大的浪費。而修改DOM操作方式則可統一使用documentFragment這一種操作方式，只對fragment進行循環插入，然后一次性append到文檔中，如此即可提高整個瀏覽器的應用效果。比如首頁Banner模塊應用，以往首頁Banner模塊操作后需要進行修改操作，這造成一定資源的浪費，同時會使web前端性能降低。對此，計劃應用渲染修改的方式來處理Banner模型，使之操作更加簡潔，避免出現反復修改操作的情況。這里所采用的渲染修改的方式為：

在此基礎上將利用style方式添加樣式的方法來處理腳本中所有選擇的DOM元素，并修改Class Name。