首页 » 建站手册 » Typecho html css js等代码压缩,加快你的网站访问速度

Typecho html css js等代码压缩,加快你的网站访问速度

谷歌已收录,更新于2018年12月27日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

最近好喜欢写Typecho教程,大部分是原创教程,有一部分是学习来的。没有完全照着别人copy的教程,原来用wordpress的时候,很多都是F12扒来,然后自己用,从来不发教程,觉得太low。现在发现typecho相关教程太少,特此把自己会的发出来,造福大家。多谢各位的支持。

教程

一共分为三个部分吧,分别为CSS压缩,JS压缩,以及Html等代码压缩。

CSS压缩

进入主题目录,找到你的css相关文件

Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩

然后,打开你要压缩的css文件,如果不出现乱码,直接全选复制即可;如果出现乱码,请用系统的记事本打开,别用高级工具,或者网页打开你的css文件,详情如下图所示。

Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩
Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩

然后,点击进入CSS在线压缩工具,将你复制好的css粘贴进去,点击压缩;压缩完成后,全选复制压缩后的css代码。

Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩
Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩

接着,在当前文件夹新建一个*.min.css,用于与原css文件区别,将压缩后的代码粘贴进去,将编码改为UTF-8,保存文件。

Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩
Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩

修改你的主题文件,一般为header.php或者footer.php,将里面的css文件地址替换,即增加.min即可

Typecho html css js等代码压缩,加快你的网站访问速度-CSS压缩

然后,将剩下的css文件,全部相同方法压缩!

JS压缩

js压缩跟css压缩方法一致,复制好要压缩的js代码,点击进入JS在线压缩工具,将复制好的代码粘贴进去,点击净化,然后,将代码复制到新建的*.min.js文件,修改编码方式为utf-8,然后保存,最后修改主题文件header.php或者footer.php。需要注意的是,有些js代码压缩后,会无效,所以请自行尝试!

Typecho html css js等代码压缩,加快你的网站访问速度-JS压缩

Html压缩

在你主题的function.php文件的最后或者第二行,插入如下代码,不懂得请评论留言。

//html压缩
function compressHtml($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;
        } else if (strtolower(substr($c, 0, 12)) == '<nocompress>') {
            $c = substr($c, 12, strlen($c) - 12 - 13);
            $compress .= $c;
            continue;
        } else if (strtolower(substr($c, 0, 4)) == '<pre' || strtolower(substr($c, 0, 9)) == '<textarea') {
            $compress .= $c;
            continue;
        } else if (strtolower(substr($c, 0, 7)) == '<script' && strpos($c, '//') != false && (strpos($c, "\r") !== false || strpos($c, "\n") !== false)) {
            $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 == '"' && $chars[$key - 1] != '\\' && !$is_apos) {
                            $is_quot = !$is_quot;
                        } else if ($char == '\'' && $chars[$key - 1] != '\\' && !$is_quot) {
                            $is_apos = !$is_apos;
                        } else if ($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);
        $c = preg_replace('/<!--[^!]*-->/', '', $c);
        $compress .= $c;
    }
    return $compress;
}

然后,在你主题的footer.php</body>前插入如下代码。

<?php $html_source = ob_get_contents(); ob_clean(); print compressHtml($html_source); ob_end_flush(); ?>

后续说明

执行完每一步,请查看网站,是否有bug出现,或者功能缺失。最后,压缩html可能会压缩html中显js代码,导致此js功能失效,可以通过以下代码使得html压缩跳过这个js或者其他不想被压缩的html代码段

<!--<nocompress>-->
不进行压缩的html
<!--</nocompress>-->

<nocompress>
不进行压缩的html
</nocompress>

压缩后的效果,可以右击本站,查看网页源代码!!!
html代码压缩来源:https://www.linpx.com/p/pinghsu-subject-integration-code-compression.html

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫