日常工作中需要做一個網(wǎng)站的優(yōu)化工作,簡單總結(jié)了下和大家分享。優(yōu)化思路無非就是前端優(yōu)化,asp.net頁面生命周期優(yōu)化,數(shù)據(jù)訪問優(yōu)化,IIS與web.config配置優(yōu)化,為了避免篇幅太長,分了四個部分。下面一起來看第一部分:前端優(yōu)化,希望能幫助到大家!
前端優(yōu)化黃金14條要點
1.Make Fewer HTTP Requests(盡量減少HTTP請求)
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表達式)
8.Make JavaScript and CSS External(使用外部的JavaScript和CSS)
9.Reduce DNS Lookups (減少DNS查詢次數(shù))
10.Minify JavaScript(精簡JavaScript)
11.Avoid Redirects (避免重定向)
12.Remove Duplicate Scripts(刪除重復(fù)代碼)
13.Configure ETags (配置ETag)
14.Make Ajax Cacheable(使用Ajax緩存)
a. 壓縮圖片(1.1M)、css、js,壓縮圖片、css、js方法:
1.上傳圖片前壓縮,上線前手動壓縮圖片、css、js;
2.在輸出圖片時壓縮(開啟gzip或CompressionModule壓縮模塊)
b. 精簡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.禁用頁面ViewState方法:
禁用當(dāng)前頁面ViewState:
@Page指令中設(shè)置,代碼如下:
<%@ Page EnableViewState="false" %>
禁用整個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.詳情頁面(DrugDetails)禁用ViewState后頁面html由89.5kb減小到78.7kb,效果明顯。在簡單的刪除html行首空格后,頁面html減少到69.3 KB。
d. css sprit合并圖片;
1.詳情頁面有40多個背景圖片,可以考慮合并以減少http請求數(shù)。
e. 把css,js合并成一個文件。
2.詳情頁面引用css,js非常多,可以考慮合并成一個css和一個js文件,以減少http請求數(shù)。
f. css是異步加載,css放在頂部可以使頁面更快的顯示出來,js是阻塞加載,放在底部避免頁面加載阻塞。
詳情頁面中有大部分靜態(tài)資源都沒有加上過期時間,會導(dǎo)致瀏覽器不緩存這些靜態(tài)頁面。對靜態(tài)內(nèi)容配置一個較長的過期時間,用戶瀏覽器請求時會從本地緩存讀取,加快頁面顯示速度。
g. If-None-Match比If-Modified-Since具有更高的優(yōu)先級。
1.當(dāng)請求發(fā)現(xiàn)緩存文件的ETag和服務(wù)器http響應(yīng)頭中的ETag不同時,會重新請求文件。
瀏覽器端第一次訪問獲得服務(wù)器的Last-Modified,第2次訪問把瀏覽器端緩存頁面的最后修改時間發(fā)送到服務(wù)器去,服務(wù)器會把這個時間與服務(wù)器上實際文件的最后修改時間進行對比。如果時間一致,那么返回304,客戶端就直接使用本地緩存文件。
工作原理是在HTTP Response中添加ETag信息。 當(dāng)用戶再次請求該資 源時,將在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服務(wù)器驗證資源的ETag沒有改變(該資源沒有更新),將返回一個304狀態(tài)告訴客戶端使用本地緩存文件。否則將返回200狀態(tài)和新的資源和Etag。
h. 實際上沒有If-None-Match頭反而會好一些。
(PS:IIS6.0刪除ETag的方法)