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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 幫頁面減肥。

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

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

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

例如：

 span >
 很明顯，在“你好”后邊的那些語句是沒有任何作用的，我們可以把它刪掉。
7. 刪除HTML的默認(rèn)屬性。
 HTML語言有很多默認(rèn)屬性，比如對齊、字體、顏色等，但網(wǎng)頁制作軟件會加入這些無用的代碼。如：align屬性默認(rèn)是左對齊，所以在左對齊時我們沒必要再寫“align=left”。
8. 優(yōu)化CSS。
 例如：使用簡寫的CSS。
 又或者：
 p >
 可以用p來包含：
 p >
9. Visibility快于Display。
10. 保持同一URL的大小寫一致性。
 Internet Explorer的緩沖區(qū)也是區(qū)別對待大小寫字符串的。因此，作為Web開發(fā)者，一定要記住保持相同鏈接的URL字符串在不同位置的大小寫的一致性。否則，就會在瀏覽器的緩沖區(qū)中存放同一位置的不同文件備份，也增加了下載同一位置內(nèi)容的請求次數(shù)。
11. 讓標(biāo)記有始有終。
12. 不要將整個頁面內(nèi)容塞到一個Table中。
 因為Table要等里面的所有內(nèi)容都加在完畢后才顯示出來，如果某些內(nèi)容無法訪問，則會拖延整個頁面的訪問速度。正確的做法是，將內(nèi)容分割到幾個具有相同格局的Table中去，不要全都塞到一個Table里。
13. 使用iframe嵌套另一個頁面。
 如果需要插入廣告代碼，又不想影響速度，那么使用iframe最合適不過了。不會因為廣告代碼延遲而影響頁面的顯示。
14. 把JavaScript移到HTMl文件末尾。
 因為JavaScript在處理的過程中會阻塞后面的頁面顯示，并且也會使HTML請求被阻止。
15. 友情鏈接的學(xué)問。
 (1) 只做文字鏈接，做文字鏈接是不會延遲網(wǎng)頁速度的。
 (2) 將所有鏈接放到一個獨立的分頁中區(qū)，然后在首頁鏈接上該頁。
 (3) 如果友情鏈接一定要出現(xiàn)在首頁，那么請將鏈接所在的整個Table放到頁面的最下方，因為頁面是由上到下逐行顯示的。
 (4) 友情鏈接的Logo圖片先下載后再上傳到自己的網(wǎng)頁空間。
16. 圖片優(yōu)化。
 (1) 減少圖片數(shù)：去除不必要的圖片。
 (2) 降低圖像質(zhì)量：JPG格式的圖片，降低5%的圖片看起來變化不是很大，但文件大小變化很明顯。
 (3) 使用恰當(dāng)?shù)母袷剑篔PG一般用于展示風(fēng)景、人物、藝術(shù)照的攝影作品，有時也用在電腦截屏上；GIF提供的顏色較少，可用在一些對顏色要求不高的地方，如網(wǎng)站Logo、按鈕、表情等；PNG格式能提供透明背景，一般用于需要背景透明顯示或?qū)D像質(zhì)量要求較高的網(wǎng)頁上。
17. 網(wǎng)址后加斜杠。
當(dāng)服務(wù)器收到這樣一個地址，需要時間去確定這個地址的文件類型。如果220是一個目錄，則不妨在網(wǎng)址后多加一個斜杠，這樣服務(wù)器就一目了然地知道要訪問該目錄下的index或default文件，從而節(jié)省加在時間。
18. 標(biāo)明高度和寬度。
 如果沒有設(shè)置，則瀏覽器一邊下載圖片一邊計算大小，如果圖片很多，則瀏覽器就需要不斷地調(diào)整頁面，這不但影響速度，也影響瀏覽體驗。當(dāng)瀏覽器知道了高度和寬度后，即使圖片無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載快了，瀏覽體驗也更好了。
以上就是關(guān)于html頁面優(yōu)化的實例詳解的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。