DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 提高網站性能中內容有關的10條原則
提高網站性能中內容有關的10條原則
編輯:關於網頁技巧     

英文地址:http://developer.yahoo.com/performance/rules.html

Yahoo!的Exceptional Performance團隊為改善Web性能帶來最佳實踐。他們為此進行了一系列的實驗、開發了各種工具、寫了大量的文章和博客並在各種會議上參與探討。最佳實踐的核心就是旨在提高網站性能。

Excetional Performance團隊總結出了一系列可以提高網站速度的方法。可以分為7大類34條。包括內容、服務器、cookie、CSS、JavaScript、圖片、移動應用等七部分。

其中內容部分一共十條建議:

一、內容部分

  1. 盡量減少HTTP請求
  2. 減少DNS查找
  3. 避免跳轉
  4. 緩存Ajxa
  5. 推遲加載
  6. 提前加載
  7. 減少DOM元素數量
  8. 用域名劃分頁面內容
  9. 減小iframe的大小
  10. 避免404錯誤

1、盡量減少HTTP請求次數

終端用戶響應的時間中,有80%用於下載各項內容。這部分時間包括下載頁面中的圖像、樣式表、腳本、Flash等。通過減少頁面中的元素可以減少HTTP請求的次數。這是提高網頁速度的關鍵步驟。

減少頁面組件的方法其實就是簡化頁面設計。那麼有沒有一種方法既能保持頁面內容的豐富性又能達到加快響應時間的目的呢?這裡有幾條減少HTTP請求次數同時又可能保持頁面內容豐富的技術。

合並文件是通過把所有的腳本放到一個文件中來減少HTTP請求的方法,如可以簡單地把所有的CSS文件都放入一個樣式表中。當腳本或者樣式表在不同頁面中使用時需要做不同的修改,這可能會相對麻煩點,但即便如此也要把這個方法作為改善頁面性能的重要一步。

CSS Sprites 是減少圖像請求的有效方法。把所有的背景圖像都放到一個圖片文件中,然後通過CSS的background-image和background-position屬性來顯示圖片的不同部分;

圖片地圖是把多張圖片整合到一張圖片中。雖然文件的總體大小不會改變,但是可以減少HTTP請求次數。圖片地圖只有在圖片的所有組成部分在頁面中是緊挨在一起的時候才能使用,如導航欄。確定圖片的坐標和可能會比較繁瑣且容易出錯,同時使用圖片地圖導航也不具有可讀性,因此不推薦這種方法;

內聯圖像是使用 data:URL scheme 的方法把圖像數據加載頁面中。這可能會增加頁面的大小。把內聯圖像放到樣式表(可緩存)中可以減少HTTP請求同時又避免增加頁面文件的大小。但是內聯圖像現在還沒有得到主流浏覽器的支持。點擊這裡查看網頁制作教程頻道內容

減少頁面的HTTP請求次數是你首先要做的一步。這是改進首次訪問用戶等待時間的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所說,HTTP請求在無緩存情況下占去了40%到60%的響應時間。讓那些初次訪問你網站的人獲得更加快速的體驗吧!

2、減少DNS查找次數

域名系統(DNS)提供了域名和IP的對應關系,就像電話本中人名和他們的電話號碼的關系一樣。當你在浏覽器地址欄中輸入www.dudo.org時,DNS解析服務器就會返回這個域名對應的IP地址。DNS解析的過程同樣也是需要時間的。一般情況下返回給定域名對應的IP地址會花費20到120毫秒的時間。而且在這個過程中浏覽器什麼都不會做直到DNS查找完畢。

緩存DNS查找可以改善頁面性能。這種緩存需要一個特定的緩存服務器,這種服務器一般屬於用戶的ISP提供商或者本地局域網控制,但是它同樣會在用戶使用的計算機上產生緩存。DNS信息會保留在操作系統的DNS緩存中(微軟Windows系統中DNS Client Service)。大多數浏覽器有獨立於操作系統以外的自己的緩存。由於浏覽器有自己的緩存記錄,因此在一次請求中它不會受到操作系統的影響。點擊這裡查看網頁制作教程頻道內容

Internet Explorer默認情況下對DNS查找記錄的緩存時間為30分鐘,它在注冊表中的鍵值為DnsCacheTimeout。Firefox對DNS的查找記錄緩存時間為1分鐘,它在配置文件中的選項為network.dnsCacheExpiration(Fasterfox把這個選項改為了1小時)。

當客戶端中的DNS緩存都為空時(浏覽器和操作系統都為空),DNS查找的次數和頁面中主機名的數量相同。這其中包括頁面中URL、圖片、腳本文件、樣式表、Flash對象等包含的主機名。減少主機名的數量可以減少DNS查找次數。

減少主機名的數量還可以減少頁面中並行下載的數量。減少DNS查找次數可以節省響應時間,但是減少並行下載卻會增加響應時間。我的指導原則是把這些頁面中的內容分割成至少兩部分但不超過四部分。這種結果就是在減少DNS查找次數和保持較高程度並行下載兩者之間的權衡了。

3、避免跳轉

跳轉是使用301和302代碼實現的。下面是一個響應代碼為301的HTTP頭:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏覽器會把用戶指向到Location中指定的URL。頭文件中的所有信息在一次跳轉中都是必需的,內容部分可以為空。不管他們的名稱,301和302響應都不會被緩存除非增加一個額外的頭選項,如Expires或者Cache-Control來指定它緩存。<meat />元素的刷新標簽和JavaScript也可以實現URL的跳轉,但是如果你必須要跳轉的時候,最好的方法就是使用標准的3XXHTTP狀態代碼,這主要是為了確保“後退”按鈕可以正確地使用。

但是要記住跳轉會降低用戶體驗。在用戶和HTML文檔中間增加一個跳轉,會拖延頁面中所有元素的顯示,因為在HTML文件被加載前任何文件(圖像、Flash等)都不會被下載。

有一種經常被網頁開發者忽略卻往往十分浪費響應時間的跳轉現象。這種現象發生在當URL本該有斜槓(/)卻被忽略掉

123下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved