校園門戶網站的Web前端性能優化

2020-05-26 14:59:04唐微楊椀萍

電子商務 2020年5期

唐微楊椀萍

摘要：校園門戶網站是一所學校對外的窗口，門戶網站加載效率對網站訪問者用戶體驗起著至關重要的作用，同時也影響學校對外形象。本文通過分析玉林師范學院官網首頁前端設計源碼，發現其設計存在div標簽的頻繁使用使HTML文檔結構復雜化，未遵循“結構、表現、行為”分離原則，圖片過多導致請求次數過多等問題，并針對存在問題提出采用HTML5語義化標簽、CSS置于頂部/JS放在底部優化和使用精靈圖方式的Web前端優化方案，并設計出優化源碼，優化后經測試數據結果顯示，優化后的網站效率明顯提升，達到改善網站的用戶體驗和節省相當的資源利用的優化目的。

關鍵詞：Web前端；性能優化；頁面結構優化；HTML

★基金項目：廣西壯族自治區教育廳2019年度廣西高校中青年教師科研基礎能力提升項目，項目名稱：共享經濟模式下農村電商物流終端配送模式發展的對策研究，編號：2019KY0593。

校園門戶網站是一所學校對外的窗口，門戶網站加載效率對網站訪問者的用戶體驗起著至關重要的作用，同時也影響學校對外形象。研究指出，如果用戶等待下載網頁的時間超過8秒，將有30%的用戶選擇停止瀏覽該網頁，同樣的研究表明，如果下載網頁的時間縮短1秒，則這個數字將從30%降低到8%。因此，如何有效地減少用戶的等待時間進而提高Web應用的性能成為了企業界以及學術界的研究熱點。通過分析玉林師范學院官網首頁前端設計源碼，發現其設計不完善之處，并提出網站首頁Web網頁優化方案和修改源碼，修改后，經過測試數據結果顯示，優化后的網站效率明顯提升，以此豐富了國內前端性能優化相關研究，為其他相關研究者提供參考，也可以為Web應用的前端優化提供一些指導和建議，為服務商減少優化費用，并且給予用戶更良好的使用體驗。

1、研究綜述

Web前端性能優化，企業、學術研究工作者紛紛從行業角度對其進行研究。雅虎公司性能團隊提出了著名的34條性能優化法則，開發的YSlow插件工具可以對網頁進行分析，并給出優化建議。微軟公司對Web前端性能優化也有著非常深入的研究。他們認為Web系統設計應該以用戶為中心，強調用戶的接受程度。在設計早期，應該盡可能充分的明確用戶需求。Google提出Web性能優化方法Diffable方法，開發了Web前端性能的分析工具Page Speed，該工具是從頁面加載時間（page laod time）來衡量性能。頁面加載時間優化的最佳實踐涉及到多個步驟，包括解析DNS名稱、建立TCP連接、發送HTTP請求、下載資源、從緩存獲取資源、解析和執行腳本和在頁面上渲染對象。Google還開發了優化工具TimeLine[1]。國內部分領先的互聯網企業，在實踐中也總結了優化Web前端的性能的方案。騰訊、阿里巴巴等企業已經在這個方面做了相關的研究。學術研究者在Web前端性能優化領域研究，缺乏對Web前端性能優化的分析。杜艷美、張翔、戴志誠和程勁草[2][3]等眾多學者均有對前端性能優化方面有理論研究。

2、Web前端性能優化方案

針對上述存在的問題，從HTML、CSS、JavaScript三個方面進行頁面結構優化、代碼優化、圖片優化以及減少HTTP請求優化。

2.1 Web前端頁面源碼分析

研究使用玉林師范學院官方網站首頁為例，通過研究其網站Web前端頁面源碼，分析其目前存在的問題，并據此提出有方案和改進方案。玉林師范學院官方網站首頁頁面如下圖1所示。

通過對網站源碼分析，玉林師范學院官方網站首頁頁面可優化的內容如下：

（2）避免使用@import

外部的CSS文件中使用@import會使得頁面在加載時增加額外的延遲。一個CSS文件aa.css包含了以下內容：@import url（“bb.css”）。瀏覽器先把aa.css下載、解析和執行后，發現及處理第二個文件bb.css。當有多個@import還會導致下載順序紊亂。最簡單有效的解決方法是使用標記來替代@ import，并行下載CSS文件，從而加快頁面加載速度。

外聯層疊樣式表可以解決：

（3）避免使用通用選擇器

瀏覽器在對 .main * { background：red； }這句CSS代碼進行解析時，會匹配文檔中所有class（類名）為main的元素，按照向上逐級查找的方式，直到文檔的根節點。這樣匹配開銷是非常大的，對性能的提升是有一定的阻礙的，所以應避免使用關鍵選擇器是通配選擇器的情況。

（4）減少重排

重排會導致瀏覽器重新計算整個文檔，重新構建渲染樹，這一過程會降低瀏覽器的渲染速度。如下所示，有很多操作會觸發重排，我們應該避免頻繁觸發以下操作：

① 改變font-size和font-family；

② 改變元素的內外邊距；

③ 通過JS改變CSS類；

④ 通過JS獲取DOM元素的位置相關屬性（如width/ height/left等）；

⑤ CSS偽類激活；

⑥ 滾動滾動條或者改變窗口大小。

（5）避免使用CSS Expression（CSS表達式）

CSS Expression，是一種使用動態設置CSS屬性的方式。CSS表達式非常的強大，max-width、min-width、maxheight、min-height屬性，隔行換色（背景色、字體顏色），模擬：hover，：before，：after等偽類的實現可以通過CSS表達式實現。正因為CSS表達式太過于強大了，它會反復地執行，有嚴重的效率問題，就會導致嚴重的性能問題，所以盡可能地避免使用CSS表達式。

（6）CSS Sprites（CSS精靈圖）

加速的關鍵是減少請求個數，客戶端每渲染一張圖片都會向服務器發送一次請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。網站圖片過多，會增加HTTP的請求，特別是圖片特別多的網站，如果能用CSS Sprites減少圖片數量，減少對圖片的HTTP請求，將大大提高頁面性能，帶來速度上的提升。CSS Sprites是一種圖像拼合技術，CSS Sprites就是把網頁中一些背景圖片整合到一張圖片文件中，結合CSS的“background-image”，“background- repeat”，“background-position”屬性進行背景定位，backgroundposition可以用數字能精確的定位出背景圖片的位置。

2.4 JavaScript優化

（1）JavaScript文件放在底部加載

JavaScript的下載和執行會阻塞用戶界面的繪制和其他資源的下載。將script標簽放在body尾部，JavaScript文件一般放在底部加載，這樣做可以減少頁面CSS、HTML文件的下載阻塞，減少網頁界面的空白時間。瀏覽器在解析到script標簽之前，不會渲染頁面的任何部分。

（2）使用事件代理減少DOM操作

頻繁的事件操作也會產生很大的開銷，對性能產生了不小的阻礙。冒泡的事件可以在事件目標上進行處理，在其任何祖先節點上也能處理，利用事件冒泡原理就可以將事件操作附加到其父元素或祖先元素負責多個目標的事件處理。另外，對于動態增加內容而子節點都需要一樣的事件處理函數的情況下，事件注冊可以放到父節點上，不需要單獨給每個子節點注冊事件監聽，從而減少了事件操作。

（3）避免全局查找

一個函數中，會用到全局對象存儲為局部變量來減少全局查找，因為訪問局部變量的速度要比訪問全局變量的速度更快些，避免全局查找對性能的提升有很大的幫助。

（4）避免使用with語句

使用with語句，它會創建自己的作用域，因此會增加其中執行的代碼的作用域鏈的長度，由于額外的作用域鏈的查找，在with語句中執行的代碼肯定會比外層執行的代碼要慢，效率也會變慢，因此盡量不要使用with語句。

3、Web前端性能優化方案

3.1 HTML5語義化標簽的優化應用

玉林師范學院官方網站首頁源碼中，

標簽是原網站首頁使用最多的標簽，

標簽使HTML文檔看起來比較繁雜無序，其次使用較多是

、

等標簽。針對這個源碼情況，可以使用HTML5新增的語義化標簽，頁面頭部使用

標簽，定義頭部與背景；使用