《高性能網站建設指南》讀書筆記

<b>規則</b><b>1</b><b>－減少</b><b>HTTP</b><b>請求</b><b></b>

<b></b>

請求網頁時隻有10％－20％的最終使用者響應時間花在接收請求的HTMl文檔上，剩下的80％－90％時間花在為HTML文檔所引用的所有組建（圖檔，腳本，樣式表，Flash等）進行的HTTP請求上，是以改善響應時間的最簡單途徑就是減少元件的數量，并由此減少HTTP請求數量。

圖檔地圖：我們可以将多個圖檔完成的功能，使用一個圖檔，根據的不同區域來響應不應的請求。

合并腳本和樣式表：每個檔案都會導緻一個HTP請求，盡量将css和js合并到一個檔案中。 

<b>規則</b><b>2</b><b>－使用内容釋出網絡</b><b></b>

在多個地理位置不同的伺服器上部署内容，如果web伺服器離擁護更近，則一個http請求的響應時間将縮短，如果元件web伺服器離擁護更近，則多個http請求的響應時間将縮短。有很多公司提供CDN（内容釋出網絡）服務。CDN用于釋出靜态内容，如圖檔，腳本，樣式表和Flash。 

<b>規則</b><b>3</b><b>－添加</b><b>Expires</b><b>頭</b><b></b>

使用Expires來設定浏覽器緩存，指到指定的時間為止一直通路緩存中的内容。另外在http1.1中引入了cache－control頭來克服Expires頭的限制，因為Expires頭使用一個特定時間，它要求伺服器和用戶端的時鐘嚴格同步，過期時間需要經常檢查，并且一旦未來這一天到來了，還需要在伺服器配置中提供一個新的日期。

Cache－control使用max－age指定指定元件被緩存多久，它以秒為機關定義了一個更新窗。如果從元件被請求開始過去的秒數少于max－age，浏覽器就使用緩存版本。

如果你同時指定了Expires和cache－control頭，max－age指令将重寫Expires頭。

使用浏覽器緩存減少了響應時間，但是當我們的元件更新的時候，已經通路過使用者不太可能擷取最新的元件，因為前一個版本已經在緩存中了，解決這個問題的方案就是修改檔案名，比如我們元件使用變量. 

<b>規則</b><b>4</b><b>－壓縮元件</b><b></b>

壓縮已經在Email應用和FTP站點中使用了10年，http1.1開始，web用戶端可以使用htpp頭Accept－Encoding（Accept－Encoding：gzip;deflate）來辨別壓縮。deflate 也是一種壓縮方式但不流行，Gizp是最理想的壓縮方法。我們一般壓縮的對象是html，樣式表，腳本，圖檔和pdf不應該壓縮，因為它們本來已經備壓縮了，在去壓縮隻會白白的浪費cpu資源。壓縮通常能将響應的數量減少将近70％。

正常情況下，當浏覽器直接與伺服器通信時我隻要按正常的配置即可。但是當浏覽器通過代理來發送請求的時候就變得非常複雜。需要考慮壓縮和緩存之間的平衡。 

<b>規則</b><b>5</b><b>－将樣式表放在頂部</b><b></b>

在早先的IE中比如将樣式表放在底部，會導緻白屏或者是無樣式内容的閃爍。白屏是由于浏覽器要等待css下載下傳完再顯示頁面的元件，是以在等待css下載下傳的時候頁面就是白屏。無樣式的閃爍是由于先下載下傳頁面的元件比如文字圖檔，并逐漸顯示，等css下載下傳完則需要應用新的css樣式渲染，就産生了這種無樣式的閃爍現象。

正确使用方式是使用link标簽将樣式表放在文檔的head中。

<b>規則6-将腳本放在底部</b>

并行下載下傳：頁面中的每個元件都會産生一個http請求，http請求會影響相應時間，浏覽器對其下載下傳的規則要依照http規範。在http1.1規範裡建議浏覽器從每個主機名并行下載下傳兩個元件，也就是說如果我們的元件在兩個主機名下就會并行下載下傳4個元件。但并非是主機名越多越好，Yahoo的研究表明使用兩個主機名是最佳的。而且不同的浏覽器會有不同的預設設定。

下載下傳腳本時是禁止并行下載下傳的，因為腳本可能使用document.write來修改内容，或者有多個腳本時他們之間可能存在依賴關系。是以腳本放在最下面就會先下載下傳腳本而阻止頁面其他元件的下載下傳。是以最佳的情況就是将腳本放在底部。

<b>規則</b><b>7-</b><b>避免</b><b>css</b><b>表達式</b>

CSS表達式是動态設定CSS屬性的一種強大但很危險的方式，它收到IE5之後版本的支援。類似background-color:expression();格式的。任何css表達式實作的功能我們都可以找到它的替代方式，我們盡量避免使用Css表達式。

<b>規則</b><b>8-</b><b>使用外部</b><b>JavaScript</b><b>和</b><b>CSS</b>

使用内聯比外部檔案确實有更快的響應速度，但是使用外部檔案被浏覽器緩存，哪種方式好還要考慮頁面的浏覽次數，緩存設定等。也有兩全其美的方法，比如加載後下載下傳，我們首先使用内聯的方式，在首頁加載完畢後動态下載下傳外部元件來實作，這樣能将外部檔案放到浏覽器的緩存中以便使用者接下來通路其他頁面。還可以使用動态内聯的方式。

<b>規則9：減少DNS查找</b>

DNS解析也是開銷，在DNS查找之前浏覽器不能從主機名那裡下載下傳到任何東西，相應時間依賴于DNS解析器，他所能承擔的請求壓力，

你與它之間的距離和你的帶寬速度。

實際中作業系統和浏覽器做為緩存DNS查找記錄，但是浏覽器的Keep-Alive屬性會覆寫作業系統的緩存過期時間。

<b>規則10-精簡JavaScript</b>

Javascript我們精簡和混淆，精簡隻是去掉代碼中空白等。而混淆會對一些變量函數名進行修改。一般混淆是為了增加反向工程的

難度，但是也容易帶來錯誤，一般我們不建議去混淆JavaScript代碼。精簡和混淆我們都可以借助一些工具來實作。

<b>規則11-避免重定向</b>

重定向就是從一個URL到另一個URL，它會使你的頁面變慢。下面是一些使用重定向的典型解決方案：

2.連接配接網站：當我們改變網站後端邏輯的時候，很可能所需的url也變了，這時候就需要将使用者從舊的url轉移到新的url，這個時候

我們往往使用最多的也是重定向。我們應該盡量去避免。

3.跟蹤内部流量

4.跟蹤出戰流量

5.美化url：有的時候某個url很複雜，不利用使用者去輸入，我們就提供一個友好的url來給使用者，這個時候也會發生重定向。

<b>規則12-移除重複腳本</b>

該規則說的是同一個腳本被包含兩次。

<b>規則13-配置ETag</b>

當網站被宿主在多于一台伺服器上時，ETag頭可能會阻礙緩存。

ETag：實體标簽，是web伺服器和浏覽器用于确認緩存元件的有效性的一種機制。

<b>規則14-使用Ajax緩存</b>

確定Ajax請求遵守性能指導，尤其應具有長久的Expires頭。

本文轉自生魚片部落格園部落格，原文連結：http://www.cnblogs.com/carysun/archive/2009/10/13/highperformance.html，如需轉載請自行聯系原作者