李曉峰

(昆明船舶設(shè)備研究試驗(yàn)中心人力資源部，云南昆明 650000)

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，越來(lái)越多的企業(yè)和政府搭建了門(mén)戶網(wǎng)站。Web應(yīng)用為了提升頁(yè)面利用率和用戶交互性體驗(yàn)，網(wǎng)頁(yè)容量不斷被加大，并在網(wǎng)頁(yè)中應(yīng)用大量JavaScript代碼及其框架技術(shù)［1］。這種變化，一方面使網(wǎng)頁(yè)的表現(xiàn)力更強(qiáng)，層次更豐富。但另一方面，復(fù)雜的實(shí)現(xiàn)、漂亮的界面背后隱藏的是增加客戶端流量、影響到網(wǎng)頁(yè)在瀏覽器中的解析效率、直接延遲了網(wǎng)頁(yè)加載時(shí)間，給客戶端性能帶來(lái)了壓力的同時(shí)，且破壞了用戶的整體體驗(yàn)［2］。針對(duì)這一問(wèn)題，本文從HTTP請(qǐng)求數(shù)目及網(wǎng)頁(yè)元素兩個(gè)方面著手，對(duì)Web工程的前端性能提出了若干優(yōu)化方法，希望能對(duì)網(wǎng)站搭建的相關(guān)從業(yè)人員有所幫助。

1 Web前端優(yōu)化相關(guān)原理

客戶端完成通信通常需要HTTP協(xié)議和TCP協(xié)議。HTTP協(xié)議是Web應(yīng)用層協(xié)議，其是Web的核心。通過(guò)對(duì)HTTP協(xié)議進(jìn)行的一些研究［3－4］分析，提出了一些修改方法以降低檢索的延時(shí)，但在檢索延時(shí)對(duì)加載速度影響較小的情況下，實(shí)際應(yīng)用價(jià)值則較小。但HTTP本身依然決定著Web的通信形式，影響著Web前端的行為。HTTP協(xié)議一般由兩部分程序?qū)崿F(xiàn):一個(gè)客戶機(jī)程序和一個(gè)服務(wù)器程序，其分別運(yùn)行在不同端的系統(tǒng)中，通過(guò)HTTP報(bào)文的交換來(lái)進(jìn)行會(huì)話，HTTP協(xié)議規(guī)定了這些報(bào)文的格式以及客戶機(jī)和服務(wù)器的交換行為。TCP作為HTTP的底層傳輸協(xié)議［5］，當(dāng)HTTP客戶端發(fā)起一個(gè)與服務(wù)器的TCP連接，建立連接時(shí)，瀏覽器和服務(wù)器進(jìn)程便可通過(guò)套接字訪問(wèn)TCP。TCP為HTTP提供了一個(gè)可靠的數(shù)據(jù)傳輸服務(wù)，所以一個(gè)客戶端進(jìn)程發(fā)出的每個(gè)HTTP請(qǐng)求報(bào)文最終均能完整的到達(dá)服務(wù)器。同樣，服務(wù)器發(fā)出的每個(gè)HTTP響應(yīng)報(bào)文也能完整到達(dá)客戶端。

HTTP協(xié)議的客戶端/服務(wù)器請(qǐng)求響應(yīng)機(jī)制程序，包含下面幾個(gè)步驟:

(1)發(fā)起請(qǐng)求。客戶端向服務(wù)器發(fā)起HTTP請(qǐng)求，如打開(kāi)一個(gè)URL地址。

(2)建立連接。客戶端對(duì)URL地址進(jìn)行域名解析后找到服務(wù)器IP，并與服務(wù)器建立TCP連接。瀏覽器通過(guò)發(fā)送一個(gè)TCP包，要求服務(wù)器打開(kāi)連接，服務(wù)器也通過(guò)發(fā)送一個(gè)包來(lái)應(yīng)答用戶的瀏覽器，告知瀏覽器連接已打開(kāi)。

(3)發(fā)送請(qǐng)求。打開(kāi)連接后，客戶端發(fā)送請(qǐng)求信息到服務(wù)器端的相應(yīng)端口上，完成請(qǐng)求動(dòng)作提交。

(4)發(fā)送響應(yīng)。服務(wù)器在處理完客戶端請(qǐng)求之后，向客戶端發(fā)送響應(yīng)消息。

(5)關(guān)閉連接。結(jié)束TCP/IP對(duì)話是通過(guò)客戶端和服務(wù)器端關(guān)閉套接字來(lái)實(shí)現(xiàn)的。

由圖1所示，用戶在獲取一個(gè)頁(yè)面時(shí)，分別經(jīng)歷的等待時(shí)間是:域名解析時(shí)間，即客戶端解析域名尋找服務(wù)器IP所需的時(shí)間;TCP建立連接時(shí)間，客戶端服務(wù)器建立連接時(shí)TCP3次連接時(shí)間;HTTP請(qǐng)求響應(yīng)時(shí)間，HTTP請(qǐng)求發(fā)送與服務(wù)器對(duì)該請(qǐng)求的響應(yīng)時(shí)間;響應(yīng)傳送時(shí)間，服務(wù)器響應(yīng)了請(qǐng)求后，將所請(qǐng)求的內(nèi)容下載到客戶端的時(shí)間;客戶端解析和響應(yīng)時(shí)間，客戶端得到響應(yīng)后解析顯示出的時(shí)間。本文主要從服務(wù)器響應(yīng)傳送時(shí)間與客戶端解析的響應(yīng)時(shí)間兩方面著手，分析介紹了一些Web工程前端的優(yōu)化方法。

圖1 HTTP協(xié)議的客戶端/服務(wù)器請(qǐng)求響應(yīng)流圖

2 Web前端優(yōu)化方法

2.1 HTTP請(qǐng)求優(yōu)化

HTTP請(qǐng)求優(yōu)化是指減少頁(yè)面的HTTP請(qǐng)求數(shù)目，即通過(guò)減少與服務(wù)器的連接次數(shù)來(lái)降低網(wǎng)頁(yè)響應(yīng)延遲。通常一個(gè)功能完善的網(wǎng)頁(yè)需引入JavaScript、CSS、背景圖片等［6］大量的外部文件。但由于HTTP協(xié)議不具備狀態(tài)性，每一次訪問(wèn)均需要客戶端重新發(fā)送請(qǐng)求至服務(wù)器。要呈現(xiàn)整個(gè)頁(yè)面，頁(yè)面上的每個(gè)組件均要向服務(wù)器重新發(fā)送一次HTTP請(qǐng)求，這些組件所產(chǎn)生的大量請(qǐng)求累加是影響網(wǎng)站速度的主要原因。減少網(wǎng)頁(yè)元素是一個(gè)行之有效降低請(qǐng)求數(shù)目的方法，但在網(wǎng)頁(yè)內(nèi)容豐富的今天，通過(guò)削減網(wǎng)頁(yè)元素帶來(lái)的網(wǎng)頁(yè)功能性下降是不可接受的。于是就出現(xiàn)了兩種網(wǎng)頁(yè)元素合并方法，分別是樣式表(CSS)、腳本JavaScript合并壓縮技術(shù)與CSSSprites技術(shù)。

2.1.1 樣式表和腳本合并壓縮

樣式表CSS和腳本JavaScript是Web網(wǎng)頁(yè)的表現(xiàn)和行為，其共同決定著網(wǎng)頁(yè)表現(xiàn)樣式、網(wǎng)頁(yè)效果及網(wǎng)頁(yè)的交互特征，這是網(wǎng)頁(yè)中必不可少的元素。隨著Web系統(tǒng)架構(gòu)的復(fù)雜化，Web前臺(tái)系統(tǒng)開(kāi)發(fā)也日益復(fù)雜。Web前臺(tái)架構(gòu)也逐漸的呈現(xiàn)出分層思想，將CSS與JavaScript分為3 層結(jié)構(gòu)［7］，分別是 base層、common 層和page層。其中，base層位于最底層，負(fù)責(zé)封裝不同瀏覽器對(duì)于CSS與JavaScript解析的差異，提供統(tǒng)一的接口，并擴(kuò)展底層接口，為common層和page層提供易用的接口。common層使用base層提供的接口，為page層提供可復(fù)用的組件。page層位于3層的最頂端，與頁(yè)面的具體需求相關(guān)聯(lián)。隨著Web前端架構(gòu)的發(fā)展，復(fù)雜化的Web前端架構(gòu)使Web前端工程師的分工更加明顯，同時(shí)減少了不必要的重復(fù)性代碼。但同時(shí)，網(wǎng)頁(yè)需引入的CSS與JavaScript文件個(gè)數(shù)卻增加了，即增加了HTTP請(qǐng)求數(shù)目。

Google公司與 Yahoo公司分別開(kāi)發(fā)了 Google Closure Compiler與YUI Compiler工具用于樣式和腳本的壓縮。這兩個(gè)工具均是基于java的jar包。一般情況下，用Google Closure Compiler壓縮JavaScript腳本，用YUI Compiler壓縮樣式表CSS。

壓縮樣式表和腳本文件可減少其大小，合并樣式表和腳本文件可有效減少HTTP請(qǐng)求數(shù)目從而減少網(wǎng)頁(yè)下載時(shí)間。合并壓縮方式在CSS與JS資源越復(fù)雜的情況下，能得到顯著的優(yōu)化效果。

2.1.2 CSSSprites技術(shù)

CSSSprites技術(shù)是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式［8］，是將一個(gè)頁(yè)面涉及到的所有零星圖片均包含到一張大圖中去，將諸多零星圖片對(duì)應(yīng)的眾多HTTP請(qǐng)求變成一個(gè)大圖所對(duì)應(yīng)的一個(gè)HTTP請(qǐng)求。該方法有效降低了頁(yè)面的HTTP請(qǐng)求數(shù)目，且在頁(yè)面被訪問(wèn)時(shí)，載入的圖片不會(huì)像以前那樣每幅緩慢的顯示，視覺(jué)效果更優(yōu)。

2.2 網(wǎng)頁(yè)元素優(yōu)化

通常，Web統(tǒng)用80%以上的時(shí)間來(lái)加載頁(yè)面組件［9］，而對(duì)于個(gè)體頁(yè)面，在這80%以上的時(shí)間中又只用了10% ～20%的時(shí)間來(lái)下載HTML文檔，剩下的時(shí)間均用于下載網(wǎng)頁(yè)中的其他元素，如大量的圖片、JavaScript文件等。但HTML文檔與網(wǎng)頁(yè)元素是相輔相成的，如何在不改變網(wǎng)頁(yè)本身設(shè)計(jì)，不降低網(wǎng)頁(yè)質(zhì)量的情況下，對(duì)網(wǎng)頁(yè)進(jìn)行合理優(yōu)化來(lái)加快網(wǎng)頁(yè)的下載速度。針對(duì)這一問(wèn)題，網(wǎng)頁(yè)元素優(yōu)化被提出，其主要包括Web工程中HTML的優(yōu)化，JavaScript的優(yōu)化和CSS樣式表的優(yōu)化。

2.2.1 HTML優(yōu)化

在前端的構(gòu)成中，HTML是必不可少的一部分，且是真正的展示“前端”。HTML文檔包括用于組織網(wǎng)頁(yè)結(jié)構(gòu)的HTML代碼，引入或內(nèi)嵌的CSS及JavaScript代碼等［10］。則對(duì)于HTML優(yōu)化的主要方法有:

(1)標(biāo)簽語(yǔ)義化?，F(xiàn)如今 Web標(biāo)準(zhǔn)均被稱做“DIV+CSS”或“層布局”，標(biāo)準(zhǔn)的主導(dǎo)思想是使用樣式表CSS來(lái)控制網(wǎng)頁(yè)中各元素的表現(xiàn)形式，包括位置、顏色、大小等。這種布局一定程度上弱化了標(biāo)簽的布局能力，將布局完全放到了樣式中進(jìn)行控制。這同時(shí)使網(wǎng)頁(yè)布局陷入大量的使用＜DIV＞標(biāo)簽作為結(jié)構(gòu)元素的誤區(qū)。這是一種樣式表CSS的濫用。

HTML提供了相當(dāng)豐富的標(biāo)簽，各標(biāo)簽均有各自的含義。應(yīng)充分利用并遵守各標(biāo)簽的“語(yǔ)義”。如表格形式的數(shù)據(jù)應(yīng)仍用TABLE布局，大段的文字內(nèi)容應(yīng)由＜P＞進(jìn)行分段而不是＜BR/＞，列表項(xiàng)應(yīng)放在UL或OL或DL中。這樣做的原因是保證在用戶去掉CSS顯示的情況下，網(wǎng)頁(yè)能盡量有效地將內(nèi)容的結(jié)構(gòu)層次顯示出來(lái)。若全部用＜DIV＞，當(dāng)去掉CSS后，整個(gè)網(wǎng)頁(yè)就失去了層次，只剩下一些雜亂的文字碎片。這并不符合Web標(biāo)準(zhǔn)對(duì)低配置兼容性的要求?！癉IV+CSS”布局方式具有代碼量少、結(jié)構(gòu)精簡(jiǎn)、語(yǔ)義清晰等優(yōu)點(diǎn)，標(biāo)簽語(yǔ)義化則對(duì)搜索引擎更加友好。

(2)CSS與JavaScript文件外鏈。在HTML頁(yè)面中通常引用CSS、JavaScript代碼或文件來(lái)使頁(yè)面更生動(dòng)豐富。HTML頁(yè)面引用CSS或JavaScript代碼有3種方式:內(nèi)嵌式、內(nèi)聯(lián)式和外鏈?zhǔn)?。?nèi)嵌式、內(nèi)聯(lián)式是將相關(guān)代碼寫(xiě)入HTML文件中，外鏈?zhǔn)酵ㄟ^(guò)將CSS或JavaScript代碼打包后在相關(guān)網(wǎng)頁(yè)中引用。一般HTML文檔在頁(yè)面加載時(shí)總是會(huì)重新刷新，頁(yè)面中的內(nèi)容均會(huì)重新加載，內(nèi)嵌式、內(nèi)聯(lián)式寫(xiě)入的內(nèi)容也一同重新加載。而當(dāng)CSS與JavaScript文件外鏈后，便可對(duì)該組件進(jìn)行緩存，頁(yè)面再次加載時(shí)會(huì)大幅減少下載組件時(shí)間。文件外聯(lián)對(duì)頁(yè)面的優(yōu)化是顯然易見(jiàn)的，甚至前文中介紹到的壓縮等方式均要求組件內(nèi)外鏈?zhǔn)健?/p>

2.2.2 JavaScript優(yōu)化

與CSS樣式表類似，頁(yè)面在加載腳本時(shí)，所有位于腳本后的內(nèi)容均會(huì)被阻塞。如今，網(wǎng)頁(yè)使用的HTTP協(xié)議為HTTP1.1，其規(guī)定瀏覽器在下載腳本時(shí)，并行下載是被禁止的。這表示頁(yè)面在下載腳本時(shí)是依次下載的，會(huì)占用相對(duì)多的時(shí)間，當(dāng)腳本處于頁(yè)面頂部時(shí)，加載腳本所帶來(lái)的效果是頁(yè)面會(huì)停止渲染，出現(xiàn)渲染空白。將腳本放在網(wǎng)頁(yè)底部比置于頁(yè)面頂部的效果好，且腳本較多時(shí)效果更佳。

2.2.3 CSS優(yōu)化

CSS樣式表決定了網(wǎng)頁(yè)的展現(xiàn)方式，定義了網(wǎng)頁(yè)中元素的位置，大小與效果，對(duì)呈現(xiàn)良好視覺(jué)的網(wǎng)頁(yè)有重要作用。CSS優(yōu)化的主要方法有:

(1)將CSS放到頁(yè)面頂部。網(wǎng)頁(yè)中的諸多元素，如圖片、腳本等是網(wǎng)頁(yè)下載中必須的，而CSS樣式表為網(wǎng)頁(yè)中的組件提供了其表現(xiàn)樣式、位置和格式信息。網(wǎng)頁(yè)在加載頁(yè)面內(nèi)容時(shí)一般情況下是順序解釋執(zhí)行的，即網(wǎng)頁(yè)元素是按照其在網(wǎng)頁(yè)中的順序下載的。而理論上若將樣式表放到頁(yè)面的最后位置，則網(wǎng)頁(yè)中的其他組件便可優(yōu)先下載，這可使得除了網(wǎng)頁(yè)樣式外的其他元素盡早展現(xiàn)給用戶。但若將樣式表放在底部后，會(huì)導(dǎo)致瀏覽器組織網(wǎng)頁(yè)內(nèi)容的逐步呈現(xiàn)，為了避免樣式變化時(shí)瀏覽器重繪頁(yè)面，瀏覽器會(huì)阻塞內(nèi)容的逐步呈現(xiàn)。在用戶的視覺(jué)回饋中，樣式表放在底部響應(yīng)要比樣式表放在頂部慢。所以一般情況下，樣式表CSS應(yīng)放到頁(yè)面頂部。

(2)避免CSS表達(dá)式。CSS表達(dá)式是一種使用動(dòng)態(tài)設(shè)置CSS屬性的方式。但CSS表達(dá)式所帶來(lái)的嚴(yán)重性能問(wèn)題:為了確保有效性，CSS表達(dá)式會(huì)進(jìn)行頻繁的求值，改變窗口大小、滾動(dòng)頁(yè)面甚至移動(dòng)鼠標(biāo)均會(huì)觸發(fā)表達(dá)式進(jìn)行求值，如此頻繁的求值會(huì)導(dǎo)致瀏覽器的性能受到嚴(yán)重影響。CSS表達(dá)式雖強(qiáng)大，但會(huì)給瀏覽器帶來(lái)嚴(yán)重的性能問(wèn)題，拖慢網(wǎng)頁(yè)的加載速度，在可能的前提下，應(yīng)盡量避免使用CSS表達(dá)式。

3 結(jié)束語(yǔ)

介紹了Web工程前端優(yōu)化的相關(guān)原理，主要從服務(wù)器響應(yīng)傳送時(shí)間與客戶端解析的響應(yīng)時(shí)間兩方面著手，分別從HTTP請(qǐng)求優(yōu)化，網(wǎng)頁(yè)元素優(yōu)化兩個(gè)方面，介紹了幾種實(shí)用的Web前端優(yōu)化方法，并分析了各方法在具體工程中使用應(yīng)注意的事項(xiàng)。在不改變后臺(tái)數(shù)據(jù)及網(wǎng)頁(yè)本身的情況下，提高了Web系統(tǒng)進(jìn)行性能。

［1］中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心.第34次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告［R］.北京:中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心，2014.

［2］Zona Research.The economic impacts of unacceptable web －site download speeds［R/OE］.(2011－12－11)［2014－10－05］http://www.motc.gov.tw/service.

［3］Mogul J C.The case for persistent－connection HTTP［C］.Boston:Proceedings of the ACM Sigcomm Conference，1995.

［4］Padmanabhan V N，Mogul J C.Improving world wide web latency［M］.California:Computer Science Division，1995.

［5］Kurose JF，Ross K W.計(jì)算機(jī)網(wǎng)絡(luò)［M］.陳鳴，譯.北京:機(jī)械工業(yè)出版社，2009.

［7］曹劉陽(yáng).編寫(xiě)高質(zhì)量代碼Web前端開(kāi)發(fā)修煉之道［M］.北京:機(jī)械工業(yè)出版社，2010.

［6］Souders S.High performance web sites:essential knowledge for front－end engineers［M］.America:O'Reilly Media，2007.

［8］Huisong W，Jun W，Qun D，et al.A new approach to constructing CSScodes based on factor graphs［J］.Information Sciences，2007，178(7):1893 －1902.

［9］King A B.Website optimization:speed，search engine ＆ conversion rate secrets［M］.America:O'Reilly Media，2008.

［10］桑德斯，劉彥博.高性能網(wǎng)站建設(shè)指南［M］.北京:電子工業(yè)出版社，2008.