Lan Tian @ Blog

Typecho 主题性能优化和缓存

为了实现 Lightbox、代码高亮等功能,我在我的博客主题中写了一些后处理代码,对 Typecho Markdown 输出后的 HTML 代码再进行一层处理。但是因为我的博客历史文章较多,我在不同时期也用了不同的编辑器(WordPress 编辑器,百度 UEditor 等等),为了尽可能保证历史文章也能正常显示,我的处理逻辑比较复杂。再加上我用的廉价 VPS 性能本就不怎么样,相应的网页加载时间也较长。

我在 nginx 配置中添加了这样一行,以在 HTTP 头中输出网页在服务器端处理的用时:

1
add_header LT-Latency $request_time;

最初,这个值是 0.25 左右,代表着每个网页需要在服务器端处理 250ms 之久。于是,我在大概一年前(2018 年 3 月 11 日,《大幅优化了博客主题性能》)大改了一轮后处理逻辑,修改点大致如下:

  • 原先,为了对应历史文章代码,我使用多条正则表达式一条条进行匹配、替换。我在修改时将有些正则表达式整合成一条,并且直接在数据库中改了一些文章的原始 HTML 代码,减少渲染时不必要的工作。
  • Typecho 的很多函数都是直接 echo,而非返回值。原先,为了获取它们的结果,我使用 ob_start 以及 ob_get_flush 函数来捕获对应函数的输出,但这样效率较低。研究 Typecho 代码之后发现,可以直接在主题中使用 $this->content 来获取渲染后的文章数据;类似的,大多数需要的参数都可以这样获取。

修改这两个主要的问题之后,LT-Latency 显示的延迟降到了 0.1。已经有了很明显的改善,但是还是不够。于是,我决定上 Redis 缓存。

耗时都在哪里

PHP 的 Xdebug 扩展带有 Profiling 功能,可以详细输出每个函数的耗时。首先在自己的环境下安装 Xdebug,通常可以用包管理器完成:

1
2
apk add php7-pecl-xdebug
apt-get install php-xdebug

或者,如果包管理中没有,可以自行到 Xdebug 官网下载源码编译:

1
2
3
4
5
6
tar xvf xdebug.tar.gz
cd xdebug
phpize
./configure --enable-xdebug
make -j4
make install

然后在 php.ini 中添加以下内容启用 Xdebug:

1
2
3
4
5
[xdebug]
zend_extension=/usr/local/Cellar/php/7.3.1/pecl/20180731/xdebug.so
xdebug.profiler_enable=0;
xdebug.profiler_enable_trigger=1;
xdebug.profiler_output_dir="/Users/lantian/Htdocs";

第一行是 Xdebug 的安装路径,2、3 行说明默认不启用 Xdebug,但是在“收到触发”(由特定的 HTTP 请求头触发)后启用。第四行是 Profiling 结果的保存路径。

之后,Chrome 浏览器安装“Xdebug Helper”插件。在需要 Xdebug 时,在插件菜单选择“Profile”并刷新页面,上面指定的路径就会出现一份文件名以 cachegrind 开头的报告。报告可以用 Kcachegrind、Qcachegrind 等软件打开。

对于我的情况,主要耗时在侧边栏的小部件上(大约 40%!),Typecho 的 Markdown 渲染(15%),以及自己的后处理函数上(10%),那就给它们加上 Redis 的缓存。

具体怎么做

Typecho 已经有了缓存插件,例如 TpCache 等。但是在我之前试用时,它们经常无法在文章更新或者发表评论后自动刷新缓存。同时,它们缓存的只是 Typecho Markdown 这一层,无法覆盖到我自己写的后处理函数。

我希望获得的效果是:将文章的 Markdown 原始代码 hash 作为 key,将文章在 Markdown 渲染及后处理后的结果作为 value,放入 Redis 进行缓存。但经过研究,在主题层面无法直接获得文章的原始代码,而我又不想修改 Typecho 的核心,这可能会影响后续的升级。

直到我发现一个插件:Typecho Parsedown。它用 Parsedown 替代了 Typecho 内置的名为 HyperDown 的 Markdown 解释器。更为重要的是,它的 Plugin.php 中有如下代码:

1
2
3
4
5
6
7
public static function markdown($text)
{
require_once dirname(__FILE__) . '/Parsedown.php';
return Parsedown::instance()
->setBreaksEnabled(true)
->text($text);
}

在这里,它可以同时拿到文章的原始代码及 Markdown 渲染结果,将原始代码 hash 作为 key,渲染结果作 value,可以做一层缓存。再加上后处理函数可以将 Markdown 渲染结果与后处理结果再同样缓存一次,这两层缓存可以在不大改架构的情况下取得较好的缓存效果。还有一个优点,这样的缓存结果不用反复清空,文章内容不变时 hash 不变,缓存永久有效;hash 变动后缓存自动失效。

对于同样耗时很多的侧边栏,我直接将 HTML 代码进行了缓存,并为 key/value 对设置了 10 分钟的失效时间(TTL)。

于是我就写了一对 Redis 的 get/set 函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function lantian_cache_set($key, $value, $ttl = 0) {
// Don't use cache if either Redis is not set, or Redis plugin isn't installed
if(!defined('__LANTIAN_REDIS_HOST__') || !defined('__LANTIAN_REDIS_PORT__')) return false;
if(!class_exists('Redis')) return false;
try {
$redis = new Redis();
if(!$redis->pconnect(__LANTIAN_REDIS_HOST__, __LANTIAN_REDIS_PORT__)) return false;
$key_prepend = 'lt-theme-v' . LANTIAN_THEME_REVISION . '-';
if($ttl != 0) {
return $redis->set($key_prepend . $key, $value, Array('ex' => $ttl));
} else {
return $redis->set($key_prepend . $key, $value);
}
} catch (Exception $e) {
return false;
}
}

function lantian_cache_get($key) {
// Don't use cache if either Redis is not set, or Redis plugin isn't installed
if(!defined('__LANTIAN_REDIS_HOST__') || !defined('__LANTIAN_REDIS_PORT__')) return false;
if(!class_exists('Redis')) return false;
try {
$redis = new Redis();
if(!$redis->pconnect(__LANTIAN_REDIS_HOST__, __LANTIAN_REDIS_PORT__)) return false;
$key_prepend = 'lt-theme-v' . LANTIAN_THEME_REVISION . '-';
return $redis->get($key_prepend . $key);
} catch (Exception $e) {
return false;
}
}

然后,为了简化代码,我写了一个 Wrapper,可以将现有函数的输入输出进行缓存:

1
2
3
4
5
6
7
8
9
10
11
12
13
function lantian_cache_wrap($key, $func, $args = NULL, $ttl = 0) {
if($cache = lantian_cache_get($key)) return "<!-- LT Cache Hit Start -->" . $cache . "<!-- LT Cache Hit End -->";
ob_start();
$value = '';
if($args != NULL) {
$value = call_user_func_array($func, $args);
} else {
$value = call_user_func($func);
}
$value .= ob_get_flush();
lantian_cache_set($key, $value, $ttl);
return "<!-- LT Cache Miss Start -->" . $value . "<!-- LT Cache Miss End -->";
}

然后将它套到原先的函数上就行:

1
2
3
4
5
6
7
8
9
10
// 原有函数带参数,缓存不过期
function lantian_content_processor($html) {
return lantian_cache_wrap($key, function($html) {
// Slow code
}, array($html));
}
// 原有函数不带参数,缓存 600 秒
echo lantian_cache_wrap($key, function() {
// Slow code
}, NULL, 600);

添加缓存之后,首页的 LT-Latency 稳定在了 0.04 左右(因为文章多),相比之前又减了一半。内页的最低延迟甚至可以达到极低的 0.015,15ms。再加上 InstantClick 插件,完全可以秒开。

(然而因为近期国内访问外网又双叒叕很不稳定,这段时间可能感受不到了)