我們知道,在HTML中,你不僅僅要做出好看的網頁,也要考慮到網頁的最佳化問題,那麼今天就給大家帶來怎麼最佳化HTML網頁的思路,我總結了5點,一起來看一下
將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 c
lass="div"> <li>DIV</li> <li>DIV</li> <li>DIV</li> </ul>
這樣可以節約一對div標籤,從而減少html代碼量,起到壓縮html作用。這樣直接對ul命名css樣式類,可以區別在一個頁面不同地方使用ul li列表標籤。
刪除多餘空格
刪除多餘空格換行,可以有效地壓縮html代碼佔用位元組,一般在開發完成後可以對html中代碼進行刪除換行和空格內容。
可以藉助於DW軟體進行大量刪除html內標籤之間空格
如:
<div class="div"> <div ...></div> </div>
可以刪除空格與換行後:
<div class="div"><div ...></div></div>
這樣即可節約空格和換行所佔位元組。
注意的是,網頁發布版的可以藉助於DW進行刪除多餘空格與空行。如果要再編輯,再到DW軟體進行代碼格式化排版即可。
表格類型布局時候適當使用table替代div布局
如果是本身是表格式資料列表排版,我們最好選擇table,因為表格版面配置使用table優於div布局,使用table布局卻比div布局節約html標籤代碼和節約css樣式。
如表格式資料類型,建議採用TABLE標籤+CSS樣式布局
html網頁代碼壓縮table標籤表格版面配置
類似這種列表型table表格,推薦使用table標籤布局
網頁GZIP壓縮
自己的伺服器推薦設定網頁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中文網其它相關文章!
相關閱讀:
Js操作window視窗對象的實現步驟
Js操作非IE事件對象屬性,方法的詳細介紹
用DIV和CSS做一個實線邊框的紅色盒子