網站優化思路總結之前端

一：減少HTTP請求

1：把多張圖片處理成一張圖片以減少HTTP請求

background-image:url(`a.gif`);
background-position:-260px -90px;
width:20px;height:20px;

可以通過如上CSS程式碼顯示一張大圖片中的某個位置

2：合併指令碼和樣式表

一個頁面應該使用不多於一個的指令碼和樣式檔案

但是用什麼樣的辦法才能使一個大型網站達到這個要求

我的想法：前端開發人員可以儘可能的按自己的架構和思路開發JS和CSS檔案

最後釋出程式碼的時候通過工具把這些檔案進行合併（目前暫時沒有發現類似的工具，不過開發一個不難）

二：為靜態檔案建立不同的域

把圖片、指令碼、FLASH、CSS等靜態的內容放到單獨的域當中去

如果有資金充足可以建立多個伺服器分別儲存圖片指令碼等靜態檔案

如果資金欠缺可以僅把這些靜態檔案放到不同的域當中去

之所以這樣做就是為了讓我們的網站有並行響應一些客戶端請求的能力

注意：如果是建立多個不同的伺服器或者選虛擬主機提供商，如果能讓及其離客戶近一些最好了

三：處理HTTP頭中的狀態碼

1：Expires頭
如：Expires:2010-12-30 0:00:00
標誌著元件（js，圖片等）在這個時間之前，儲存在客戶端的版本是有效的

2：Cache-Control頭
如：Cache-Control:max-age=315360000
秒為單位，標誌著元件在這個時間段之後過期

以上兩種頭可以同時使用，
第二中是HTTP1.1中引入的

如下是在IIS下給指定目錄新增HTTP頭的方法
在IIS中選中某個網站下的一個目錄，點屬性，HTTP頭，新增即可。

四：啟用Gzip壓縮

Gzip壓縮的應該針對的是HTML文件，JS指令碼檔案，或CSS樣式表檔案

不應使用Gzip壓縮圖片和FLASH，因為這些檔案本就是被壓縮過的.

（在IIS上啟用Gzip壓縮比較麻煩，以後有機會應開發一個工具。）

Gzip壓縮耗費了CPU的執行時間而減少了網路傳輸流量，有得必有失。但在這裡90%的情況得大於失，而且效果顯著

給IIS啟用GZIP的方法：

需要在硬碟上建一個目錄，並給它“IUSR_機器名”這個使用者的寫許可權。如果壓縮動態檔案（PHP，asp，aspx）就不需要了，因為它的頁面是每次都動態生成的，壓縮完就放棄。然後在IIS管理器中，“網站”上面右鍵－屬性，不是下面的某個站點，而是整個網站。進入“服務”標籤，選上啟用動態內容壓縮，靜態內容壓縮。然後選中網站下面那個伺服器擴充套件，新建一個伺服器擴充套件。名字無所謂，下面的新增檔案的路徑是：c:windowssystem32inetsrvgzip.dll，然後啟用這個擴充套件。在c:windowssystem32inetsrv下面有個MetaBase.xml檔案，可以用記事本開啟，找到IIsCompressionScheme，有三個相同名字的段，分別是deflate,gzip,Parameters，第三段不用管它，前兩段有基本相同的引數，在這兩段的引數HcScriptFileExtensions下面都加上一行shtml，如果你有其它的動態程式要壓縮，也加在這裡。HcDynamicCompressionLevel改成9，（0－10，9是價效比最高的一個）。

五：將樣式表放在頂部

如果把CSS檔案放到HTML的尾部

當HTML內容全部載入完後才下載CSS檔案

瀏覽器在載入完CSS之前是不會呈現任何內容的(因為它現在還不知道如何呈現)

應該在Html文件的head標籤中使用<link  rel=”stylesheet” href=”css.css”>來引用CSS檔案

不應該使用@import在CSS文件內部引用其他的CSS檔案，這樣做不利於除錯

 

未完待續…