WEB前端優(yōu)化主要分頁(yè)面內容優(yōu)化和服務(wù)器優(yōu)化，本篇主要介紹內容優(yōu)化，服務(wù)器端的優(yōu)化以后再講。
頁(yè)面內容優(yōu)化的四大原則是：降低請求數、減少交互通信量、合理利用“并行”、節約系統消耗。
一、先看一組數據；下面是打開(kāi)一個(gè)網(wǎng)站時(shí)，用firebug測得數據：
從上面的數據可以看出，網(wǎng)頁(yè)打開(kāi)時(shí)，主要時(shí)間（約90%）在下載圖片、CSS和JS等各項資源。這么多的加載資源勢必導致HTTP請求數增加，那么精減冗余的HTTP請求數，則會(huì )提升網(wǎng)頁(yè)的加載速度。那么如何在不影響頁(yè)面展示效果的基礎上，減少HTTP請教數呢？
1、合并同類(lèi)文件
把分散的CSS樣式或者JS腳本等合并到同一個(gè)文件中，則能減少HTTP請求數。同樣，對于腳本也可以這樣處理。如下圖：
2、CSS sprites
Css sprites又叫css精靈，它能把所有的背景圖片整合到一個(gè)圖片文件中，然后利用CSS的background-image和background-position屬性來(lái)顯示圖片的不同部分。通過(guò)這種方式，可以降低圖片的請求次數。需要注意的是：在當前我國的網(wǎng)速而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無(wú)需顧忌這個(gè)問(wèn)題。
如雅虎首頁(yè)的圖片就使用了這種方式，大家可以通過(guò)firefox的插件Developer查看：
http://l1.yimg.com/a/i/ww/met/sprite_trough_01222009b_ltr.gif
http://l1.yimg.com/a/i/ww/met/sprite_ltdrk_20091211_ltr.png
雅虎使用的css-sprites
提醒：不能濫用這項技術(shù)，因為涉及很多圖片，使用不當，會(huì )增加后期維護的難度；同時(shí)，不能將所有圖片合在一起，只拼合通用的即可，如上圖雅虎圖片中的圖標。鑒于古老的有一利必有一弊原則，整合后的圖片減少的請求次數，但增加了首次加載的時(shí)間，如果能在系統架構中把緩存策略做好，這項技術(shù)可以備用。
3、精簡(jiǎn)重復腳本
一個(gè)JS在同一頁(yè)面中引用多數，會(huì )影響頁(yè)面的性能。因為贅余的JS不僅會(huì )增加JS運算，還順便增加了HTTP請求。注：火狐瀏覽器可以智能省略重復的JS發(fā)起的多余的HTPP請求，但IE瀏覽器就會(huì )規規矩矩地一一執行。鑒于IE目前在瀏覽器市場(chǎng)中的比重，這個(gè)問(wèn)題應該解決的。
二、減少交互通信量
上面的表格說(shuō)明了一個(gè)情況：頁(yè)面內需要下載的資源跟響應時(shí)間是成正比的，客戶(hù)端跟服務(wù)器交互的通信量越大，響應時(shí)間越長(cháng)。有效地降低通信量就能提升網(wǎng)站性能。
1、壓縮技術(shù)
（1）壓縮CSS和JS。
通過(guò)減小這類(lèi)文件的體積，從而提升下載速度。最簡(jiǎn)單的壓縮方法是刪除冗余信息，比如去年CSS和腳本中的注釋、多余的空白符（換行符、Tab縮進(jìn)）等；另外還有語(yǔ)法壓縮和文本混淆的方式，通過(guò)類(lèi)似字典的方式，用簡(jiǎn)單的字母代替代碼中的變量。
壓縮專(zhuān)門(mén)工具，CSS壓縮工具有Page Speed、YUI Compressor；JS壓縮工具有中JSMIn、Page Speed、YUI Compressor、JavaScriptCompressor等。
下面是打開(kāi)一個(gè)網(wǎng)頁(yè)后Page Speed給出的JS壓縮和CSS壓縮建議。
2）優(yōu)化圖片
圖片的大小跟其質(zhì)量成正比，大體積的圖片，勢必影響瀏覽器的加載速度。在設計圖片時(shí)，注意把圖片保存為web格式。網(wǎng)站普通采用圖片格式是PNG、JPG、GIF三種，選擇合適的圖片類(lèi)型也有助于網(wǎng)站性能的提高。
PNG 格式比GIF的體積小，且支持Alpha通道，但不支持動(dòng)畫(huà)
JPG格式壓縮率比較高，適合于照片類(lèi)的圖片
GIF只有256色，不宜表現色彩豐富的圖像、小圖標、徽標等，同時(shí)GIF還支持小動(dòng)畫(huà)
可以根據具體的圖片類(lèi)型，選擇合適的圖片格式。
同樣，Page Speed里也有對圖片優(yōu)化的建議。
提醒：
| <img width=”300″ height=”300″ src=”apple.gif” alt=”red apple” /> |
在上面HTML代碼里，對圖片的大小做了設定，那么在上傳實(shí)際的圖片時(shí)，也應該是300*300，而不應該把一個(gè)大尺寸的圖片縮小后塞進(jìn)去。
（3）減小Cookie體積
Cookie用于客戶(hù)端的權限驗證和個(gè)性化身份等。cookie內的有關(guān)信息是通過(guò)HTTP頭文件在web服務(wù)器和瀏覽器之間進(jìn)行交流的。所以壓縮cookie，用提升用戶(hù)請求的響應時(shí)間。
2、合理利用緩存
（1）把JS和CSS放到外部文件中去。
因為外部的JS和CSS文件能在瀏覽器中產(chǎn)生緩存，同時(shí)這部分代碼的外放，減少了HTML的體積。
（2）緩存Ajax。
Ajax的優(yōu)點(diǎn)是能實(shí)現web前端與服務(wù)器后端的異步通信，讓用戶(hù)在不刷新頁(yè)面的情況下獲得數據，這樣既帶來(lái)了良好的用戶(hù)體驗，又快速得到異步的HTTP響應。要想提高Ajax的性能，就要使其具有可緩存性。
（3）降低不必要的通信量
一個(gè)長(cháng)期運行維護的網(wǎng)站，因為網(wǎng)站改版等因素，勢必會(huì )產(chǎn)生一些無(wú)用的JS、CSS或者其他腳本文件，這時(shí)可用Page Speed檢測網(wǎng)站，根據它提供的建議，合理的進(jìn)行修改或者直接刪除。
推遲加載內容 把你網(wǎng)站的內容按客戶(hù)需求的重要性分為兩部分，把客戶(hù)需要的信息，比如頁(yè)面內容、網(wǎng)站導航等先加載，而一些特效類(lèi)的內容后加載。
對靜態(tài)內容使用無(wú)Cookie請求。當瀏覽器同時(shí)請求一張靜態(tài)圖片和發(fā)送cookie時(shí)，服務(wù)器對于這類(lèi)cookie不會(huì )做任何處理，即這些cookie請求是多余的。更壞的消息時(shí)，服務(wù)器會(huì )認為這類(lèi)請求是由于某些負面因素而創(chuàng )建的網(wǎng)絡(luò )傳輸，所以很有必要確保靜態(tài)內容的請求是無(wú)cookie的請求?？梢园阉械撵o態(tài)內容存放在一個(gè)子域名內。比如域名是www.exploresem.com，則把靜態(tài)內容存放在 style.exploresem.comh上，同時(shí)注意，cookie要設子域名www.exploresem.com上。如果調在頂級域名上，style.exploresem.comh的請教也會(huì )包含cookie，結果就事與愿違了。如果不方便在子域名上做上述設置，可以買(mǎi)一個(gè)新域名來(lái)來(lái)存放靜態(tài)內容。當然，這個(gè)新域名也必須是未設置cookie的。
三 合理利用并行
1、重定向要盡量避免，如果必須要重定向，也是用301永久重定向，慎用302臨時(shí)重定向。
|
HTTP/1.1 301 Moved Permanently Location:http://example.com/next.url Content-Type:text/html |
以上代碼是301重定向的響應碼?？梢杂没鸷寮﨟TTPfox查看網(wǎng)頁(yè)頭部信息。
301重定向會(huì )拖延頁(yè)面中元素地加載，因為加載HTML文件前，不會(huì )下載任何文件。
提醒：當url結尾本該有斜杠卻被省略的情況很普遍。像訪(fǎng)問(wèn)http://www.example.com/photo 這類(lèi)url時(shí)，大部分網(wǎng)站返回的是404頁(yè)面，這對用戶(hù)很不友好，應該做一個(gè)重定向至http://www.example.com/photo/，Apache服務(wù)器中可以用mod_rewrite來(lái)改寫(xiě)url，杜絕此類(lèi)情況。
2、慎用iframe
搜索引擎不識別iframe，而且它會(huì )阻止頁(yè)面其他內容的加載，從而也拖慢了網(wǎng)頁(yè)整體的加載速度。除非你有很濃烈的懷舊情節或者叛逆情懷，不然，請慎用iframe。
3、把樣式表置于頂部
把樣式表放到HTML的<head> </head>內部，在頁(yè)面加載時(shí)，就會(huì )有次序地顯示頁(yè)面內容，有助于頁(yè)面快速有序地呈現。若樣式表在底部，IE等一部分瀏覽器，會(huì )暫時(shí)停止加載頁(yè)面，先去讀取底部的樣式表來(lái)，內容的有序呈現將被打破，不利于用戶(hù)體驗。
4、HTML中腳本放在樣式后面
在下載腳本時(shí)，瀏覽器要確認腳本中是否有動(dòng)作修改了頁(yè)面的結構或者內容，這樣，就會(huì )暫時(shí)阻止其他內容的加載。
四、節約系統消耗
1、避免使用CSS表達式（CSS Expression）
CSS表達式從IE5瀏覽器開(kāi)始就支持此，它是動(dòng)態(tài)設置CSS屬性的強大方法，但也存在著(zhù)一定的危險性。我們看下面的代碼：
| background-color: expression( (new Date()).getHours()%2 ? ”#F00″ : ”#00F” ); |
上面的代碼是使用CSS Expression，實(shí)現隔一個(gè)小時(shí)切換一次背景顏色。
CSS Expression的問(wèn)題就在于它的計算頻率要比想象的多出很多。不僅僅是在頁(yè)面顯示和縮放時(shí)，就是在頁(yè)面滾動(dòng)、乃至移動(dòng)鼠標時(shí)都會(huì )要重新計算一次。給CSS Expression增加一個(gè)計數器可以跟蹤表達式的計算頻率。在頁(yè)面中隨便移動(dòng)鼠標都可以輕松達到10000次以上的計算量。當需要實(shí)現某些效果控制時(shí)，可以用更擅長(cháng)此技能的JS。
2、避免使用濾鏡
IE獨有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個(gè)濾鏡的問(wèn)題在于瀏覽器加載圖片時(shí)它會(huì )終止內容的呈現并且凍結瀏覽器。在每一個(gè)元素（不僅僅是圖片）它都會(huì )運算一次，增加了內存開(kāi)支，因此它的問(wèn)題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來(lái)代替，這種格式能在IE中很好地工作。
鄭州網(wǎng)站建設 | 鄭州網(wǎng)絡(luò )公司 | 鄭州網(wǎng)站制作 | 鄭州做網(wǎng)站 開(kāi)拓者科技 www.cnmcafee.cn
技術(shù)創(chuàng )造價(jià)值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開(kāi)拓者電子科技有限公司 All Rights Reserved