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

前些天我們經理拿給我一本書，讓我看看，《高效能網站建設指南》，前端工程師技能精髓，兩個晚上，翻完啦。周末，寫一下讀書筆記，便於以後用到的時候查閱。

總共講了14個規則，最後一張簡要分析十大網站。

作為一個web開發人員，我覺得瞭解常用的幾個規則就可以了：

規則1：減少http請求。

1.1csssprite

使用方式：頁面中導航中多個表徵圖，可以把表徵圖集中到一個圖片上，這樣就又原來的多個圖片的http請求，變成一個。當然多個圖片合成為一個圖片，在第一次載入的時候，可能沒有多個小圖快，但是整體來看，這樣合成後的，效果大於分開的小圖。（很實用）

2.合并指令碼和樣式表

理想情況下，一個頁面上，指令碼和樣式表都是一個。所以，指令碼的合并，樣式表的合并同樣能夠減少http請求。

規則2：使用cdn

（和我們相關性不大），這是網管的問題和公司的問題，而且成本是很大的。貌似部落格園，最近也在用cdn來提高網站的訪問速度。

規則3：添加expires頭

把頁面哪些圖片，css，js等設定expire，當頁面再次發送請求，直接從緩衝中取出來。

規則4：壓縮組件

瀏覽器通過Content-Encoding頭來通知web用戶端，gzip是目前流行和有效壓縮方法。但是，會導致伺服器花費額外的cpu周期。

規則5：將樣式表放在頁面頂部

這個不用多說啦，基本上都是這樣做的。

規則6：將指令碼放在底部

我們一般也是習慣於放在頁面的頂部，但是為了避免指令碼阻塞下載，還是改變一下傳統的那種方式，放到頁面底部
規則7：避免css運算式

我用到的css運算式，就是png圖片透明的時候，雖然可以通過js解決，但是還是習慣於用css運算式，但這裡是不合適的。因為所謂的求值和判斷，當頁面滾動，滑鼠移動的時候都要求值。

規則8：

使用外部js和css

習慣於這樣用，相比於內聯來說，外部的js和css可能被緩衝，所以，相對快點。

載入後下載：

動態內聯：利用cookie是否存在來判斷。不存在，表示是第一次載入。

規則9：

減少dns尋找

通過使用keep—alive和較少的網域名稱較少dns尋找。

規則10：

精簡js

推薦JSmin工具

YUI
Compressor

Dojocompressor（ShrinkSafe,）

精簡css，利用css壓縮公用程式處理空格，前提是先把自己的css相同的類合并，同時移除不必要的類。

規則11：

避免重新導向

缺少結尾的斜線，導致重新導向是很多web伺服器預設的行為，所以，所以要謹慎。

規則12：

移除重複的指令碼

同樣可以功能可能採用不同的js，但是盡量是想js的公用，對頁面中用到的js進行檢查和合并，對於團隊開發特別重要。確保指令碼只是被包含一次。

規則13

配置Etag（不太理解）

定義：實體標籤，是web伺服器和瀏覽器用於確認緩衝組件的有效性的一種機制。

規則14：

使ajax緩衝

推薦幾個常用的頁面最佳化工具：

httpwatcher：具體用法總結的很全面。

Yslow：

總結完啦，沒看到多少自己的東西，呵呵，慚愧啊，看來還是沒有讀透這本書啊！有時間再次拜讀，寫點實戰心得。

更多網站最佳化的內容參考：

http://www.cnblogs.com/yslow/archive/2009/04/24/1442722.html