校園門戶網(wǎng)站的Web前端性能優(yōu)化

唐微 楊椀萍

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

關(guān)鍵詞：Web前端；性能優(yōu)化；頁面結(jié)構(gòu)優(yōu)化；HTML

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

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

1、研究綜述

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

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

針對(duì)上述存在的問題，從HTML、CSS、JavaScript三個(gè)方面進(jìn)行頁面結(jié)構(gòu)優(yōu)化、代碼優(yōu)化、圖片優(yōu)化以及減少HTTP請(qǐng)求優(yōu)化。

2.1 Web前端頁面源碼分析

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

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

（2）避免使用@import

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

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

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

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

（4）減少重排

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

① 改變font-size和font-family；

② 改變?cè)氐膬?nèi)外邊距；

③ 通過JS改變CSS類；

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

⑤ CSS偽類激活；

⑥ 滾動(dòng)滾動(dòng)條或者改變窗口大小。

（5）避免使用CSS Expression（CSS表達(dá)式）

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

（6）CSS Sprites（CSS精靈圖）

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

2.4 JavaScript優(yōu)化

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

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

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

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

（3）避免全局查找

一個(gè)函數(shù)中，會(huì)用到全局對(duì)象存儲(chǔ)為局部變量來減少全局查找，因?yàn)樵L問局部變量的速度要比訪問全局變量的速度更快些，避免全局查找對(duì)性能的提升有很大的幫助。

（4）避免使用with語句

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

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

3.1 HTML5語義化標(biāo)簽的優(yōu)化應(yīng)用

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

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

3.3 精靈圖的使用

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

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

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

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

4、總結(jié)與展望

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

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

參考文獻(xiàn)

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

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

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

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

作者簡(jiǎn)介：

唐微，玉林師范學(xué)院，講師，本科，電子商務(wù)運(yùn)營管理；通訊作者：楊椀萍，玉林師范學(xué)院。