日常工作中需要做一個(gè)網(wǎng)站的優(yōu)化工作，簡(jiǎn)單總結(jié)了下和大家分享。優(yōu)化思路無(wú)非就是前端優(yōu)化，asp.net頁(yè)面生命周期優(yōu)化，數(shù)據(jù)訪問優(yōu)化，IIS與web.config配置優(yōu)化，為了避免篇幅太長(zhǎng)，分了四個(gè)部分。下面一起來(lái)看第一部分：前端優(yōu)化，希望能幫助到大家！

前端優(yōu)化黃金14條要點(diǎn)

1.Make Fewer HTTP Requests（盡量減少HTTP請(qǐng)求）

2.Use a Content Delivery Network （使用內(nèi)容分發(fā)網(wǎng)絡(luò)（即CDN））

3.Add an Expires Header（添加Expires頭）

4.Gzip Components （壓縮組件）

5.Put Stylesheets at the Top（把CSS放在HTML最上面）

6.Put Scripts to the Bottom （把腳本（比如JavaScript）放到HTML最下面）

7.Avoid CSS Expressions（避免使用CSS表達(dá)式）

8.Make JavaScript and CSS External（使用外部的JavaScript和CSS）

9.Reduce DNS Lookups （減少DNS查詢次數(shù)）

10.Minify JavaScript（精簡(jiǎn)JavaScript）

11.Avoid Redirects （避免重定向）

12.Remove Duplicate Scripts（刪除重復(fù)代碼）

13.Configure ETags （配置ETag）

14.Make Ajax Cacheable（使用Ajax緩存）

減少頁(yè)面體積

a. 壓縮圖片（1.1M）、css、js,壓縮圖片、css、js方法：

1.上傳圖片前壓縮，上線前手動(dòng)壓縮圖片、css、js;

2.在輸出圖片時(shí)壓縮（開啟gzip或CompressionModule壓縮模塊）

b. 精簡(jiǎn)css，js代碼，比如：

1. css 提取共同樣式

.text_lbg{background:#F3F8FE;display:inline-block;padding:2px;horizontal-align:middle;}.text_rbg{background:#FFB0B0;display:inline-block;padding:2px;horizontal-align:middle;}.text_bbg{background:#AADAF0;display:inline-block;padding:2px;horizontal-align:middle }

改為:

.text_common{ display:inline-block;padding:2px;horizontal-align:middle;}.text_lbg{background:#F3F8FE;}.text_rbg{background:#FFB0B0;}.text_bbg{background:#AADAF0;}

2. css 少用父子關(guān)系

.content .compare_price a p i{font-style:normal;font-weight:normal;}

改為：

加上class = “classi”，然后使用

.classi{ font-style:normal;font-weight:normal;}

c. 禁用ViewState

1.禁用頁(yè)面ViewState方法：

禁用當(dāng)前頁(yè)面ViewState:

@Page指令中設(shè)置,代碼如下：

<%@ Page EnableViewState="false" %>

禁用整個(gè)WEB應(yīng)用程序ViewState:

修改Web.config中相應(yīng)元素的屬性即可。代碼如下：

<pages enableViewState="false" />

禁用服務(wù)器全局的ViewState:

修改.Net Framework安裝目錄下的machine.config即可。代碼如下：

（machine.config一般路徑C:\WINDOWS\Microsoft.NET\Framework64\v2.0.50727\CONFIG\machine.config）

<pages enableViewState="false" />

2.詳情頁(yè)面（DrugDetails）禁用ViewState后頁(yè)面html由89.5kb減小到78.7kb，效果明顯。在簡(jiǎn)單的刪除html行首空格后，頁(yè)面html減少到69.3 KB。

減少http請(qǐng)求數(shù)

d. css sprit合并圖片；

1.詳情頁(yè)面有40多個(gè)背景圖片，可以考慮合并以減少http請(qǐng)求數(shù)。

e. 把css，js合并成一個(gè)文件。

2.詳情頁(yè)面引用css，js非常多，可以考慮合并成一個(gè)css和一個(gè)js文件，以減少http請(qǐng)求數(shù)。

1.1.3 css放在頁(yè)面頂部，js放在頁(yè)面底部；

f. css是異步加載，css放在頂部可以使頁(yè)面更快的顯示出來(lái)，js是阻塞加載，放在底部避免頁(yè)面加載阻塞。

靜態(tài)資源加上過期時(shí)間；

詳情頁(yè)面中有大部分靜態(tài)資源都沒有加上過期時(shí)間，會(huì)導(dǎo)致瀏覽器不緩存這些靜態(tài)頁(yè)面。對(duì)靜態(tài)內(nèi)容配置一個(gè)較長(zhǎng)的過期時(shí)間，用戶瀏覽器請(qǐng)求時(shí)會(huì)從本地緩存讀取，加快頁(yè)面顯示速度。

配置或刪除ETag；

g. If-None-Match比If-Modified-Since具有更高的優(yōu)先級(jí)。

1.當(dāng)請(qǐng)求發(fā)現(xiàn)緩存文件的ETag和服務(wù)器http響應(yīng)頭中的ETag不同時(shí)，會(huì)重新請(qǐng)求文件。

瀏覽器端第一次訪問獲得服務(wù)器的Last-Modified，第2次訪問把瀏覽器端緩存頁(yè)面的最后修改時(shí)間發(fā)送到服務(wù)器去，服務(wù)器會(huì)把這個(gè)時(shí)間與服務(wù)器上實(shí)際文件的最后修改時(shí)間進(jìn)行對(duì)比。如果時(shí)間一致，那么返回304，客戶端就直接使用本地緩存文件。

工作原理是在HTTP Response中添加ETag信息。 當(dāng)用戶再次請(qǐng)求該資 源時(shí)，將在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服務(wù)器驗(yàn)證資源的ETag沒有改變（該資源沒有更新），將返回一個(gè)304狀態(tài)告訴客戶端使用本地緩存文件。否則將返回200狀態(tài)和新的資源和Etag。

h. 實(shí)際上沒有If-None-Match頭反而會(huì)好一些。

(PS:IIS6.0刪除ETag的方法)