ISSN 1009 -3044E-mail: info@cccc.net.cnComputer Knowledge and Technology電腦知識(shí)與技術(shù)htp://www.w.net.cnnVol.7, No.16, June 21p.3.11-3813,38Tel:+86- -551- -5690963 5690964基于前端的Web性能優(yōu)化康長安,陳玉紅(中國礦業(yè)大學(xué)管理學(xué)院,江蘇徐州21116)摘要:隨著互聯(lián)網(wǎng)的高速發(fā)展,用戶與頁面的交互越來越復(fù)雜,會(huì)話時(shí)間也越來越長,同時(shí)人們對(duì)互聯(lián)網(wǎng)的依賴性日益增強(qiáng),網(wǎng)站性能逐漸成為Web產(chǎn)品市場成敗和評(píng)測網(wǎng)站用戶體驗(yàn)的重要指標(biāo)之一。文中著重從前端的角度對(duì)Web性能優(yōu)化的方法和策略進(jìn)行分析與研究。關(guān)鍵詞:前端;Web;性能優(yōu)化;Gzip ,中圖分類號(hào):TP393文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1009 -3044(2011)16 -3811-03Website Performance Optimization Based on Front: EndKANG Chang- -an, CHEN Yu-hong(School of Management, China University of Mining and Technology, Xuzhou 221116, China)Abstract: With the rapid development of Internet, the interaction between with users and the page is more and more complicated, the se-sion time is getting longer. While people are increasingly depending on the Intermet, website performance becomes more and more impor-tant to the product. This esasy focuses on the method of website performance optimization from the perspective of front- end.Key words: Front- -End; Web; performance optimization; Gzip在Google .500毫秒的延遲將失去20%的流最;在Bing, 慢2秒將導(dǎo)致收入降低4.3%;在Amazon,慢100毫秒將丟失1%的交易....反之網(wǎng)站速度越快，越有利于提升用戶體驗(yàn)和流量。隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展, Web 2.0把越來越多的內(nèi)容加到網(wǎng)頁中,圖片、Flash.JavaSeript腳本和CSS樣式表等被廣泛使用。如何能夠?qū)㈨撁娓斓某尸F(xiàn)給用戶,成為很多公司面臨的挑戰(zhàn)。根據(jù)Yahoo!公司的性能黃金法則,在頁面是現(xiàn)的過程中,只有10%~20%的時(shí)間花費(fèi)在了下載HTML文檔上,其余的80%-90%時(shí)間花在了下載頁面中的所有組件(圖片.腳本.樣式表、Flash等)上"。基于此.本文將者重從前端的角度分析如何對(duì)網(wǎng)站性能進(jìn)行優(yōu)化。1減少HTTP請(qǐng)求瀏覽器和服務(wù)器之間通過HTTP協(xié)議相互通信.HTP響應(yīng)包含狀態(tài)碼頭和響應(yīng)體,即便請(qǐng)求返回的內(nèi)容為空.請(qǐng)求也依舊包含大量的頭部信息。根據(jù)黃金法則，改善頁面呈現(xiàn)時(shí)間最簡單的途徑就是減少貞面中組件的數(shù)量,并由此減少HTTP請(qǐng)求的敷上。1.1合并靜態(tài)文件網(wǎng)站中的靜態(tài)文件主要包括腳本和樣式表,如果遵循軟件工程的思想和模塊化原則將代碼分制成多個(gè)小文件,則會(huì)降低瀏覽器的性能，因?yàn)槊總€(gè)文件都會(huì)導(dǎo)致-一個(gè)額外的HTTP請(qǐng)求。如果將多個(gè)文件合并到一個(gè)文件中,可以減少HTTP請(qǐng)求的數(shù)量并縮短最終響應(yīng)時(shí)間,提高網(wǎng)站性能。常用的實(shí)現(xiàn)方式如下:<script srthtp://demo.com/a.js"><script srctp://demno.comb.js"><script srcthtp://emo.com/c.ja">將上述代碼調(diào)整為:<script stp:/:/demo.comn/combo.php?htp://emo.com/bjs&htp:/d/mo.como/cjo">/scri>j在combo.php中獲取所儒的文件名并進(jìn)行合并, -次發(fā)送到客戶端。這種方式大大的降低了HTTP請(qǐng)求數(shù),同時(shí)也減少了URL代碼量,這對(duì)于Web性能優(yōu)化來講至關(guān)重要。同時(shí)也不會(huì)對(duì)原有文件的部署產(chǎn)生影響,開發(fā)人員人可以采用原有模式進(jìn)行模塊化開發(fā)。1.2 CSS SpritesCSs Sprites是將頁面中一-些背景圖片合并到- -張單獨(dú)的圖片中，配合使用CSS的“background-position"和"background -repeat"屬性將背景圖片放置到HTML元素期望的位暨上,其中"backgound- position"可以用數(shù)字精確的定位出背景圖片的位置。使用CSsSpies大大減少了頁面對(duì)圖片的請(qǐng)求數(shù)目,能夠有效的減少HTTP請(qǐng)求的數(shù)量。但也同時(shí)增加了開發(fā)人員合并圖片的時(shí)間成本,后期的維護(hù)成本也同樣會(huì)增加。中國煤化工YHCNMHG收稿日期:2011-03-25作者簡介:康長安(1988-),男,中國礦業(yè)大學(xué)管理學(xué)院在讀研究生研究方向?yàn)槟茉唇?jīng)濟(jì)。本欄目責(zé)任編輯:馮蕾.......網(wǎng)絡(luò)遺訊及安全" 3811Computer Knowledge and Technloy電脯知識(shí)5$技術(shù)第7卷第16期(2011年6月)2減少網(wǎng)絡(luò)傳輸量表1國內(nèi)+大流行網(wǎng)站的壓縮情況網(wǎng)站壓縮類型原始文件大小 壓縮后文件大小 壓縮軍除了減少HTTP請(qǐng)求的數(shù)量，也可以通過減少每次ttp:// bridu. comBip679字節(jié)53.96%HITTP請(qǐng)求產(chǎn)生的響應(yīng)包的大小來加快響應(yīng)時(shí)間。htt://w. .comgzip212285字節(jié)54318字節(jié)74.41%2.1使用Gzip壓縮http://m. sima. com en gziphttp://w. tobao.com gzip189207字節(jié)36905 字節(jié)80.45%Grip是GNUzip的縮寫,它是-一個(gè)GNU自由軟件的文htp://mm. google.comhk gzip14846字節(jié)5789 字節(jié)61.00%0件壓縮程序用。HTTP 協(xié)議上的Gzip編碼是一種用來改進(jìn) h:// 16.czip306179字節(jié)89607 字節(jié)70. 73%htp:/r. sohu.cm298712字節(jié)70651 字節(jié)76.359Web應(yīng)用程序性能的技術(shù).日前被絕大部分Web服務(wù)器和http://m.2050. com26529字節(jié)8549 字節(jié)67.7%瀏覽器支持。在服務(wù)器端啟用Gzip后,-般能夠?qū)TMLht://mm. youku. comdeflote 456078字節(jié) 70168 字節(jié)84. 61%文檔樣式表和腳本等文件的大小壓縮至70%左右。http:/ww. ifeng. cm312837字節(jié)74331字節(jié)76. 24%2.2壓縮靜態(tài)文件在JavaSript腳本和CSS樣式表中.通常包含大量的空格、換行符和注釋等。這些內(nèi)容對(duì)于頁面來講是沒有作用的,而且會(huì)增大文件的體積,影響網(wǎng)絡(luò)傳輸。為此,可以利用一些方法和手段在產(chǎn)品上線前，對(duì)靜態(tài)文件進(jìn)行壓縮,壓縮的原理主要有以下幾點(diǎn):1)壓縮多余的空格和換行符;2)刪除注釋;3)把JavaSeripl中較長的變量名和方法名統(tǒng)- =替換為較短的名稱:成熟的壓縮工具有很多,例如老牌的JSMin和YUI Compressor(簡稱YC),它們都可以用來壓縮腳本文件,YC還可以處理CSS。Cogle Closure Compiler(簡稱GC)是Coogle推出-款腳本壓縮工具。GC與YC的不同之處在于YC只是一個(gè)壓縮器,而CC更像- -個(gè)編譯器,也就是說GC的壓縮并不僅僅是去除注釋和空白,還可以在保證代碼正確性的情況下進(jìn)-步改寫代碼,壓縮效果更高。2.3最小化HTML在網(wǎng)頁的HTML文檔中也通常會(huì)包含大量的空格.換行符,注釋,一般來講這些內(nèi)容對(duì)頁面的展示是沒有作用的,因此在將HTML.發(fā)送給客戶端之前可以采用相關(guān)技術(shù)移除這些沒必要的字符以減少網(wǎng)絡(luò)傳輸量。但是壓縮HTML也是存在風(fēng)險(xiǎn)的.例如pre標(biāo)簽里的空白符是不能去除的,IE條件注釋也是不可以刪除的。不過在特定系統(tǒng)中,風(fēng)險(xiǎn)可以規(guī)避或者通過測試排除。2.4使用縵存瀏覽器級(jí)存是為了加速頁面瀏覽速度,瀏覽器在用戶磁盤上對(duì)最近請(qǐng)求過的資源進(jìn)行存儲(chǔ),當(dāng)訪問者再次請(qǐng)求這個(gè)頁面時(shí),瀏覽器就可以從本地磁盤讀取文檔,這樣可以戰(zhàn)少HTTP請(qǐng)求數(shù)量和響應(yīng)的大小,使Web頁面加載得更快。因此合理配置緩存,將會(huì)對(duì)用戶瀏覽連度有很大的提升。2.5減少Cookie,采用服務(wù)端Session在每次瀏覽器與服務(wù)器發(fā)生通信時(shí),HTTP的頭部都包含了Cookie信息四，在有些請(qǐng)求中這些Cookie是有用的(例如驗(yàn)證是否登錄),有些則是沒有必要的(例如請(qǐng)求圖片)。Web頁面中通常包含大量的圖片.每次清求圖片都會(huì)包含該域所有的Cookie,如果Cookie過大的話,這將增加很多沒有必要的通訊內(nèi)容。為此.通常采用的策略是減少Cookie,采用服務(wù)端Session;另-種策略是通過合理的劃分主域?qū)㈧o態(tài)文件(圖片、腳本、樣式表等)放到無Cookie的域下。3瀏覽器渲染3.1將樣式表放到頂部瀏覽器誼染頁面的過程是流型的，即對(duì)HTML文檔邊加載邊匹配樣式表進(jìn)行誼染。如果將樣式表敏在文檔底部會(huì)先在加載HTMI.最后進(jìn)行渲染,這會(huì)導(dǎo)致在瀏覽器中阻止內(nèi)容逐步呈現(xiàn)的過程。因此將樣式表放在頂部head標(biāo)簽內(nèi)更有利于頁面渲染。實(shí)際上這-原則對(duì)頁面實(shí)際的加m載時(shí)間并沒有影響,其影響的是用戶的感覺。3.2將腳本放到底部瀏覽器加載組件的方式有兩種,一種是并行,另一種是阻塞方式。并行的方式是明顯的,即可以同時(shí)加載多張圖片或樣式表。圖1是測試頁面加載資源的HTTP瀑布圖,它顯示了3種資源:一個(gè)HTML文檔(indexphp) .4張圖片和一個(gè)JavaSeript腳本的加載情況。從中可以清晰的看到瀏覽器在加m載"one jng"和'"iwo.jpg"是并行的.再加載"basejs"時(shí)是阻塞的。瀏覽器加載并執(zhí)行完"bsejs"后才會(huì)加我另外兩張圖片。優(yōu)秀的體驗(yàn)是讓用戶盡快的看到頁面的視覺效果,并行的加載方式能夠更快的將頁面呈現(xiàn)給用戶,因此將阻塞加載的JaSrpt腳本移至頁面的底部,將會(huì)大大加快頁面的呈現(xiàn)速度.這將很大的提升用戶體驗(yàn)。3.3減少Refnow在CSS規(guī)范中有一個(gè)演染對(duì)象的概念,通常用一個(gè)“盒子“來表示,Morilla瀏覽器通過一個(gè)叫做frame的對(duì)象對(duì)盒子進(jìn)行操作。frame主要的動(dòng)作有三個(gè):2141日1J10. sm1)構(gòu)造frame,用來創(chuàng)建Dom樹;中國煤化工2) Reflow,以確定對(duì)象的位置(坐標(biāo))、寬度.高度:3)繪制,以便對(duì)象能顯示在屏幕上。YHCNMHG載總的來說“Relow"就是載人Dom樹.創(chuàng)建或更新frame結(jié)構(gòu)的-種過程。通過減少Reflow的開銷可以提高頁面性能，通常采用的方法如下:3812..網(wǎng)絡(luò)遇訊及安全.......本欄目責(zé)任編輯:馮蕾第7卷第16期(2011 年6月)Computer Knowedge and Technology電隨知識(shí)'技術(shù)1)如果事先能夠確定圖片寬高,最好在HTML或CSS中指定;若未指定寬高,圖片的載人會(huì)使頁面Relow,因?yàn)橐鶕?jù)圖片寬高來更新frame。2)使用"isbliy: hidden"替代"display: none”。在編寫-些常見的動(dòng)態(tài)效果時(shí), -般使用CSS的display來切換可見性,但這會(huì)產(chǎn)生reflow. 把元素設(shè)置為display: none ,相當(dāng)于把這個(gè)元素的frame銷毀了,再置回非none 時(shí),需要重新構(gòu)造frame,這就產(chǎn)生了reflow。 而另外一個(gè)切換可見性的屬性vibility則不存在rllo問題。3)一次性更改對(duì)Dom的操作結(jié)果,如下面的一段代碼:var ul = document.createElement("ul"),lil = document.createElement("Ii"),li2 = doeument.ceteElent'"Ii");document.bodyappendChild(u);ul.appendChild(il);ulappendChild(i2);這種方式效奉不高.因?yàn)槊看握{(diào)用appendChild方法都會(huì)更改Dom樹的結(jié)構(gòu)從而產(chǎn)生Reflow。如果調(diào)整為下面的代碼,則只會(huì)產(chǎn)生一次Reflow。lil = documentcreateElemen(Iti"),li2 = document.createElement("Ii");document.body.appendChild(u);4延遲加載4.1圉片延遲加載現(xiàn)在許多大型網(wǎng)站,-些圖片是在拉動(dòng)滾動(dòng)條的時(shí)候才加載的.這樣不但提高了用戶體驗(yàn),減少頁面加載時(shí)間,同時(shí)也減少了不少http請(qǐng)求。為了減少頁面首屏的展示時(shí)間,對(duì)圖片進(jìn)行延遲加載成為了常用的策略之一-。所謂圖片延遲加載,就是將屏幕之外的圖片隱藏掉不讓其加載,等到用戶滾功屏幕時(shí)再加載響應(yīng)的圖片。代碼如下:隱藏圖片的部分代碼://placeholder是一張非常小的圖片,主要為了防止加載時(shí)出現(xiàn)紅色叉。var placeholder = htp://demo.com/placholder.png",img = document.getElementById( map);ing.ceAttribute( original', ing.src);img.sre = placeholder,顯示圖片的部分代碼:var img = document.getElementById( "map);img.src = imgetAtribute( oniginal);4.2圈片預(yù)加載用戶在瀏覽頁面的時(shí)候.瀏覽器不是每時(shí)每刻都在工作的。如果能夠根據(jù)分析用戶習(xí)慣,預(yù)知用戶操作,利用瀏覽器“空閑時(shí)間”將預(yù)知操作中所需的用片提前加載下來,這將會(huì)改善用戶體驗(yàn)，提高頁面性能。通過下面的方法可以將圖片預(yù)先放釗瀏覽器的級(jí)存當(dāng)中,用戶瀏覽貞面時(shí)會(huì)大大減少等待時(shí)間。var sre = hp/://m.co/map.png"，11 預(yù)知頁面中的圖片地址img = new lmg);img.src = src;4.3內(nèi)容延遲加載Web頁面中有許多內(nèi)容是不需要在頁面初次加載時(shí)就需要的.例如選項(xiàng)卡里的內(nèi)容。當(dāng)用戶切換到響應(yīng)的Tab時(shí),再通過Ajax等異步方法加載內(nèi)容,實(shí)現(xiàn)內(nèi)容的延遲和按需加載。這種方法已日趨成熟,在很多大型網(wǎng)站中已大量使用,大大增加了用戶體驗(yàn)性。4.4適時(shí)加載腳本和樣式表-張普通頁面通常都會(huì)包括很多的腳本和樣式表,大小一般都會(huì)在幾百K,甚至更大。-般來講某一時(shí)刻貞面所需的腳本和樣式表卻很小，當(dāng)用戶的某些操作需要相關(guān)腳本或樣式表時(shí)再去加載,這里就引出了另一個(gè)提高Web性能的策略,即使用JavaSeript動(dòng)態(tài)加載腳本和樣式表。5創(chuàng)新社會(huì)和行業(yè)的進(jìn)步需要都需要以技術(shù)創(chuàng)新作為驅(qū)動(dòng),技術(shù)創(chuàng)新是具有創(chuàng)造性的行為,必然會(huì)遇到米曾遇到的問題,這就帶來了不確定性和風(fēng)險(xiǎn).因此創(chuàng)新是需要勇氣和智慧的。對(duì)于互聯(lián)網(wǎng)也同樣如此,中國煤化工時(shí)代的來臨。近些年在Web性能優(yōu)化上的主要代表應(yīng)用有Facebook的Quickling、PageCache、BigP_WebP等。通過技術(shù)創(chuàng)新也讓他們獲益匪淺.例如Facebok通過Quickling將所有的用戶點(diǎn)擊訪C. N M H G大量的服務(wù)器端重復(fù)計(jì)算和客戶端的重復(fù)渲染。數(shù)據(jù)顯示,使用了這個(gè)技術(shù)以后,加載時(shí)間降低了10% ~30% ,生成時(shí)間降低了20%- 30%。(下轉(zhuǎn)第3838頁)本欄目責(zé)任編輯:馮蕾網(wǎng)絡(luò)通訊及安全" 3813Computer Knowledge and Technlgy電皆知識(shí)與技術(shù)第7卷第16期(2011年6月)delete m, pListenSocket;m_ pListenSocket = NULI;void CMyFiveView:Onsurrend0i(m. bLink)m_ _bTum = FALSE;int bffr(3)={SURREND,15,15);MessageBox("你認(rèn)輸了");}},void CMyFiveView:InChesint x, int y)//對(duì)方發(fā)送的棋子位置信息m bTum = TRUE;m_ nChesstatuslx]Jy}= -1*m. nColor;Invalidate0;if(IsWin(xy)m_ bTum = FALSE;i(m_ MChsstastsxyI]=)MessageBox("黑方獲勝";elseMessageBox(" 白方獲勝");}}void CMyFiveView:OnNewGame0if(m. bLink)m _bTum = FAISE;int buffer[3)=(NEWGAME,15,15);m_pClieniSocket- >Sen6dbfreiecfouferlvoid CMyFiveView:InitChessBoard0for(int i=0;i