WEB前端優(yōu)化主要分頁(yè)面內(nèi)容優(yōu)化和服務(wù)器優(yōu)化，本篇主要介紹內(nèi)容優(yōu)化，服務(wù)器端的優(yōu)化以后再講。

頁(yè)面內(nèi)容優(yōu)化的四大原則是：降低請(qǐng)求數(shù)、減少交互通信量、合理利用“并行”、節(jié)約系統(tǒng)消耗。

一、先看一組數(shù)據(jù)；下面是打開(kāi)一個(gè)網(wǎng)站時(shí)，用firebug測(cè)得數(shù)據(jù)：

從上面的數(shù)據(jù)可以看出，網(wǎng)頁(yè)打開(kāi)時(shí)，主要時(shí)間（約90%）在下載圖片、CSS和JS等各項(xiàng)資源。這么多的加載資源勢(shì)必導(dǎo)致HTTP請(qǐng)求數(shù)增加，那么精減冗余的HTTP請(qǐng)求數(shù)，則會(huì)提升網(wǎng)頁(yè)的加載速度。那么如何在不影響頁(yè)面展示效果的基礎(chǔ)上，減少HTTP請(qǐng)教數(shù)呢？

1、合并同類(lèi)文件

把分散的CSS樣式或者JS腳本等合并到同一個(gè)文件中，則能減少HTTP請(qǐng)求數(shù)。同樣，對(duì)于腳本也可以這樣處理。如下圖：

2、CSS sprites

Css sprites又叫css精靈，它能把所有的背景圖片整合到一個(gè)圖片文件中，然后利用CSS的background-image和background-position屬性來(lái)顯示圖片的不同部分。通過(guò)這種方式，可以降低圖片的請(qǐng)求次數(shù)。需要注意的是：在當(dāng)前我國(guó)的網(wǎng)速而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無(wú)src="/upload/pic19/sprite_ltdrk_20091211_ltr.png

雅虎使用的css-sprites

提醒：不能濫用這項(xiàng)技術(shù)，因?yàn)樯婕昂芏鄨D片，使用不當(dāng)，會(huì)增加后期維護(hù)的難度；同時(shí)，不能將所有圖片合在一起，只拼合通用的即可，如上圖雅虎圖片中的圖標(biāo)。鑒于古老的有一利必有一弊原則，整合后的圖片減少的請(qǐng)求次數(shù)，但增加了首次加載的時(shí)間，如果能在系統(tǒng)架構(gòu)中把緩存策略做好，這項(xiàng)技術(shù)可以備用。

3、精簡(jiǎn)重復(fù)腳本

一個(gè)JS在同一頁(yè)面中引用多數(shù)，會(huì)影響頁(yè)面的性能。因?yàn)橘樣嗟腏S不僅會(huì)增加JS運(yùn)算，還順便增加了HTTP請(qǐng)求。注：火狐瀏覽器可以智能省略重復(fù)的JS發(fā)起的多余的HTPP請(qǐng)求，但I(xiàn)E瀏覽器就會(huì)規(guī)規(guī)矩矩地一一執(zhí)行。鑒于IE目前在瀏覽器市場(chǎng)中的比重，這個(gè)問(wèn)題應(yīng)該解決的。

二、減少交互通信量

上面的表格說(shuō)明了一個(gè)情況：頁(yè)面內(nèi)需要下載的資源跟響應(yīng)時(shí)間是成正比的，客戶端跟服務(wù)器交互的通信量越大，響應(yīng)時(shí)間越長(zhǎng)。有效地降低通信量就能提升網(wǎng)站性能。

1、壓縮技術(shù)

（1）壓縮CSS和JS。

通過(guò)減小這類(lèi)文件的體積，從而提升下載速度。最簡(jiǎn)單的壓縮方法是刪除冗余信息，比如去年CSS和腳本中的注釋、多余的空白符（換行符、Tab縮進(jìn)）等；另外還有語(yǔ)法壓縮和文本混淆的方式，通過(guò)類(lèi)似字典的方式，用簡(jiǎ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ì)必影響瀏覽器的加載速度。在設(shè)計(jì)圖片時(shí)，注意把圖片保存為web格式。網(wǎng)站普通采用圖片格式是PNG、JPG、GIF三種，選擇合適的圖片類(lèi)型也有助于網(wǎng)站性能的提高。

PNG 格式比GIF的體積小，且支持Alpha通道，但不支持動(dòng)畫(huà)

JPG格式壓縮率比較高，適合于照片類(lèi)的圖片

GIF只有256色，不宜表現(xiàn)色彩豐富的圖像、小圖標(biāo)、徽標(biāo)等，同時(shí)GIF還支持小動(dòng)畫(huà)

可以根據(jù)具體的圖片類(lèi)型，選擇合適的圖片格式。

同樣，Page Speed里也有對(duì)圖片優(yōu)化的建議。

提醒：

推遲加載內(nèi)容 把你網(wǎng)站的內(nèi)容按客戶需求的重要性分為兩部分，把客戶需要的信息，比如頁(yè)面內(nèi)容、網(wǎng)站導(dǎo)航等先加載，而一些特效類(lèi)的內(nèi)容后加載。

對(duì)靜態(tài)內(nèi)容使用無(wú)Cookie請(qǐng)求。當(dāng)瀏覽器同時(shí)請(qǐng)求一張靜態(tài)圖片和發(fā)送cookie時(shí)，服務(wù)器對(duì)于這類(lèi)cookie不會(huì)做任何處理，即這些cookie請(qǐng)求是多余的。更壞的消息時(shí)，服務(wù)器會(huì)認(rèn)為這類(lèi)請(qǐng)求是由于某些負(fù)面因素而創(chuàng)建的網(wǎng)絡(luò)傳輸，所以很有必要確保靜態(tài)內(nèi)容的請(qǐng)求是無(wú)cookie的請(qǐng)求?？梢园阉械撵o態(tài)內(nèi)容存放在一個(gè)子域名內(nèi)。比如域名是www.exploresem.com，則把靜態(tài)內(nèi)容存放在 style.exploresem.comh上，同時(shí)注意，cookie要設(shè)子域名www.exploresem.com上。如果調(diào)在頂級(jí)域名上，style.exploresem.comh的請(qǐng)教也會(huì)包含cookie，結(jié)果就事與愿違了。如果不方便在子域名上做上述設(shè)置，可以買(mǎi)一個(gè)新域名來(lái)來(lái)存放靜態(tài)內(nèi)容。當(dāng)然，這個(gè)新域名也必須是未設(shè)置cookie的。

三 合理利用并行

1、重定向要盡量避免，如果必須要重定向，也是用301永久重定向，慎用302臨時(shí)重定向。

HTTP/1.1 301 Moved Permanently

Location:http://example.com/next.url

Content-Type:text/html

以上代碼是301重定向的響應(yīng)碼?？梢杂没鸷寮﨟TTPfox查看網(wǎng)頁(yè)頭部信息。

301重定向會(huì)拖延頁(yè)面中元素地加載，因?yàn)榧虞dHTML文件前，不會(huì)下載任何文件。

提醒：當(dāng)url結(jié)尾本該有斜杠卻被省略的情況很普遍。像訪問(wèn)http://www.example.com/photo 這類(lèi)url時(shí)，大部分網(wǎng)站返回的是404頁(yè)面，這對(duì)用戶很不友好，應(yīng)該做一個(gè)重定向至http://www.example.com/photo/，Apache服務(wù)器中可以用mod_rewrite來(lái)改寫(xiě)url，杜絕此類(lèi)情況。

2、慎用iframe

搜索引擎不識(shí)別iframe，而且它會(huì)阻止頁(yè)面其他內(nèi)容的加載，從而也拖慢了網(wǎng)頁(yè)整體的加載速度。除非你有很濃烈的懷舊情節(jié)或者叛逆情懷，不然，請(qǐng)慎用iframe。

3、把樣式表置于頂部

把樣式表放到HTML的 內(nèi)部，在頁(yè)面加載時(shí)，就會(huì)有次序地顯示頁(yè)面內(nèi)容，有助于頁(yè)面快速有序地呈現(xiàn)。若樣式表在底部，IE等一部分瀏覽器，會(huì)暫時(shí)停止加載頁(yè)面，先去讀取底部的樣式表來(lái)，內(nèi)容的有序呈現(xiàn)將被打破，不利于用戶體驗(yàn)。

4、HTML中腳本放在樣式后面

在下載腳本時(shí)，瀏覽器要確認(rèn)腳本中是否有動(dòng)作修改了頁(yè)面的結(jié)構(gòu)或者內(nèi)容，這樣，就會(huì)暫時(shí)阻止其他內(nèi)容的加載。

四、節(jié)約系統(tǒng)消耗

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

CSS表達(dá)式從IE5瀏覽器開(kāi)始就支持此，它是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大方法，但也存在著一定的危險(xiǎn)性。我們看下面的代碼：

background-color: expression( (new Date()).getHours()%2 ? ”#F00″ : ”#00F” );

上面的代碼是使用CSS Expression，實(shí)現(xiàn)隔一個(gè)小時(shí)切換一次背景顏色。

CSS Expression的問(wèn)題就在于它的計(jì)算頻率要比想象的多出很多。不僅僅是在頁(yè)面顯示和縮放時(shí)，就是在頁(yè)面滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次。給CSS Expression增加一個(gè)計(jì)數(shù)器可以跟蹤表達(dá)式的計(jì)算頻率。在頁(yè)面中隨便移動(dòng)鼠標(biāo)都可以輕松達(dá)到10000次以上的計(jì)算量。當(dāng)需要實(shí)現(xiàn)某些效果控制時(shí)，可以用更擅長(zhǎng)此技能的JS。

2、避免使用濾鏡

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個(gè)濾鏡的問(wèn)題在于瀏覽器加載圖片時(shí)它會(huì)終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。在每一個(gè)元素（不僅僅是圖片）它都會(huì)運(yùn)算一次，增加了內(nèi)存開(kāi)支，因此它的問(wèn)題是多方面的。

完全避免使用AlphaImageLoader的好方法就是使用PNG8格式來(lái)代替，這種格式能在IE中很好地工作。

網(wǎng)頁(yè)題目：WEB標(biāo)準(zhǔn)化之網(wǎng)頁(yè)內(nèi)容篇
瀏覽路徑：http://jinyejixie.com/news47/215997.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、做網(wǎng)站、網(wǎng)站策劃、電子商務(wù)、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)