壓縮HTML的起因
如何提高網頁加載速度,需要怎么對HTML頁面優化相信是每個站長曾想到的問題,其實網頁優化的方法還是很多。
如何壓縮HTML,也就是說能不能把所有的HTML、JS、CSS在運行前都壓縮成一行,清除注釋標記、換行符、空格、制表符等。這樣一個直接的好處是減小HTML頁面體積來提高前端加載速度。很多人認為啟動gzip,但一般啟動gzip都比較少對HTML啟動gzip壓縮,因為現在的HTML都是動態的,不會使用瀏覽器緩存,而啟用gzip的話每次請求都需要壓縮,會比較消耗服務器資源,對JS、CSS啟動gzip比較好是因為JS、CSS都會使用緩存。而大家也用了很多軟件過濾一下壓縮,也有在線js/css/html壓縮工具,個人覺得也很麻煩,可讀性很差。我認為如果將壓縮功能做成一個函數的話,這樣開發者看到的是未壓縮的狀態,但訪客訪問時,服務端的程序將HTML頁面進行壓縮,清除注釋標記、換行符、空格、制表符等來達到減小了HTML體積的目的。
因此情留メ蚊子個人覺得壓縮HTML的最大好處就是一本萬利,只要寫好了一次函數,以后在需要運用的時候調用一下就可以了,所有程序都可以使用,不會增加任何額外的開發工作。今天我就給大家分享一個我個人寫的函數,請大家不妨試試看,相信大家會喜歡。
使用PHP壓縮HTML注意事項
使用PHP來壓縮HTML實現的方式主要是用正則表達式去查找,替換。在HTML壓縮的時候,主要要注意下面幾點:
- HTML文檔中,多個空白字符等價為一個空白字符。也就是說換行等空白字符的刪除是不安全的,有可能導致部分元素的樣式產生差異。
- HTML中的pre、textarea標簽里面的任何空白,都不能被刪除,因此pre、textarea標簽里面的內容格式需要保留,不能壓縮。
- HTML中有可能有IE條件注釋。這些條件注釋是文檔邏輯的一部分,不能被刪除。因此去掉HTML注釋的時候,有些注釋是不能去掉的,比如:<!--[if lt IE9]> <![endif]-->
- 壓縮嵌入式JS中的注釋要注意,因為可能注釋符號會出現在字符串中,比如:var url = "http://blog.cbylpt.cn"; // 前面的//不是注釋
- 對于動態頁面來說,HTML的壓縮有可能還會增加服務器的CPU負擔,得不償失
PHP壓縮HTML函數
- 特殊情況下可以使用<!--<nocompress>--><!--</nocompress>-->或者<nocompress></nocompress>來指定不壓縮的代碼
- pre、textarea標簽不壓縮
- 特別對JS的單行注釋做出優化
/** * 壓縮HTML代碼 * * @author 情留メ蚊子 <qlwz@qq.com> * @version 1.0.0.0 By 2016-11-23 * @link http://blog.cbylpt.cn * @param string $html_source HTML源碼 * @return string 壓縮后的代碼 */ function qlwz_compress_html($html_source) { $chunks = preg_split('/(<!--<nocompress>-->.*?<!--<\/nocompress>-->|<nocompress>.*?<\/nocompress>|<pre.*?\/pre>|<textarea.*?\/textarea>|<script.*?\/script>)/msi', $html_source, -1, PREG_SPLIT_DELIM_CAPTURE); $compress = ''; foreach ($chunks as $c) { if (strtolower(substr($c, 0, 19)) == '<!--<nocompress>-->') { $c = substr($c, 19, strlen($c) - 19 - 20); $compress .= $c; continue; } elseif (strtolower(substr($c, 0, 12)) == '<nocompress>') { $c = substr($c, 12, strlen($c) - 12 - 13); $compress .= $c; continue; } elseif (strtolower(substr($c, 0, 4)) == '<pre' || strtolower(substr($c, 0, 9)) == '<textarea') { $compress .= $c; continue; } elseif (strtolower(substr($c, 0, 7)) == '<script' && strpos($c, '//') != false && (strpos($c, "\r") !== false || strpos($c, "\n") !== false)) { // JS代碼,包含“//”注釋的,單行代碼不處理 $tmps = preg_split('/(\r|\n)/ms', $c, -1, PREG_SPLIT_NO_EMPTY); $c = ''; foreach ($tmps as $tmp) { if (strpos($tmp, '//') !== false) { // 對含有“//”的行做處理 if (substr(trim($tmp), 0, 2) == '//') { // 開頭是“//”的就是注釋 continue; } $chars = preg_split('//', $tmp, -1, PREG_SPLIT_NO_EMPTY); $is_quot = $is_apos = false; foreach ($chars as $key => $char) { if ($char == '"' && !$is_apos && $key > 0 && $chars[$key - 1] != '\\') { $is_quot = !$is_quot; } elseif ($char == '\'' && !$is_quot && $key > 0 && $chars[$key - 1] != '\\') { $is_apos = !$is_apos; } elseif ($char == '/' && $chars[$key + 1] == '/' && !$is_quot && !$is_apos) { $tmp = substr($tmp, 0, $key); // 不是字符串內的就是注釋 break; } } } $c .= $tmp; } } $c = preg_replace('/[\\n\\r\\t]+/', ' ', $c); // 清除換行符,清除制表符 $c = preg_replace('/\\s{2,}/', ' ', $c); // 清除額外的空格 $c = preg_replace('/>\\s</', '> <', $c); // 清除標簽間的空格 $c = preg_replace('/\\/\\*.*?\\*\\//i', '', $c); // 清除 CSS & JS 的注釋 $c = preg_replace('/<!--[^!]*-->/', '', $c); // 清除 HTML 的注釋 $compress .= $c; } return $compress; }
壓縮HTML總結
有些童鞋不推薦壓縮HTML,主要原因除了上面所說的使用PHP壓縮HTML注意事項外,通過gzip壓縮已經能達到很好的效果。另外,因為產生影響HTML的角色太多(靜態,動態,前端動態),也沒什么量化指標,所以很難控制壓縮成什么樣(代碼寫成什么程度)。代碼更需要考慮執行效率,而不是傳輸效率。對于動態頁面來說,HTML的壓縮有可能還會增加服務器的CPU負擔,得不償失。Google的壓縮網頁是因為早期他希望首頁文本盡可能控制在一個或兩個包內,而且他的首頁太重要了,流量也很離譜。壓縮一個字節,總流量一算都是個不小的數字,自然也就是必要之舉了。進一步的壓縮存在問題,除非能像Google一樣充分測試(Google也僅壓縮了少部分核心服務的頁面),否則不推薦對HTML進行壓縮處理。
但使用情留メ蚊子的PHP壓縮HTML代碼,能很好的解決這個問題。好了,還不快試試。
原文地址:http://blog.cbylpt.cn/compress-html.html
轉載請注明出處 AE博客|墨淵 ? PHP對HTML進行代碼壓縮處理
發表評論