網站前台效能最佳化教程，前台效能最佳化教程

網站前台效能最佳化教程，前台效能最佳化教程

之前一系列博文介紹了網站背景資料庫效能最佳化，其實前端的最佳化也是很重要的。在資料庫範文速度提升上去的時候，仍然會出現頁面載入緩慢的現象，此時，就需要對於網站的前端代碼進行最佳化。

 

關於前端效能最佳化的教程不多，好不容易找到了一本教材，《高效能網站建設指南》，下面以此書的內容為主線，講解一下前端效能最佳化的方法。

 

 

一、           減少http請求

這是提高前端效能的一個重要原則。

能少一次請求就少一次。

 

1.      使用圖片地圖

我們知道，一個img標籤會向伺服器發起一次請求擷取圖片，那麼如果把多個圖片合成一張圖片，就可以將多次請求變成一次請求了，這就是圖片地圖。

圖片地圖通過使用者點擊的位置不同而相應不同的事件，這樣就會使得前台代碼變得較複雜，難以看懂，個人覺得不太可行。

 

 

2.      合并JavaScript和Css檔案

一個script標籤或者link標籤也會向伺服器發起一次請求，所以必須減少頁面中引用外部檔案的次數。一般來說，一個頁面配一個JS和一個CSS。

 

3.      避免重新導向

重新導向也會發出Http請求。

 

二、           使用內容發布網路

       該系統會自動選取與使用者最近的伺服器。

 

三、           使用緩衝

1.      指定Expire頭

給組件使用Expire指定使用緩衝

也可以使用Cache-Control：max-age=315360000代替

 

2.      使用外置的Js和Css檔案

       內建的js和css通常不會被緩衝。

 

四、           壓縮組件

       將代碼進行精簡。有其是Js代碼

       主要方法有，將空格刪除，將較長變數名用v_1、v_2之類代替

       工具：gzip

 

五、           將CSS檔案放在頂部

       這樣可以使得頁面逐步載入呈現，增強使用者體驗，防止白屏。

 

六、           將JavaScript檔案放在底部

防止下載指令碼阻塞了頁面顯示。

 

 

JavDroider's Blog   歡迎批評建議~~