WordPress前端页面html压缩输出

无论是wordpress,还是其他任何php实现前端页面输出的系统,我们都可以通过php来对html进行一个格式化,使html能够经过格式化后输出,可以起到减少页面容量加快网页下载等效果。在wordpress中,实际上,我们通过wordpress的钩子等特性进行处理,只需要更多的去研究格式化的一些规律。

那么具体我们需要面对哪些格式化清除呢?

  1. 清除换行(有特殊情况,往下读)
  2. 清除连续的空格、换挡(先用一个空格代替)
  3. 清除一些没有必要的内容

我们用下面的一个替换来进行换行清除:

$buffer = str_replace(array("\t","\n\n","\n","\r"),' ',$buffer);

它同时清除了换挡。全部先用一个空格来表示。

但是,这个地方有两个特殊情况:1. 如果网页中存在javascript代码区域,而该区域中又有//注释,那么这个清除换行处理会导致//后面所有的脚本代码失效;2:不能直接将换行替换为'',即空,因为在一些情况下,程序员为了便于阅读,通过换行来实现元素之间的空格,例如:

<div>
    <span>a</span>
    <span>b</span>
</div>

其中的a和b中间其实是有空格的,但是如果直接清除换行和换挡,会导致空格消失,两个原本有间距的元素间距丢失。

连续的空格,我们用下面的代码来清除:

$buffer = preg_replace("/\s+/",' ',$buffer);

接下来,我们要去掉一些没有必要的内容,比如<img />标签,其实" />"(前面有空格)是没有必要的html5支持<img>这种不关闭标签的用法,所以,我们把所有的" />"替换为">",可以省两个字符的位置:

$buffer = str_replace(' />','>',$buffer);

我们还会如果忽略上面提到的脚本中的//注释问题,我们剩下来的问题,就是

接下来,我们来处理一下上面提到的问题。

原本,我们可以通过正则匹配 (\/\/.*\n)来替换到注释的,但是我们不得不考虑两种情况,1.如果代码中使用http://发出ajax请求怎么办?2.在很多技术博客中,文章内容里面的代码就有//注释。这两种情况,让我们不能随意使用正则替换,第二种情况导致我们连/**/区块注释也不能随便乱用,如果文章中有<pre>标签,那么我们连去除换行和连续空格都不能乱用。所以,这里问题可大了。

为此,我们不得不对上面的一些策略做出调整,比如换行,我们必须这样子去清除:

$buffer = preg_replace("/>\s*[\r|\n|\r\n]\s*</",'> <',$buffer)

即通过html标签的><标记去判断,例如

<div>
    <div></div>
</div>

这种情况。

那么怎么从html代码中分离出script和style呢?使用正则匹配即可。

preg_match_all("/<script[^>]*>.*?<\/script>/is",$html,$result);

所有的结果被保存在$result中,再对匹配到的结果进行遍历,替换完之后,再与原代码进行合并。

好了,前面聊了那么多,我们来开始写全部的代码吧

<?php

//压缩html代码
function wp_compress_html(){
    function wp_compress_js($js) {
        $js = preg_replace('#\/\*[^*]*\*+([^/][^*]*\*+)*\/#isU','',$js);//块注释
        $js = str_replace(array('<!--','-->'),'',$js);

        $h1 = 'http://';
        $s1 = '【:??】';    //标识“http://”,避免将其替换成空
        $h2 = 'https://';
        $s2 = '【s:??】';    //标识“https://”
        $js = str_replace($h1,$s1,$js);
        $js = str_replace($h2,$s2,$js);
        $js = preg_replace("#\/\/[^\n]*#",'',$js);//行注释
        $js = str_replace($s1,$h1,$js);
        $js = str_replace($s2,$h2,$js);

        $js = str_replace(array("\t","\r\n","\r","\n"),'',$js); // 去除换挡和回车
        $js = preg_replace("#\s(?=\s)#",'',$js); // 这是一个精妙的语法,是正则表达示里被称为“断言”的语法,这个替换的意思是,如果遇到一个\s,则预测这个\s后面为\s,如果真的为\s,则将它替换为''
        $js = preg_replace("#\s*(>|<|=|>=|<=|\?|:|==|\|\||\+=|\-=|\+\+|\-\-|\+|\-|\*|\/|,|\(|\)|;|\{|\})\s*#","$1",$js);//字符前后多余空格

        $js = trim($js);
        return $js;
    }
    function wp_compress_css($css) {
        $css = preg_replace('#\/\*[^*]*\*+([^/][^*]*\*+)*\/#isU','',$css);
        $css = str_replace(array('<!--','-->'),'',$css);

        $css = str_replace(array("\r\n","\r","\n","\t"),'',$css);
        $css = preg_replace("/\s(?=\s)/",'',$css);
        $css = preg_replace("#\s*(:|;|\{|\})\s*#","$1",$css);

        return $css;
    }
    function wp_compress_html_main ($html){
        // 先把script代码区块内的内容先净化
        preg_match_all("/<script([^>]*)>(.*?)<\/script>/is",$html,$result);
        if(isset($result[2]) && !empty($result[2])) {
            foreach($result[2] as $i => $item) {
                if(strpos($result[1][$i],'src=') !== false) {
                    $item = $result[0][$i];
                    $item = str_replace('type="text/javascript"',' ',$item); // 下面还会对空格进行净化,这里为了避免意外,保留为一个空格
                    $html = str_replace($result[0][$i],$item,$html);
                    continue;
                }
                $item = wp_compress_js($item);
                $html = str_replace($result[0][$i],'<script>'.$item.'</script>',$html);
            }
        }
        // 接着把style代码区块内的内容净化
        preg_match_all("/<style[^>]*>(.*?)<\/style>/is",$html,$result);
        if(isset($result[1]) && !empty($result[1])) {
            foreach($result[1] as $i => $item) {
                $item = wp_compress_css($item);
                $html = str_replace($result[0][$i],'<style>'.$item.'</style>',$html);
            }
        }
        // 接着处理><标签换行
        $html = preg_replace("#>\s*[\r|\n|\r\n]\s*<#",'> <',$html);
        // 将多个空格合并为一个
        $html = preg_replace("/\s(?=\s)/",'',$html);
        // 排除那些前后绝不需要空格的标签
        $html = preg_replace("#\s*(<html>|<\/html>|<head>|<\/head>|<title>|<\/title>|<body>|<\/body>|<meta |\/>|<style>|<\/style>|<script>|<\/script>|<link )\s*#","$1",$html);

        $html = trim($html);

        return $html;
    }
    if(!is_admin()) {
        ob_start("wp_compress_html_main");
    }
}
add_action('init', 'wp_compress_html');

2015-12-03