對于html頁面優(yōu)化的案例詳細說明

(1) 合并JS文件和CSS文件。

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

(3) 合理使用本地Cache來緩存JS/CSS/IMAGE。

2. 減小被請求文件的大小，減少請求數(shù)據(jù)占用的網(wǎng)絡帶寬。

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

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

(3) 使用(X)HTML+CSS方式搭建網(wǎng)站結構，提供CSS重用性，來減少(X)HTML文件大小。

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

3. 通過版本化控制客戶端緩存。

如何及時更新這些被緩存的文件呢？通過一個簡單的配置，通過修改JS的版本來及時告訴瀏覽器，這些文件必須重新請求了，不要繼續(xù)使用瀏覽器緩存中的數(shù)據(jù)了。方案有以下幾個：

(1) 手動改這些JS的文件名。

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

(3) 通過URL Rewrite方式來重定位JS路徑。

(4) 通過一個在高響應服務器上的JS配置告知頁面，這個頁面該鏈接哪些JS文件。

(5) 大版本不變，小版本不斷追加，等一定時間后統(tǒng)一更新，高效利用緩存。

4. 幫頁面減肥。

5. 刪除頁面中一些可有可無的內(nèi)容。

主要指冗余的空格、制表符、空白行、雙引號、單引號、注釋等。

6. 刪除網(wǎng)頁代碼中的空語句。

例如：

<span style='font-family:宋體'>你好<span lang=EN-US><o:p></o:p></span></span>

很明顯，在“你好”后邊的那些語句是沒有任何作用的，我們可以把它刪掉。

7. 刪除HTML的默認屬性。

HTML語言有很多默認屬性，比如對齊、字體、顏色等，但網(wǎng)頁制作軟件會加入這些無用的代碼。如：align屬性默認是左對齊，所以在左對齊時我們沒必要再寫“align=left”。

8. 優(yōu)化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的緩沖區(qū)也是區(qū)別對待大小寫字符串的。因此，作為Web開發(fā)者，一定要記住保持相同鏈接的URL字符串在不同位置的大小寫的一致性。否則，就會在瀏覽器的緩沖區(qū)中存放同一位置的不同文件備份，也增加了下載同一位置內(nèi)容的請求次數(shù)。

11. 讓標記有始有終。

12. 不要將整個頁面內(nèi)容塞到一個Table中。

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

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

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

14. 把JavaScript移到HTMl文件末尾。

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

15. 友情鏈接的學問。

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

(2) 將所有鏈接放到一個獨立的分頁中區(qū)，然后在首頁鏈接上該頁。

(3) 如果友情鏈接一定要出現(xiàn)在首頁，那么請將鏈接所在的整個Table放到頁面的最下方，因為頁面是由上到下逐行顯示的。

(4) 友情鏈接的Logo圖片先下載后再上傳到自己的網(wǎng)頁空間。

16. 圖片優(yōu)化。

(1) 減少圖片數(shù)：去除不必要的圖片。

(2) 降低圖像質(zhì)量：JPG格式的圖片，降低5%的圖片看起來變化不是很大，但文件大小變化很明顯。

(3) 使用恰當?shù)母袷剑篔PG一般用于展示風景、人物、藝術照的攝影作品，有時也用在電腦截屏上；GIF提供的顏色較少，可用在一些對顏色要求不高的地方，如網(wǎng)站Logo、按鈕、表情等；PNG格式能提供透明背景，一般用于需要背景透明顯示或?qū)�圖像質(zhì)量要求較高的網(wǎng)頁上。

17. 網(wǎng)址后加斜杠。

當服務器收到這樣一個地址，需要時間去確定這個地址的文件類型。如果220是一個目錄，則不妨在網(wǎng)址后多加一個斜杠，這樣服務器就一目了然地知道要訪問該目錄下的index或default文件，從而節(jié)省加在時間。

18. 標明高度和寬度。

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

以上就是關于html頁面優(yōu)化的實例詳解的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！