01. Minimize HTTP Requests 減少HTTP請求

Image、CSS、Script、Flash等等這些都會增加 HTTP 請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個文件；頁面里直接寫入圖片也是不好的做法，應該寫進CSS里，利 用 CSS SPRite 將小圖拼合后利用 background 來查找定位；使用“圖片地圖”（在同一個張圖片上放置不同的URL，這種方式就可以減少對于圖片的請求。經測試，獲取圖片地圖的時間比獲取每個單獨的圖片 時間上要快56%。圖片地圖有兩種方式，一是“服務器端圖片地圖”，一是“客戶端圖片地圖”。服務器端實現方式即將用戶點擊的XY坐標傳入服務器，然后由 服務器端映射相應的操作。客戶端的方式即在前臺用 MAP 標簽來實現。圖片地圖的方式，使編程維護變得困難了許多。）。

02. Use a Content Delivery Network 利用CDN技術

“內容分發網絡”。其目的是通過在現有的 Internet 中增加一層新的網絡架構，將網站的內容發布到最接近用戶的網絡“邊緣”。

CDN的特點：

1、本地Cache加速 – 提高了企業站點（尤其含有大量圖片和靜態頁面站點）的訪問速度，并大大提高以上性質站點的穩定性。

2、鏡像服務 – 消除了不同運營商之間互聯的瓶頸造成的影響，實現了跨運營商的網絡加速，保證不同網絡中的用戶都能得到良好的訪問質量。

3、遠程加速 – 遠程訪問用戶根據DNS負載均衡技術，智能自動選擇 Cache 服務器，選擇最快的 Cache 服務器，加快遠程訪問的速度。

4、帶寬優化 – 自動生成服務器的遠程Mirror Cache服務器，遠程用戶訪問時從 Cache 服務器上讀取數據，減少遠程訪問的帶寬、分擔網絡流量、減輕原站點WEB服務器負載等。

5、集群抗攻擊 – 廣泛分布的CDN節點加上節點之間的智能冗于機制，可以有效地預防黑客入侵以及降低各種 DDOS 攻擊對網站的影響，同時保證較好的服務質量。

03. Add an Expires or a Cache-Control Header 設置“ 頭文件過期”或者“ 靜態緩存”

瀏覽器會用緩存來減少 HTTP 請求數來加快頁面加載的時間。如果頁面頭部加一個很長的過期時間，瀏覽器就會一直緩存頁面里的元素。不過這樣如果頁面里的東西變動的話就要改名字了，否則 用戶端不會主動刷新。

（1）概念

Cache-control 用于控制HTTP緩存（在HTTP/1.0中可能部分沒實現，僅僅實現了Pragma: no-cache）

格式：Cache-Control: cache-directive

cache-directive 可以為以下：

request時用到：

| “no-cache”

| “no-store”

| “max-age” “=” delta-seconds

| “max-stale” [ "=" delta-seconds ]

| “min-fresh” “=” delta-seconds

| “no-transform”

| “only-if-cached”

| “cache-extension”

response時用到：

| “public”

| “private” [ "=" <"> field-name <"> ]

| “no-cache” [ "=" <"> field-name <"> ]

| “no-store”

| “no-transform”

| “must-revalidate”

| “proxy-revalidate”

| “max-age” “=” delta-seconds

| “s-maxage” “=” delta-seconds

| “cache-extension”

部分說明：

根據是否可緩存分為

Public  指示響應可被任何緩存區緩存。

Private  指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對于其他用戶的請求無效。

no-cache  指示請求或響應消息不能緩存（HTTP/1.0用Pragma的no-cache替換）

根據什么能被緩存

no-store  用于防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存。

根據緩存超時

max-age  指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應。

min-fresh  指示客戶機可以接收響應時間小于當前時間加上指定時間的響應。

max-stale  指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以

接收超出超時期指定值之內的響應消息。

Expires 表示存在時間，允許客戶端在這個時間之前不去檢查（發請求），等同max-age的

效果。但是如果同時存在，則被Cache-Control的max-age覆蓋。

格式：Expires = “Expires” “:” HTTP-date

例如：Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）

（2）應用

通過 HTTP 的 META 設置 expires 和 cache-control：

<meta http-equiv=”Cache-Control” content=”max-age=7200″ />

<meta http-equiv=”Expires” content=”Mon, 20 Jul 2009 23:00:00 GMT” />

上述設置僅為舉例，實際使用其一即可。這樣寫的話僅對該網頁有效，對網頁中的圖片或其他請求無效，并不會做任何cache。而且，客戶端的請求就多了， 盡管只是檢查 Last-modified 狀態，但是請求增多對瀏覽速度必定有影響。

如果要對文件添加 cache 可以通過 apache 的 mod_expire 模塊（http://httpd.apache.org/docs/2.2/mod/mod_expires.html），寫法為

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault “access plus 1 days”

</IfModule>

記得 ExpiresActive 設為On，我起先沒設置On，似乎怎樣YSlow都查不到緩存機制。這樣添加的話就是默認所有的。如果要針對個別MIME類型則可以：

ExpiresByType image/gif “access plus 5 hours 3 minutes”

另外，當點擊瀏覽器上的刷新，客戶端發送的請求中均是 max-age=0，表示 validate 操作，發送請求到服務器要求檢查 cache，再更新 cache，一般得到的是304 Not Modified，表示沒變動。

04. Gzip Components Gzip壓縮

Gzip格式是一種很普遍的壓縮技術，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率為85%。壓縮沒壓縮，可 以到 這里 做下測試。

05. Put Stylesheets at the Top 把CSS放頂部

使用LINK標簽將樣式表放在文檔的HEAD中，讓瀏覽者能盡早的看到網站的完整樣式。

HTML頁面是逐步呈現的，在用戶打開頁面的同時，我們需要考慮到用戶的體驗——打開網頁的速度。顯示頁面第一需求是HTML，而HTML是由一個一個 的DIV組成，CSS是一切的基礎。

06. Put Scripts at the Bottom 把 JS 放底部

網站呈現完畢后再進行功能設置，當然這些JS要在你的加載過程中不影響內容表現。

因為頁面是逐步呈現的，對于腳本以下的內容，會被阻塞。直到腳本加載完畢才會繼續呈現頁面。正確的放位置

（1）最差的情況：將腳本放在頂部。會阻塞其后內容呈現、會阻塞其后組件下載。

（2）最佳的情況：將腳本放在底部。不會阻止頁面的呈現。

07. Avoid CSS Expressions 避免CSS Expressions

CSS表達式很可怕，這個只被IE支持的東西執行時候的運算量非常大，你移動一下鼠標它都要進行重計算的，但有時候為了做瀏覽器的兼容必須要用到這 個。

08. Make javaScript and CSS External 將JS和CSS外鏈

前面講到了緩存這個事情，一些較為公用的JS和CSS，我們可以使用外鏈的形式，譬如從Google外鏈Jquery文件。

09. Reduce DNS Lookups 減少DNS查找

減少網站從外部調用資源。

Internet 是通過 IP 地址來查找服務器的。DNS也是有開銷的。一般情況下瀏覽器查找一個給定的主機IP地址的時間是20~120ms。為了減少DNS查找過程中所花費的時 間，需要采取以下一些技術：

（1）DNS緩存

DNS查找可以緩存起來提高性能，在用戶計算機上，一個主機名被解析后相應的DNS信息會被存儲在操作系統的DNS緩存中，之后使用時就可以減少所需要 的時間了。另外一些瀏覽器也有相應的DNS緩存功能。但是緩存的DNS數量是有限的。一般情況下操作系統在考慮TTL值，而瀏覽器會忽略該值而設置自己的 時間。

（2）TTL

DNS緩存對帶來一些系統消耗，同時服務器的IP地址并不一定是一塵不變的。服務器可以表明記錄可以被緩存多久，查找返回的DNS記錄包含了一個存活時 間（Time-to-live，TTL）值，它表明了客戶端可以對該記錄緩存多久。一般情況下可以設置為1天。

10. Minify Javascript and CSS 減小JS和CSS的體積

寫JS和CSS都是有技巧的，用最少的代碼實現同樣的功能，減少空白，增強邏輯性，用縮寫方式等等，當然也有不少工具也能夠幫你實現這一點。

11. Avoid Redirects 避免重定向

再寫入鏈接時，雖然“http://xxx.com”和“http://xxx.com/”僅有一個最后的“/”之差，但是結果是不同的，服務器需要花 時間把前者重定向為后者然后進行跳轉，這個要自己注意，也可以在Apache里用Alias 或者 mod_rewrite 或者 DirectorySlash 解決。

另，重定向的用處有：連接不同的網站；跟蹤網站訪問量；美化URL。

12. Remove Duplicate Scripts 刪除重復腳本

重復調用的代碼瀏覽器并不會識別忽略，而是會再次運算一遍，這當然是大大的浪費。

13. Configure ETags 配置ETags

搞不清楚咋回事，總之我是在. htaccess里把它刪除了。

14. Make Ajax Cacheable 緩存Ajax

Ajax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣能夠更好的提高效率。

15. Flush the Buffer Early 盡早的釋放緩沖

當用戶進行頁面請求時，服務器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩沖，這樣可以將文件頭先發送出 去，然后再發送文件內容，提高效率。

16. Use GET for AJAX Requests 用GET方式進行AJAX請求

Get 方法和服務器只有一次交互（發送數據），而 Post 要兩次（發送頭部再發送數據）。

17. Post-load Components 延遲加載組件

最先加載必須的組件進行頁面初始化，然后再加載其它，具體實現方式可以采用”隱藏IFRAME”或者javascript?！盰UI Image Loader”是很好的例子。

18. Preload components 預加載組件

提前加載以后可能用到的東西，和延遲加載并不沖突，它的目的是為后續請求提供更快的響應，參見Google首頁上的CSS sprites應用。

19. Reduce the Number of DOM Elements 減少DOM元素數量

復雜的頁面結構意味著更長的下載及響應時間，導致頁面渲染的變慢。更合理更高效的使用標簽來架構頁面，是好的前端的必備條件。

20. Split Components Across Domains 跨域分離組件

主要的目的是提高頁面組件并行下載能力，但注意不要過多，超過2-4個域名會引起上面說到的DNS查找浪費。IE對同一個域的請求，同時只能有兩個。實 現可以利用CDN網絡或者其他分布式計算網絡。

21. Minimize the Number of iframes 減少 IFrame 數量

IFrame 是 SEO 的大忌，需要更有效的利用 IFrame。

IFrame 優點：有利于下載緩慢的廣告等第三方內容，安全沙箱，并行下載腳本

IFrame 缺點：即使為空也會有較大資源消耗，會阻止頁面的onload，非語義

22. No 404s 不要出現404頁面

站點本身里（非搜索結果）出現404頁面，無意義的404頁面會影響用戶體驗并且會消耗服務器資源。

23. Reduce Cookie Size 減小Cookie

Cookie 在服務器及瀏覽器之間的通過文件頭進行交換，盡可能減小 Cookie 體積，設置合理的過期時間，能夠很好的提高效率。

24. Use Cookie-free Domains for Components 對組件使用無Cookie的域名

對靜態組件的 Cookie 讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也可以在Cookie中只存放帶www的域名。

25. Minimize DOM Access 減少DOM的訪問次數

JS 訪問 DOM 是很慢的，盡量不要用 JS 來設置頁面布局。

26. Develop Smart Event Handlers 開發靈活的事件處理句柄

DOM 樹上過多的元素被加入事件句柄的話，反應效率肯定會低，YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設置 DOM 事件句柄。

27. Choose <link> over @import 使用<link>而非 @import

在 IE 中使用 @import 就和在頁面底部用 <link> 一樣。

28. Avoid Filters 避免過濾器的使用

如果需要Alpha透明，不要使用 AlphaImageLoader ，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+用戶。

29. Optimize Images 優化圖片

將你的 GIF 轉為 PNG8 會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。

30. Optimize CSS Sprites 優化CSS Sprites

在CSS Sprites中豎直并盡量緊湊的排列圖片，盡量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。

31. Don’t Scale Images in HTML 不要在HTML中縮放圖片

圖片要用多大的就用多大的，不要偷懶。

32. Make favicon.ico Small and Cacheable 縮小 favicon.ico 的大小并緩存它

站點的瀏覽器ICO應該不是經常換吧，那就長時間的緩存它，并且最好控制在1K以下。

33. Keep Components under 25K 保證組件在25K以下

iPhone不能緩存25K以上的組件，并且這還是要在被壓縮前。

34. Pack Components into a Multipart Document 將組件打包進一個多部分的文檔中

就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術需要確保你的代理支持，iPhone就不支持。

內聯圖象：

使用“data: URL scheme”在實際的頁面嵌入圖像數據。平時我們常見的是：http,ftp,mailto 等幾種模式，實際上data:URL模式早在1995年已經提出，它表示將小塊數據直接融入到鏈接URL中。其模式如下：data: [<mediatype>][;base64],<data>

第一個參數表示文件格式，如：image/gif。

可惜的是，目前IE并不支持該模式。另外數據大小也受到限制。

聲明：內容來源于網絡，基于雅虎的34條。