唐微 楊椀萍

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

關鍵詞：Web前端；性能優(yōu)化；頁面結構優(yōu)化；HTML

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

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

1、研究綜述

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

2、Web前端性能優(yōu)化方案

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

2.1 Web前端頁面源碼分析

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

通過對網(wǎng)站源碼分析，玉林師范學院官方網(wǎng)站首頁頁面可優(yōu)化的內(nèi)容如下：

（2）避免使用@import

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

外聯(lián)層疊樣式表可以解決：

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

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

（4）減少重排

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

① 改變font-size和font-family；

② 改變元素的內(nèi)外邊距；

③ 通過JS改變CSS類；

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

⑤ CSS偽類激活；

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

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

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

（6）CSS Sprites（CSS精靈圖）

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

2.4 JavaScript優(yōu)化

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

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

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

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

（3）避免全局查找

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

（4）避免使用with語句

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

3、Web前端性能優(yōu)化方案

3.1 HTML5語義化標簽的優(yōu)化應用

玉林師范學院官方網(wǎng)站首頁源碼中，

通過外鏈的方式（標簽）將CSS文件放置于標簽里，位于文檔頭部，樣式更容易加載，頁面渲染不受阻塞。把JS腳本文件置于整個HTML文檔的底部，不會阻塞HTML與CSS的加載渲染。并且完全遵循“表現(xiàn)、結構與行為”分離的原則。

3.3 精靈圖的使用

針對頁面下方超鏈接圖片的網(wǎng)頁設計中，未使用精靈圖前的實現(xiàn)代碼，每一張圖片放在

標簽下的標簽里，有多少張圖片就需要請求多少次，請求次數(shù)過多?；诖耍W(wǎng)頁優(yōu)化時將多張圖片使用圖片合成工具（如Photoshop工具）合并在同一張圖片里。把需要放置圖片的標簽的background-image屬性設為集成圖片的圖片地址，圖片只需要請求一次，便完成加載，大大減少了請求次數(shù)。關鍵代碼實現(xiàn)如圖4所示。

玉林師范學院官網(wǎng)首頁優(yōu)化前的底部圖片的大小為174。74KB，加載請求時間為381ms，如圖5所示。把圖5的6張圖片合成為精靈圖（sp.png）后，圖片文件大小為138KB，使用精靈圖之后的圖片請求時間為14ms，如圖6所示。

實例表明，使用精靈圖后的加載時間更快，比之前的381ms提升了27倍的速度。精靈圖的使用減少了對圖片的請求數(shù)，極大地提升了頁面加載速度。

4、總結與展望

論文以玉林師范學院官網(wǎng)首頁為例，分析網(wǎng)站首頁的不足與改進之處，利用前端優(yōu)化技術進行HTML、CSS、JavaScript方面的優(yōu)化，實例驗證結果表明，減少請求次數(shù)與縮短響應時間從而達到了優(yōu)化目的。

論文在前端優(yōu)化方面做了很多研究和實踐工作，但在很多的方面還有待繼續(xù)完善和深入研究，比如更詳細的JavaScript代碼級別的優(yōu)化和負載均衡優(yōu)化等，希望今后能夠從后端技術對Web應用優(yōu)化進行進一步深入研究，更深入優(yōu)化網(wǎng)站的網(wǎng)頁設計，提升用戶體驗。

參考文獻

[1] 梁義濤，馬青松，張猛等.基于Web前端的性能優(yōu)化方案研究及應用[J].信息通信，2017（05）：103-104.

[2] 張翔.移動圖片社交前端性能優(yōu)化研究[J].通訊世界，2018（09）： 241-242.

[3] 戴志誠，程勁草.基于虛擬DOM的Web前端性能優(yōu)化研究[J].計算機應用與軟件，2017，34（12）：21-25+31.

[4] 閆娜.初探DIV+CSS在網(wǎng)頁優(yōu)化中的應用[J].科技資訊，2017，15（05）：38-39.

作者簡介：

唐微，玉林師范學院，講師，本科，電子商務運營管理；通訊作者：楊椀萍，玉林師范學院。