“尝试 Mathjax 预渲染的一些问题”

在去年我宣布通过 ZEIT NOW（现在的 Vercel NOW）托管博客后，我的博客终于可以通过引入 Jekyll 插件的方式优化很多构建流程，所以其实我就在同步地改造很多底层的基础设施。现在已经过了一年了，这个博客用上了我自己实现的 Markdown 语法分析器和转换器，也有了数十多个插件用于优化我写博客和观众浏览博客的体验。例如 Mediun 式的图片懒加载，其实是博客在构建时将每一张图片的低清缓存直接插入 Html 文本；还例如博客加密插件让我终于可以不用去关注加密流程，而关注于创作本身。

之前就发现在存在公式的页面， Mathjax 是拖慢页面加载速度的一大罪魁祸首。原因根本上是由于 Mathjax 要遍历页面每一个公式，生产相对应的公式符号，而这个过程是完全可以被提前「渲染」的。即我在构建这个静态博客的同时，就对每一个公式提前渲染成 svg 图片。理想很美好，但现实很骨感，虽然现在的博客已经抛弃了 Mathjax 的在线渲染而转向预渲染（你可以通过检查开发者控制台是否存在 Mathjax 相关资源来验证），但还有很多问题没有解决。这篇博客把这些问题做一个梳理，希望有人做过的同学能提供一点思路，或者等我以后研究出来了更新这篇博文下面。

现在存在的问题：

1. 由于在预渲染的时候，插件本身是不知道自己和装自己的容器的尺寸的，所以他没有办法像在线渲染一样自动对自己的大小进行调整。再加上我的博客是响应式的，很多容器本来就没有一个固定的大小。所以目前实现的预渲染方案中，你可以期待在不同的页面尺寸下的公式，甚至同一个页面尺寸、不同的公式有不同的不一致的表现。例如，有的地方字体很小，有的地方字体很大。

2. 公式如果过长，无法自动换行。目前只有手动调试。

3. 目前预渲染无法提前渲染目录里的公式，这是由于 Jekyll 对站点进行构建时的构建顺序决定的。

举个上述问题的例子¹：