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

HTTP概述

C/S協議，請求與響應構成，短鏈接協議，請求響應完成後立刻斷開鏈接。
GET請求包含一個URL，而後是請求頭，POST除了URL和請求頭外，還擁有請求體，請求以前要組裝請求體，因此速度上沒有GET請求快。
HTTP響應包含請求碼、響應頭和響應體。

壓縮

若是瀏覽器支持和服務器支持的話，使用壓縮來減小響應大小。瀏覽器使用Accept-Encoding：gzip,deflate來聲明它支持壓縮。服務器使用Content-Encoding：gzip來確認響應內容已被壓縮。

條件GET請求

對緩存的內容進行確認的請求（經過判斷Last-Modified），若是服務端確認有效，則進行下一步確認是否使用緩存。

Expires

在次確認是否使用緩存，客戶端和服務端的再一次往返確認，以執行有效性檢驗。

Keep-Alive

使瀏覽器和客戶端能夠在一次鏈接下進行屢次請求，使用Connecttion頭來支出對Keep-Alive的支持，使用Connecttion: close來關閉鏈接。

減小HTTP請求

80%~90%時間花在HTML文檔所應用的組件上（圖片、腳本、樣式等）進行的HTTP請求上，由於是短鏈接，每次都須要進行重連，因此耗時長。

圖片地圖

CSS Sprites

合併圖片，把css的背景圖片合併在一張圖片中，經過background-position來控制顯示。

內聯圖片

經過是使用data:URL模式，如使用base64流圖片，這樣的圖片無需進行HTTP請求。

合併腳本和樣式表

每一個腳本與樣式表都要創建一次HTTP請求，與合併圖片相似，把腳本和樣式表合併在一塊兒，減小HTTP請求次數。

使用內容發佈網絡（CDN）

內容發佈網絡

一組分佈在多個不一樣地理位置的WEB服務器，用於更加有效的向用戶發佈內容。CDN能夠選擇地理位置最近的或者響應時間最短的服務器對其內容進行響應。

過程原理

1. 請求域名
2. 瀏覽器對域名進行理解
3. CDN域名服務器返回指定域名的CNAME
4. 瀏覽器對CNAME域名進行解析，獲得CDN緩存服務器的IP地址
5. 根據CDN緩存服務器的IP地址再一次進行請求
6. 緩存服務器經過Cache內部專用DNS解析獲得實際IP，並向該IP提交資源請求
7. 緩存服務器獲得資源後進行本地保存和返回給瀏覽器客戶端。

添加Expires頭

經過使用長久的Expires頭，可使一些資源被緩存，這會會在後續的頁面瀏覽中避免沒必要要的HTTP請求。

Expires頭

Web服務器用Expires頭來告訴客戶端，可使用一個組件的當前副本，知道指定時間爲止。
如Expires: Thu 15 Apr 2010 20:00:00 GMT
這是一個長久有效的Expires頭，告訴瀏覽器該響應有效性持續到2010年4約14日爲止，若是爲一個頁面中的一張圖片返回了這個頭，瀏覽器在後續的頁面瀏覽中會使用緩存的圖片，這將減小一個HTTP請求的數量。

Max-Age

Expires用的是一個特定的時間，它要求服務器和客戶端的時鐘嚴格同步，Cache-Control：Max-Age能夠克服這種限制，Cache-Control使用max-age指令指定組件被緩存多久，它以秒爲單位定義了一個更新窗。

壓縮組件

若是HTTP請求產生的響應包很小，傳輸時間就會減小，由於只須要將很小的包從服務器傳輸到客戶端，這樣對速度較慢的帶寬效果尤爲明顯。

壓縮是如何工做的

從http1.1開始，Web客戶端能夠經過HTTP請求頭中的Accept-Encoding來表示對壓縮的支持。gzip是目前最流行和最有效的方法，deflate效果略遜且不太流行。

壓縮什麼

能夠壓縮HTML、JSON、XML、腳本和樣式（不少網站沒有作）。
圖片和PDF不該該壓縮，由於它們原本就被壓縮了。

壓縮成本：服務器CPU資源、客戶端要對壓縮的文件進行解壓。

代理緩存

對代理服務器來講，能夠緩存來自web服務器的資源，可是不一樣的瀏覽器對gzip的支持不同，那麼假如代理服務器緩存了一份gzip過的組件，可是一個不支持gzip的瀏覽器請求了這個代理服務器，那麼將沒法正常解壓這個組件，因此須要在空緩存，也就是第一次請求是把給請求頭加上Vary：Accept-Encoding，告訴代理服務器，爲Accept-Encoding請求頭的每一個值多緩存一份，這樣有無Accept-Encoding：gzip均可以進行處理了。

將樣式表放在頂部

樣式表與腳本的放置順序決定了下載的優先級，因爲CSS會阻塞DOM的渲染，因此CSS放在頂部，可使頁面第一次渲染的時候把樣式呈現完整，若是CSS放在底部，頁面會先呈現沒有樣式的頁面，等CSS樣式加載完成，在進行一次迴流重繪，下降了用戶體驗。

將腳本放在底部

瀏覽器爲了保證腳本的執行順序，在解析html的時候，遇到JavaScript腳本標籤，會阻止瀏覽器的並行加載。假如腳本放在頁面頂部的話，會阻塞對其餘內容的下載和呈現，直至腳本加載完畢，因此須要把腳本放在頁面底部，這樣不會阻止頁面內容的呈現，並且頁面中的可視組件能夠今早下載。

避免CSS表達式

CSS表達式，即在CSS中是用JavaScript表達式，以下

background-color: expression((new Date()).getHours() % 2 ?  "#b8d4ff" : "#f08a00")

更新表達式

表達式的問題在於對其進行求值的頻率比人們指望的要高，它不僅在頁面呈現的大小改變時求值，當頁面滾動、甚至用戶鼠標在頁面上移動時都要求值。也正由於更新頻率過高，因此會驗證影響頁面的性能。

一次性表達式

使用代碼處理，讓更新頻率只執行一次，以下

background-color: expression(altBgcolor(this))

function altBgcolor(elem) {
    Elem.style.backgroundColor = (new Date()).getHours() % 2 ?  "#b8d4ff" : "#f08a00"
}

使用外部JavaScript和CSS

內聯的優勢：

• 能夠減小http請求

缺點：

• 缺點爲沒法使用瀏覽器緩存
• 沒法並行下載。

外部JavaScript與CSS的優勢：

• 能夠利用瀏覽器的緩存，加快完整緩存，可是對空緩存無效。
• 對文件能夠並行下載。
• 可使用cdn。

缺點：

• ​增長http請求。

純粹而言（空緩存），內聯的效率要比外部文件要快得多，由於減小了不少http請求，可是當用戶屢次訪問的時候（完整緩存），內聯的效率會明顯低於外部文件。

減小DNS查詢

DNS：Domain Name System，將域名映射到IP地址，URL和實際宿主它們的服務器之間的間接層。一般，瀏覽器查找一個給定的主機名的IP地址要話費20~120毫秒，故DNS查詢次數越多，頁面效率越慢。

DNS緩存與TTL

DNS查找能夠被緩存起來以提升性能，瀏覽器、操做系統均可以對DNS進行緩存，當咱們瀏覽器緩存DNS後，就不會麻煩操做系統來解析這個域名。

TTL（Time-to-live），影響DNS緩存的因素，該值告訴客戶端能夠對該記錄緩存多久，瀏覽器一般會忽略該值，操做系統纔會考慮TTL。HTTP協議中的keep-alive能夠同時覆蓋TTL和瀏覽器的時間限制，也就是說只要瀏覽器與服務器保持這TCP鏈接的打開狀態，就不會進行DNS查詢。

減小DNS查找

當客戶端的DNS緩存爲空時候，DNS的查找數量與web頁面中惟一主機名的數量相同，包括URL、圖片、腳本、樣式表等主機名。減小惟一主機名的數量就能夠減小DNS查找數量（每一個主機名並行下載的組件有限）。

精簡JavaScript

經過工具構造靜態資源文件，減小JavaScript與CSS文件大小來加快加載速度。

避免重定向

重定向會增長http請求的次數，會影響到整個網站的性能，可是必要的重定向又能夠提升用戶體驗，因此咱們須要在性能和用戶體驗之間去權衡，達到最好的目的。

以百度爲例：用戶在瀏覽器中輸入網址 http://www.baidu.com/ 或者 http://www.baidu.com/index.php，實際上訪問的都是本站的首頁；用戶在瀏覽器中輸入網址 http://www.baidu.com/ 或者 http://baidu.com/，訪問的依然都是本站的首頁。

移除重複腳本

配置ETag

實體標籤（Entity Tag）是Web服務器和瀏覽器用於確認緩存組件的有效性的一種機制。ETag是惟一表示了一個組件的一個特定版本的字符串。惟一的格式約束是該字符串必須用引號引發來。ETag的假如爲驗證明體提供了比最新更新時間更靈活的機制，即若是ETag不一致，則使用不使用緩存。