WEB標準化之網頁內容篇

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

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

一、先看一組數(shù)據(jù)；下面是打開一個網站時，用firebug測得數(shù)據(jù)：

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

1、合并同類文件

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

2、CSS sprites

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

雅虎使用的css-sprites

提醒：不能濫用這項技術，因為涉及很多圖片，使用不當，會增加后期維護的難度；同時，不能將所有圖片合在一起，只拼合通用的即可，如上圖雅虎圖片中的圖標。鑒于古老的有一利必有一弊原則，整合后的圖片減少的請求次數(shù)，但增加了首次加載的時間，如果能在系統(tǒng)架構中把緩存策略做好，這項技術可以備用。

3、精簡重復腳本

一個JS在同一頁面中引用多數(shù)，會影響頁面的性能。因為贅余的JS不僅會增加JS運算，還順便增加了HTTP請求。注：火狐瀏覽器可以智能省略重復的JS發(fā)起的多余的HTPP請求，但IE瀏覽器就會規(guī)規(guī)矩矩地一一執(zhí)行。鑒于IE目前在瀏覽器市場中的比重，這個問題應該解決的。

二、減少交互通信量

上面的表格說明了一個情況：頁面內需要下載的資源跟響應時間是成正比的，客戶端跟服務器交互的通信量越大，響應時間越長。有效地降低通信量就能提升網站性能。

1、壓縮技術

（1）壓縮CSS和JS。

通過減小這類文件的體積，從而提升下載速度。最簡單的壓縮方法是刪除冗余信息，比如去年CSS和腳本中的注釋、多余的空白符（換行符、Tab縮進）等；另外還有語法壓縮和文本混淆的方式，通過類似字典的方式，用簡單的字母代替代碼中的變量。

壓縮專門工具，CSS壓縮工具有Page Speed、YUI Compressor；JS壓縮工具有中JSMIn、Page Speed、YUI Compressor、JavaScriptCompressor等。

下面是打開一個網頁后Page Speed給出的JS壓縮和CSS壓縮建議。

（2）優(yōu)化圖片

圖片的大小跟其質量成正比，大體積的圖片，勢必影響瀏覽器的加載速度。在設計圖片時，注意把圖片保存為web格式。網站普通采用圖片格式是PNG、JPG、GIF三種，選擇合適的圖片類型也有助于網站性能的提高。

PNG 格式比GIF的體積小，且支持Alpha通道，但不支持動畫

JPG格式壓縮率比較高，適合于照片類的圖片

GIF只有256色，不宜表現(xiàn)色彩豐富的圖像、小圖標、徽標等，同時GIF還支持小動畫

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

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

提醒：

推遲加載內容 把你網站的內容按客戶需求的重要性分為兩部分，把客戶需要的信息，比如頁面內容、網站導航等先加載，而一些特效類的內容后加載。

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

三 合理利用并行

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

HTTP/1.1 301 Moved Permanently

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

Content-Type:text/html

以上代碼是301重定向的響應碼?？梢杂没鸷寮﨟TTPfox查看網頁頭部信息。

301重定向會拖延頁面中元素地加載，因為加載HTML文件前，不會下載任何文件。

提醒：當url結尾本該有斜杠卻被省略的情況很普遍。像訪問http://www.example.com/photo 這類url時，大部分網站返回的是404頁面，這對用戶很不友好，應該做一個重定向至http://www.example.com/photo/，Apache服務器中可以用mod_rewrite來改寫url，杜絕此類情況。

2、慎用iframe

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

3、把樣式表置于頂部

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

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

在下載腳本時，瀏覽器要確認腳本中是否有動作修改了頁面的結構或者內容，這樣，就會暫時阻止其他內容的加載。

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

1、避免使用CSS表達式（CSS Expression）

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

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

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

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

2、避免使用濾鏡

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

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

網頁題目：WEB標準化之網頁內容篇
瀏覽路徑：http://www.bm7419.com/news47/215997.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、動態(tài)網站、做網站、網站策劃、電子商務、網站營銷

廣告

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