最近因公司需要對網站的最佳化處理學習了一番，現在借本系列博文與大家分享一下自己的學習成果，有紕漏處請大家多多指正。
首先推薦一篇十分全面的網頁最佳化文章：http://developer.yahoo.com/performance/rules.html
好了，要正式開始了！
一、合并檔案請求（以css檔案為例說明，js檔案一樣處理）
我們常會將網頁上的css存放在css檔案中，然後引入到網頁中，那麼載入網頁時瀏覽器會針對每一個檔案的引用產生請求。請求的建立會耗費一定的頻寬資源和時間並佔用一定的伺服器資源，如果請求數目過多，網頁的載入速度會變慢。有一種方法是將多個css檔案合并成一個檔案，這樣不僅容易發生樣式間的衝突、後期維護困難，還有會造成載入無用樣式資料的可能。而以下方法通過一個中介層處理css檔案的請求，達到合并檔案請求又不用合并css檔案的作用。（監測工具：HttpWatch）
未最佳化時：
default.aspx
1 <html>
2 <head>
3 <link rel="stylesheet" type="text/css" href="styles/style1.css"/>
4 <link rel="stylesheet" type="text/css" href="styles/style2.css"/>
5 </head>
6 <body>
7 <div class="div1"></div>
8 <div class="div2"></div>
9 </body>
10 </html>
style1.css
1 .div1{
2 width:500px;
3 height:100px;
4 border:solid 1px red;
5 background:url(../images/back.gif)
6 }
style2.css
1 .div2{
2 width:600px;
3 height:100px;
4 border:solid 1px black;
5 background-color:red
6 }
頁面首次載入結果：
很明顯，發出了兩個請求來擷取css檔案。下面用一個請求來擷取兩個css檔案。
最佳化後：
defalut.aspx
1 <html>
2 <head>
3 <link rel="stylesheet" type="text/css" href="CssRequestHandler.aspx?p1=styles/style1.css&p2=styles/style2.css"/>
4 </head>
5 <body>
6 <div class="div1"></div>
7 <div class="div2"></div>
8 </body>
9 </html>
其中CssRequestHandler就是處理css請求的中介層，將要請求的css檔案路徑以參數的形式發送到伺服器端。注意點：此處的參數名必須不同，如果使用相同的參數名的話中介層的處理代碼會有一點不同。
CssRequestHandler.ashx
1 public void ProcessRequest (HttpContext context) {
2 context.Response.ContentType = "text/css";
3 int pCount = context.Request.QueryString.Count;//參數個數
4 string path = string.Empty;//檔案路徑
5
6 for(int i=0; i<pCount; ++i)
7 {
8 path = context.Request.PathMap(context.Request.ApplicationPah+"/"+context.Request.QueryString[i]);
9 TextReader tr = StreamReader(path);
10 context.Response.Write(tr.ReadToEnd()+"\n");
11 tr.Close();
12 tr.Dispose();
13 }
14 }
style1.css
1 .div1{
2 width:500px;
3 height:100px;
4 border:solid 1px red;
5 background:url(images/back.gif)
6 }
注意點：background屬性中圖片url跟之前的不同，因為用該方式合并請求擷取的css檔案猶如把css樣式嵌套到html檔案中，所以相對路徑要以html分頁檔的相對路徑為準。
style2.css
1 .div2{
2 width:600px;
3 height:100px;
4 border:solid 1px black;
5 background-color:red
6 }
頁面首次載入結果：
與未最佳化對比，發送和接收的資料量都減少了。但Time卻增大了，推斷是因為圖片要等css樣式解釋時才發出請求，而中介層處理佔用一定的時間，延後了圖片的請求，所以完成最後一個圖片的請求也有所延遲。嘗試不載入圖片：
最佳化後：
未最佳化：
可發現無論從發送和接收的資料量還是頁面請求的時間上看，最佳化後的頁面載入速度都有所提升。
下一篇：網頁最佳化系列二：使用Cache緩衝靜態檔案、圖片（asp.net版）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
