日常工作中需要做一個網站的優化工作,簡單總結了下和大家分享。優化思路無非就是前端優化,asp.net頁面生命周期優化,數據訪問優化,IIS與web.config配置優化,為了避免篇幅太長,分了四個部分。下面一起來看第一部分:前端優化,希望能幫助到大家!
前端優化黃金14條要點
1.Make Fewer HTTP Requests(盡量減少HTTP請求)
2.Use a Content Delivery Network (使用內容分發網絡(即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查詢次數)
10.Minify JavaScript(精簡JavaScript)
11.Avoid Redirects (避免重定向)
12.Remove Duplicate Scripts(刪除重復代碼)
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 少用父子關系
.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方法:
禁用當前頁面ViewState:
@Page指令中設置,代碼如下:
<%@ Page EnableViewState="false" %>
禁用整個WEB應用程序ViewState:
修改Web.config中相應元素的屬性即可。代碼如下:
<pages enableViewState="false" />
禁用服務器全局的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請求數。
e. 把css,js合并成一個文件。
2.詳情頁面引用css,js非常多,可以考慮合并成一個css和一個js文件,以減少http請求數。
f. css是異步加載,css放在頂部可以使頁面更快的顯示出來,js是阻塞加載,放在底部避免頁面加載阻塞。
詳情頁面中有大部分靜態資源都沒有加上過期時間,會導致瀏覽器不緩存這些靜態頁面。對靜態內容配置一個較長的過期時間,用戶瀏覽器請求時會從本地緩存讀取,加快頁面顯示速度。
g. If-None-Match比If-Modified-Since具有更高的優先級。
1.當請求發現緩存文件的ETag和服務器http響應頭中的ETag不同時,會重新請求文件。
瀏覽器端第一次訪問獲得服務器的Last-Modified,第2次訪問把瀏覽器端緩存頁面的最后修改時間發送到服務器去,服務器會把這個時間與服務器上實際文件的最后修改時間進行對比。如果時間一致,那么返回304,客戶端就直接使用本地緩存文件。
工作原理是在HTTP Response中添加ETag信息。 當用戶再次請求該資 源時,將在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服務器驗證資源的ETag沒有改變(該資源沒有更新),將返回一個304狀態告訴客戶端使用本地緩存文件。否則將返回200狀態和新的資源和Etag。
h. 實際上沒有If-None-Match頭反而會好一些。
(PS:IIS6.0刪除ETag的方法)