日常工作中需要做一個(ge)網站(zhan)的優(you)(you)化(hua)(hua)(hua)工作，簡(jian)單總結(jie)了下(xia)和大家分享。優(you)(you)化(hua)(hua)(hua)思路無非就是前端優(you)(you)化(hua)(hua)(hua)，asp.net頁面生命周期(qi)優(you)(you)化(hua)(hua)(hua)，數據訪問(wen)優(you)(you)化(hua)(hua)(hua)，IIS與(yu)web.config配(pei)置優(you)(you)化(hua)(hua)(hua)，為了避免篇幅太(tai)長(chang)，分了四個(ge)部(bu)分。下(xia)面一起來看第一部(bu)分：前端優(you)(you)化(hua)(hua)(hua)，希望能(neng)幫助到(dao)大家！
前端優化(hua)黃金(jin)14條(tiao)要點
1.Make Fewer HTTP Requests（盡量減少HTTP請求）
2.Use a Content Delivery Network （使(shi)用內容分發網絡(luo)（即CDN））
3.Add an Expires Header（添加Expires頭）
4.Gzip Components （壓縮組(zu)件）
5.Put Stylesheets at the Top（把CSS放在HTML最(zui)上面(mian)）
6.Put Scripts to the Bottom （把(ba)腳(jiao)本（比(bi)如JavaScript）放到HTML最(zui)下面）
7.Avoid CSS Expressions（避免使用CSS表(biao)達式）
8.Make JavaScript and CSS External（使(shi)用外部的JavaScript和(he)CSS）
9.Reduce DNS Lookups （減(jian)少DNS查(cha)詢次數(shu)）
10.Minify JavaScript（精簡JavaScript）
11.Avoid Redirects （避免重定向）
12.Remove Duplicate Scripts（刪除重(zhong)復(fu)代碼）
13.Configure ETags （配置ETag）
14.Make Ajax Cacheable（使用Ajax緩(huan)存）
a. 壓縮圖片（1.1M）、css、js,壓縮圖片、css、js方法：
1.上傳(chuan)圖(tu)片前壓(ya)縮(suo)，上線前手(shou)動壓(ya)縮(suo)圖(tu)片、css、js;
2.在輸(shu)出圖片時壓(ya)縮（開(kai)啟gzip或CompressionModule壓(ya)縮模(mo)塊）
b. 精簡css，js代碼，比如：
1. css 提(ti)取共同樣式
.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 少用父子關系
.content .compare_price a p i{font-style:normal;font-weight:normal;}改為：
加上class = “classi”，然后使用
.classi{ font-style:normal;font-weight:normal;}c. 禁用ViewState
1.禁用(yong)頁面ViewState方法：
禁用當前頁面ViewState:
@Page指令中設(she)置,代(dai)碼如下：
<%@ Page EnableViewState="false" %>
禁用整個WEB應用程序ViewState:
修改Web.config中(zhong)相(xiang)應元素的(de)屬性即(ji)可。代碼如下：
<pages enableViewState="false" />
禁用服務器全局的ViewState:
修改.Net Framework安裝(zhuang)目錄下的machine.config即可。代碼如下：
（machine.config一般路徑C:\WINDOWS\Microsoft.NET\Framework64\v2.0.50727\CONFIG\machine.config）
<pages enableViewState="false" />
2.詳情頁面（DrugDetails）禁(jin)用ViewState后頁面html由89.5kb減(jian)小到(dao)78.7kb，效果明(ming)顯。在簡單(dan)的刪除html行(xing)首空格后，頁面html減(jian)少到(dao)69.3 KB。
d. css sprit合并圖片；
1.詳情頁(ye)面有40多個背景圖片(pian)，可以(yi)考慮合并以(yi)減少http請求數。
e. 把css，js合并成一個文件。
2.詳情頁面(mian)引用css，js非常多，可以考慮(lv)合并成一個(ge)css和一個(ge)js文(wen)件，以減少(shao)http請求數。
f. css是異步加載，css放在頂部可以使頁面更快的顯示出來，js是阻塞加載，放在底部避免頁面加載阻塞。
詳情(qing)頁(ye)面(mian)中有(you)大部分(fen)靜態(tai)資源都沒有(you)加(jia)上過期時間，會(hui)導致瀏覽器不緩存這些靜態(tai)頁(ye)面(mian)。對靜態(tai)內容配置一個較長的(de)過期時間，用戶瀏覽器請求時會(hui)從本地緩存讀取，加(jia)快頁(ye)面(mian)顯(xian)示(shi)速度(du)。
g. If-None-Match比If-Modified-Since具有更高的優先級。
1.當請求(qiu)發現緩存文(wen)件的ETag和服(fu)務器http響應頭中的ETag不同時，會(hui)重新請求(qiu)文(wen)件。
瀏覽(lan)(lan)器(qi)(qi)端(duan)第一次訪(fang)問獲(huo)得服務器(qi)(qi)的(de)(de)Last-Modified，第2次訪(fang)問把(ba)瀏覽(lan)(lan)器(qi)(qi)端(duan)緩存頁(ye)面的(de)(de)最(zui)后修改(gai)時(shi)(shi)間發送到服務器(qi)(qi)去(qu)，服務器(qi)(qi)會(hui)把(ba)這(zhe)個(ge)時(shi)(shi)間與服務器(qi)(qi)上實(shi)際(ji)文件的(de)(de)最(zui)后修改(gai)時(shi)(shi)間進行對比(bi)。如果(guo)時(shi)(shi)間一致，那(nei)么(me)返回304，客戶(hu)端(duan)就直(zhi)接使用本地(di)緩存文件。
工作原理是在(zai)HTTP Response中(zhong)添加ETag信息(xi)(xi)。 當用(yong)戶再次(ci)請求該(gai)資(zi)(zi) 源(yuan)時，將(jiang)在(zai)HTTP Request 中(zhong)加入If-None-Match信息(xi)(xi)(ETag的(de)(de)值)。如果服務(wu)器驗(yan)證(zheng)資(zi)(zi)源(yuan)的(de)(de)ETag沒有改變（該(gai)資(zi)(zi)源(yuan)沒有更新(xin)），將(jiang)返(fan)回一(yi)個304狀態(tai)(tai)告(gao)訴客戶端使用(yong)本地緩存文(wen)件。否則將(jiang)返(fan)回200狀態(tai)(tai)和(he)新(xin)的(de)(de)資(zi)(zi)源(yuan)和(he)Etag。
h. 實際上沒有If-None-Match頭反而會好一些。
(PS:IIS6.0刪除ETag的方法)
