基于前端的Web性能優(yōu)化

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