首頁 > web前端 > html教學 > HTML網頁優化壓縮的實作步驟

HTML網頁優化壓縮的實作步驟

php中世界最好的语言
發布: 2017-11-29 11:57:41
原創
3355 人瀏覽過

想要对自己的HTML网页实现优化压缩的话需要检查5个方面,分别是,将table改为div布局,缩减精简div、span、ul li等系列标签,删除多余空格,表格类型布局时候适当使用table替代div布局,html网页GZIP压缩,将table改为div布局 。下面给大家详细的介绍一下

尽量将table标签布局html重构div布局,可以节约至少40%的代码量。由于div代码少于table布局的html网页,所以搜索引擎索引权重也优于table布局的html网页。

缩减精简div、span、ul li等系列标签  

布局DIV+CSS网页时候,我们有时候可以节约一些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>
登入後複製

这样可以节约一对div标签,从而减少html代码量,起到压缩html作用。这样直接对ul命名css样式类,可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格   -   TOP


删除多余空格换行,可以有效地压缩html代码占用字节,一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如:

 

  

 

 

可以删除空格与换行后:

 

這樣即可節約空格和換行所佔位元組。

注意的是,網頁發布版的可以藉助DW進行刪除多餘空格與空白行。如果要再編輯,再到DW軟體進行程式碼格式化排版即可。

四、表格類型佈局時候適當使用table替代div佈局  -   TOP


#如果本身是表格資料清單排版,我們最好選擇table,因為表格佈局使用table優於div佈局,所以使用table佈局比div佈局節約html標籤程式碼和節省css樣式。

如下圖表格資料類型,建議採用TABLE標籤+CSS樣式佈局

html網頁程式碼壓縮table標籤佈局表格

#類似這種列表型table表格,建議使用table標籤佈局

五、網頁GZIP壓縮  -   TOP


自己的伺服器推薦設定網頁Gzip壓縮功能。

1.開GZIP有什麼好處?

答案:Gzip開啟以後會將輸出到使用者瀏覽器的資料進行壓縮的處理,這樣就會減少透過網路傳輸的資料量,提高瀏覽的速度。

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

答案:首先,如果你需要壓縮靜態檔案(HTML),需要在硬碟上建立目錄,並給它「IUSR_機器名”這個用戶的寫權限。如果壓縮動態檔案(PHP,asp,aspx)就不需要了,因為它的頁面是每次都動態產生的,壓縮完就放棄。然後在IIS管理器中,「網站」上面右鍵-屬性,不是下面的某個站點,而是整個網站。進入「服務」標籤,選啟用動態內容壓縮,靜態內容壓縮。然後選中網站下面那個伺服器擴展,新建一個伺服器擴展。名字無所謂,下面的新增檔案的路徑是: c:\windows\system32\inetsrv\gzip.dll,然後啟用這個擴充。這時候靜態內容是可以壓縮的,但是對於動態內容,aspx檔案卻不在壓縮範圍內。因為預設的可壓縮檔案並沒有這個副檔名。而管理介面中你又找不到可以增加副檔名的地方,這時候只能去修改它的設定檔了。在c:\windows\system32\inetsrv\下面有個MetaBase.xml文件,可以用記事本打開,找到IIsCompressionScheme,有三個相同名字的段,分別是deflate,gzip,Parameters,第三段不用管它,前兩段有基本相同的參數,在這兩段的參數HcScriptFileExtensions下面都加上一行aspx,如果你有其它的動態程式要壓縮,也加在這裡。 HcDynamicCompressionLevel改成9,(0-10,9是性價比最高的一個)。然後需要重啟一下IIS服務,就可以體會到壓縮後的速度了。

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!


相關閱讀:

html與xhtml的區別詳解

如何用CSS做圖片旋轉效果

怎麼優化HTML網頁

#

以上是HTML網頁優化壓縮的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
輸入<html><>後面是怎麼變成<html></html>的
來自於 1970-01-01 08:00:00
0
0
0
HTML與HTML5的差別
來自於 1970-01-01 08:00:00
0
0
0
HTML總結
來自於 1970-01-01 08:00:00
0
0
0
HTML總結
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板