明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

HTML頁面優(yōu)化壓縮的完成步驟

[摘要]想要對(duì)自己的HTML網(wǎng)頁實(shí)現(xiàn)優(yōu)化壓縮的話需要檢查5個(gè)方面,分別是,將table改為div布局,縮減精簡div、span、ul li等系列標(biāo)簽,刪除多余空格,表格類型布局時(shí)候適當(dāng)使用table替代div布局,html網(wǎng)頁GZIP壓縮,將table改為div布局 。下面給大家詳細(xì)的介紹一下盡量將tab...
想要對(duì)自己的HTML網(wǎng)頁實(shí)現(xiàn)優(yōu)化壓縮的話需要檢查5個(gè)方面,分別是,將table改為div布局,縮減精簡div、span、ul li等系列標(biāo)簽,刪除多余空格,表格類型布局時(shí)候適當(dāng)使用table替代div布局,html網(wǎng)頁GZIP壓縮,將table改為div布局 。下面給大家詳細(xì)的介紹一下

盡量將table標(biāo)簽布局html重構(gòu)div布局,可以節(jié)約至少40%的代碼量。由于div代碼少于table布局的html網(wǎng)頁,所以搜索引擎索引權(quán)重也優(yōu)于table布局的html網(wǎng)頁。

縮減精簡div、span、ul li等系列標(biāo)簽

布局DIV+CSS網(wǎng)頁時(shí)候,我們有時(shí)候可以節(jié)約一些DIV布局代碼,減少代碼量。

如下案例代碼:

<div class="div"> 
  <ul> 
  <li>DIV</li> 
  <li>DIV</li> 
  <li>DIV</li> 
  </ul> 
</div> 
可以改為:
<ul class="div"> 
  <li>DIV</li> 
  <li>DIVC/li> 
  <li>DIV</li> 
</ul>

這樣可以節(jié)約一對(duì)div標(biāo)簽,從而減少html代碼量,起到壓縮html作用。這樣直接對(duì)ul命名css樣式類,可以區(qū)別在一個(gè)頁面不同地方使用ul li列表標(biāo)簽。

三、刪除多余空格 - TOP


刪除多余空格換行,可以有效地壓縮html代碼占用字節(jié),一般在開發(fā)完成后可以對(duì)html中代碼進(jìn)行刪除換行和空格內(nèi)容。

可以借助于DW軟件進(jìn)行批量刪除html內(nèi)標(biāo)簽之間空格

如:

<div class="divcss5">

  <div ...></div>

</div>

可以刪除空格與換行后:

<div class="divcss5"><div ...></div></div>

這樣即可節(jié)約空格和換行所占字節(jié)。

注意的是,網(wǎng)頁發(fā)布版的可以借助于DW進(jìn)行刪除多余空格與空行。如果要再編輯,再到DW軟件進(jìn)行代碼格式化排版即可。

四、表格類型布局時(shí)候適當(dāng)使用table替代div布局 - TOP


如果是本身是表格數(shù)據(jù)列表排版,我們最好選擇table,因?yàn)楸砀癫季质褂胻able優(yōu)于div布局,使用table布局卻比div布局節(jié)約html標(biāo)簽代碼和節(jié)約css樣式。

如下圖表格數(shù)據(jù)類型,建議采用TABLE標(biāo)簽+CSS樣式布局

html網(wǎng)頁代碼壓縮table標(biāo)簽布局表格

類似這種列表型table表格,推薦使用table標(biāo)簽布局

五、網(wǎng)頁GZIP壓縮 - TOP


自己的服務(wù)器推薦設(shè)置網(wǎng)頁Gzip壓縮功能。

1.開GZIP有什么好處?

答:Gzip開啟以后會(huì)將輸出到用戶瀏覽器的數(shù)據(jù)進(jìn)行壓縮的處理,這樣就會(huì)減小通過網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量,提高瀏覽的速度。

2.如何啟用IIS的Gzip壓縮功能:

答:首先,如果你需要壓縮靜態(tài)文件(HTML),需要在硬盤上建一個(gè)目錄,并給它“IUSR_機(jī)器名”這個(gè)用戶的寫權(quán)限。如果壓縮動(dòng)態(tài)文件(PHP,asp,aspx)就不需要了,因?yàn)樗捻撁媸敲看味紕?dòng)態(tài)生成的,壓縮完就放棄。然后在IIS管理器中,“網(wǎng)站”上面右鍵-屬性,不是下面的某個(gè)站點(diǎn),而是整個(gè)網(wǎng)站。進(jìn)入“服務(wù)”標(biāo)簽,選上啟用動(dòng)態(tài)內(nèi)容壓縮,靜態(tài)內(nèi)容壓縮。然后選中網(wǎng)站下面那個(gè)服務(wù)器擴(kuò)展,新建一個(gè)服務(wù)器擴(kuò)展。名字無所謂,下面的添加文件的路徑是: c:\windows\system32\inetsrv\gzip.dll,然后啟用這個(gè)擴(kuò)展。這時(shí)候靜態(tài)內(nèi)容是可以壓縮的,但是對(duì)于動(dòng)態(tài)內(nèi)容,aspx文件卻不在壓縮范圍內(nèi)。因?yàn)槟J(rèn)的可壓縮文件并沒有這個(gè)擴(kuò)展名。而管理界面中你又找不到可以增加擴(kuò)展名的地方,這時(shí)候只能去修改它的配置文件了。在c:\windows\system32\inetsrv\下面有個(gè)MetaBase.xml文件,可以用記事本打開,找到IIsCompressionScheme,有三個(gè)相同名字的段,分別是deflate,gzip,Parameters,第三段不用管它,前兩段有基本相同的參數(shù),在這兩段的參數(shù)HcScriptFileExtensions下面都加上一行aspx,如果你有其它的動(dòng)態(tài)程序要壓縮,也加在這里。HcDynamicCompressionLevel改成9,(0-10,9是性價(jià)比最高的一個(gè))。然后需要重啟一下IIS服務(wù),就可以體會(huì)到壓縮后的速度了。

相信看了這些案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!


相關(guān)閱讀:

html與xhtml的區(qū)別詳解

如何用CSS做圖片旋轉(zhuǎn)效果

怎么優(yōu)化HTML網(wǎng)頁

以上就是HTML網(wǎng)頁優(yōu)化壓縮的實(shí)現(xiàn)步驟的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。