壓縮HTML的起因
如何提高網頁載入速度 ,需要怎麼對html頁面最佳化相信是每個擬提高建站技術站長曾想到的問題,其實網頁最佳化的方法還是很多。
有童鞋詢問higrid如何 壓縮HTML,也就是說能不能 把所有的html、js、Css在運行前都壓縮成一行,清除註釋標記、分行符號、空格、定位字元等。這樣一個直接的好處是 減小html頁面體積來提高前端載入速度。很多人認為啟動gzip,但一般啟動gzip都比較少對html啟動gzip壓縮,因為現在的html都是動態,不會使用瀏覽器緩衝,而啟用gzip的話每次請求都需要壓縮,會比較消耗伺服器資源,對js,css啟動gzip比較好是因為js,css都會使用緩衝。而大家也用了很多軟體過濾一下壓縮,也有 線上js/css/html壓縮公用程式,higrid覺得也很麻煩,可讀性很差。higrid認為如果將壓縮功能做成一個函數的話,這樣開發人員看到的是未壓縮的狀態,但訪客訪問時,服務端的程式將 html頁面進行壓縮,清除註釋標記、分行符號、空格、定位字元等 來達到 減小了html體積的目的。 如果您經常訪問higrid.net, 右鍵查看一下 html原始碼 ,會看到本篇 html原始碼經過了壓縮處理。包括higrid.net 提供的免費內容管理系統 ,輸出的都是壓縮html,去掉了空白、分行符號、定位字元。但higrid.net 上面也有一些例外,就是higrid.net 主要推薦 線上表格 、線上圖形 ,包括 jquery這些示範 ,為了方便訪客,就沒有啟動壓縮。
因此,higrid個人覺得 壓縮html 的最大好處就是一本萬利,只要寫好了一次函數,以後在需要運用的時候調用一下就可以了,所有程式都可以使用,不會增加任何額外的開發工作。今天higrid就給大家分享幾個個人覺得好用的函數,請大家不妨試試看,相信大家會喜歡。
採用php來壓縮HTML
由於higrid對 php 比較感興趣,所以使用 php來壓縮HTML,當然使用其他語言也差不多,例如使用 asp來壓縮HTML,道理應該一樣的。
higrid將 壓縮html的功能用php寫成一個函數 ,其實網上這樣的 php壓縮函數 也很多,不信你可以百度或者Google,但多數不是很好用,特別在 壓縮js 或 壓縮CSS 的時候,主要原因是一些 壓縮注釋 等方面不同導致出現問題。 先看這個函數: 複製代碼 代碼如下:/**
* 壓縮html : 清除分行符號,清除定位字元,去掉注釋標記
* @param $string
* @return壓縮後的$string
* */
function compress_html($string){
$string=str_replace("\r\n",'',$string);//清除分行符號
$string=str_replace("\n",'',$string);//清除分行符號
$string=str_replace("\t",'',$string);//清除定位字元
$pattern=array(
"/> *([^ ]*) *</",//去掉注釋標記
"/[\s]+/",
"/<!--[^!]*-->/",
"/\" /",
"/ \"/",
"'/\*[^*]*\*/'"
);
$replace=array (
">\\1<",
" ",
"",
"\"",
"\"",
""
);
return preg_replace($pattern, $replace, $string);
}
php來壓縮HTML注意事項
php來壓縮HTM 實現的方式主要是用Regex去尋找,替換。在html壓縮的時候,主要要注意下面幾點:
1.HTML 文檔中,多個空白字元等價為一個空白字元。也就是說換行等空白字元的刪除是不安全的,有可能導致部分元素的樣式產生差異。
2.html中有一個pre, 表示 preformatted text. 裡面的任何空白,都不能被刪除,因此pre,textarea 標籤裡面的內容格式需要保留,不能壓縮。
3.HTML 中有可能有 IE 條件注釋。這些條件注釋是文檔邏輯的一部分,不能被刪除。因此去掉html注釋的時候,有些注釋是不能去掉的,比如:
4.壓縮嵌入式js中的注釋要注意,因為可能注釋符號會出現在字串中,比如: var url = "http://www.higrid.net"; // 前面的//不是注釋
5.對於動態網頁面來說,HTML 的壓縮有可能還會增加伺服器的 CPU 負擔,得不償失
higrid使用的php壓縮html函數代碼
由於注釋對代碼有作用,higrid使用的php壓縮html函數代碼 沒有去掉注釋,直接上代碼。 複製代碼 代碼如下:function higrid_compress_html($higrid_uncompress_html_source )
{
$chunks = preg_split( '/(<pre.*?\/pre>)/ms', $higrid_uncompress_html_source, -1, PREG_SPLIT_DELIM_CAPTURE );
$higrid_uncompress_html_source = '';//[higrid.net]修改壓縮html : 清除分行符號,清除定位字元,去掉注釋標記
foreach ( $chunks as $c )
{
if ( strpos( $c, '<pre' ) !== 0 )
{
//[higrid.net] remove new lines & tabs
$c = preg_replace( '/[\\n\\r\\t]+/', ' ', $c );
// [higrid.net] remove extra whitespace
$c = preg_replace( '/\\s{2,}/', ' ', $c );
// [higrid.net] remove inter-tag whitespace
$c = preg_replace( '/>\\s</', '><', $c );
// [higrid.net] remove CSS & JS comments
$c = preg_replace( '/\\/\\*.*?\\*\\//i', '', $c );
}
$higrid_uncompress_html_source .= $c;
}
return $higrid_uncompress_html_source;
}
php壓縮html函數代碼總結
有些童鞋不 推薦壓縮html , 主要原因除了上面所說的 php來壓縮HTML注意事項 外,通過 gzip 壓縮已經能達到很好的效果。另外,因為產生影響HTML的角色太多(靜態,動態,前端動態),也沒什麼量化指標,所以很難控制壓縮成什麼樣(代碼寫成什麼程度)。代碼更需要考慮執行效率,而不是傳輸效率。對於動態網頁面來說,HTML 的壓縮有可能還會增加伺服器的 CPU 負擔,得不償失。Google的壓縮網頁 是因為早期他希望首頁文本儘可能控制在一個或兩個包內,而且他的首頁太重要了,流量也很離譜。壓縮一個位元組,總流量一算都是個不小的數字,自然也就是必要之舉了。進一步的壓縮存在問題,除非能像 Google 一樣充分測試(Google 也僅壓縮了少部分核心服務的頁面),否則不推薦對 HTML 進行壓縮處理。
但使用higrid.net 的 php壓縮html函數 代碼,能很好的解決這個問題。好了,還不快試試。