Typecho博客的速度优化

Overview

由于在写笔记的时候会用到公式，因此使用了一个插件MathJax，可以很漂亮显示公式，但是发现用了这个插件之后，有公式显示的页面加载特别慢，使用Chrome查看了链接请求，发现了问题所在：这个插件会请求 cdn.mathjax.com 上的js代码，而 cdn.mathjax.com 的服务器非常不稳定，因此经常需要等待很久，网页才能正常显示。
好在因为Chrome会缓存js，css，图片等信息，因此通常这种情况会发生在用户第一次访问或者定期清理了缓存之后。
为了有更好的用户体验和加载速度，我把插件MathJax插件用到的库放到了我们自己的服务器上。
修改之后，发现还有外链，干脆直接一起给放到服务器上了。

`MathJax`公式插件

下载`MathJax`开源库

这里的MathJax库是指插件用到的开源库，可以在github上下载到：https://github.com/mathjax/MathJax attention here

2024年12月10号更新 最新版本的MathJax已经改变了目录结构，根目录中已经不再有我们下面会用到的MathJax.js文件了，所以这里提供一个以前的历史版本下载：https://github.com/mathjax/MathJax/releases/tag/2.6.0。从这个页面的末尾点击Source code链接下载。

上传到服务器

下载之后解压缩，重命名为MathJax，我放在了blog的一个目录下：blog/usr/uploads/js。

修改代码

在blog/usr/plugins中找到MathJax.php，MathJax.php就是插件MathJax的所有文件，编辑MathJax.php，找到下面这行代码：

echo '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [[\'$\',\'$\'], [\'\\\\(\',\'\\\\)\']]}});</script><script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>';

可以看到src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"，修改为src="http://####/blog/usr/uploads/js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"就可以了。
这里的http://####/blog就是我们博客的地址，可以看得出来，我们修改插件，让他指向了放在服务器上的MathJax库。attention here

2024年12月10号更新 如果下载的是最新版本的，会发现目录更改了，已经没有MathJax.js了，需要引用新的文件MathJax/es5/tex-mml-chtml.js，可以相应地修改为src="http://####/blog/usr/uploads/js/MathJax/es5/tex-mml-chtml.js?config=TeX-AMS-MML_HTMLorMML"就可以了（欢迎反馈）。

现在重新打开网站涉及公式的文章，瞬间响应。

`font-awesome`

修改了MathJax插件之后，发现还是有外链存在，借助Chrome看了下博客的外链请求，发现下面的外链指向：http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css，想了下还是放在自己的服务器上吧，一来是可以加速访问，二来可以防止哪天别人不提供服务了，我们就没办法加载这个css文件了。

下载`font-awesome.min.css`

直接从http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css就可以打开这个css，右键另存就可以了。

上传到服务器

我们把自己保存的font-awesome.min.css上传到blog所在的文件夹下blog/usr/themes/jianshu/css，因为我们使用了jianshu主题，为了方便，我直接放在了jianshu的css文件夹中。

修改代码

找到，将下面这句代码：

<link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css">

修改为

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/font-awesome.min.css'); ?>">

就可以访问到我们服务器上的font-awesome.min.css了。

下载`font-awesome`资源文件

重新加载网页，发现网站上的小图标都没了！我开始去了解下font-awesome是什么，找到下面的解释：

Font Awesome 是为 Twitter Bootstrap 设计的图标字体。通过Web Font的方式来显示一些图标，好处是图标可以被任意缩放、改变颜色，你需要做的只是像修改文字样式那样修改图标样式。

清楚它的作用之后，再仔细查看font-awesome.min.css文件，发现里面有几处代码，举一例说明：

src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')

原来font-awesome.min.css定义的样式中用到的素材库我们没有放在服务器上。
从github上下载下来完整的font-awesome库：https://github.com/FortAwesome/Font-Awesome。下载之后解压缩，把其中的font文件夹上传到blog/usr/themes/jianshu文件夹中，跟这个文件夹中的css文件夹一个层级。

现在访问，就可以正常使用我们的网站了。