關於html頁面優化的實例詳解

1. 減少HTTP請求數。

    (1) 合併JS檔案和CSS檔案。

    (2) 合併框架圖片及相對變動較少的圖片或成一張，透過CSS背景切割完成渲染。

    (3) 合理使用本機Cache來快取JS/CSS/IMAGE。

2. 減少被要求檔案的大小，減少請求資料所佔用的網路頻寬。

    (1) 壓縮JS體積：刪除JS中空白換行、註解、混淆，把長變數換成短變數。

    (2) 壓縮CSS體積：刪除CSS註解、寫法盡量用簡寫。

    (3) 使用(X)HTML+CSS方式建構網站結構，提供CSS重複使用性，以減少(X)HTML檔案大小。

    (4) 使用伺服器端GZIP壓縮JS/CSS文件，縮小傳輸檔案大小。

3. 透過版本化控制客戶端快取。

    如何及時更新這些被快取的檔案呢？透過一個簡單的配置，透過修改JS的版本來及時告訴瀏覽器，這些文件必須重新請求了，不要繼續使用瀏覽器快取中的資料了。方案有以下幾個：

    (1) 手動改變這些JS的檔案名稱。

    (2) 手動改變這些JS的路徑。

    (3) 以URL Rewrite方式重定位JS路徑。

    (4) 透過一個在高回應伺服器上的JS設定告知頁面，這個頁面該連結哪些JS檔案。

    (5) 大版本不變，小版本不斷追加，等待一段時間後統一更新，有效利用快取。

4. 幫頁面減肥。

5. 刪除頁面中一些可有可無的內容。

    主要指冗餘的空格、製表符、空白行、雙引號、單引號、註解等。

6. 刪除網頁程式碼中的空語句。

    例如：

<span style=&#39;font-family:宋体&#39;>你好<span lang=EN-US><o:p></o:p></span></span>

    很明顯，在「你好」後邊的那些語句是沒有任何作用的，我們可以刪除它。

7. 刪除HTML的預設屬性。

    HTML語言有許多預設屬性，例如對齊、字體、顏色等，但網頁製作軟體會加入這些無用的程式碼。如：align屬性預設是左對齊，所以在左對齊時我們沒必要再寫「align=left」。

8. 最佳化CSS。

    例如：使用簡寫的CSS。

    又或：

<p class="decorated">1</p>
    <p class="decorated">2</p>
    <p class="decorated">3</p>
    <p class="decorated">4</p>

    可用p來包含：

  <p class="decorated">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>

9. Visibility快於Display。

10. 保持同一URL的大小寫一致性。

   Internet Explorer的緩衝區也是區別對待大小寫字串的。因此，作為一個Web開發者，一定要記住保持相同連結的URL字串在不同位置的大小寫的一致性。否則，就會在瀏覽器的緩衝區中存放同一位置的不同檔案備份，也增加了下載相同位置內容的請求次數。

11. 讓標記有始有終。

12. 不要將整個頁面內容塞到一個Table中。

   因為Table要等裡面的所有內容都加在完畢後才顯示出來，如果某些內容無法訪問，則會拖延整個頁面的訪問速度。正確的做法是，將內容分割到幾個相同格局的Table中去，不要全塞到一個Table裡。

13. 使用iframe嵌套另一個頁面。

   如果需要插入廣告代碼，又不想影響速度，那麼使用iframe最適合不過了。不會因為廣告代碼延遲而影響頁面的顯示。

14. 把JavaScript移到HTMl檔案最後。

    因為JavaScript在處理的過程中會阻塞後面的頁面顯示，也會使HTML請求被阻止。

15. 友情連結的學問。

    (1) 只做文字鏈接，做文字連結是不會延遲網頁速度的。

    (2) 將所有連結放到獨立的分頁中區，然後在首頁連結上該頁。

    (3) 如果友情連結一定要出現在首頁，那麼請將連結所在的整個Table放到頁面的最下方，因為頁面是從上到下逐行顯示的。

    (4) 友情連結的Logo圖片先下載後上傳到自己的網頁空間。

16. 圖片優化。

    (1) 減少圖片數：移除不必要的圖片。

    (2) 降低影像品質：JPG格式的圖片，降低5%的圖片看起來變化不是很大，但檔案大小變化很明顯。

    (3) 使用適當的格式：JPG一般用於展示風景、人物、藝術照的攝影作品，有時也用在電腦截圖上；GIF提供的顏色較少，可用在一些對顏色要求不高的地方，如網站Logo、按鈕、表情等；PNG格式能提供透明背景，一般用於需要背景透明顯示或對影像品質要求較高的網頁上。

17. 網址後加斜線。

當伺服器收到這樣一個位址，需要時間來確定這個位址的檔案類型。如果220是目錄，則不妨在網址後多加一個斜槓，這樣伺服器就一目了然地知道要存取該目錄下的index或default文件，從而節省加在時間。

18. 標示高度和寬度。

    如果沒有設置，則瀏覽器一邊下載圖片一邊計算大小，如果圖片很多，則瀏覽器就需要不斷地調整頁面，這不僅影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度後，即使圖片無法顯示，頁面上也會騰出圖片的空位，然後繼續載入後面的內容。從而加載快了，瀏覽體驗也更好了。

以上是關於html頁面優化的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！