为什么公式要在构建期渲染
把 LaTeX 公式搬上网页有两条路：浏览器端渲染，或者构建期渲染。 这个站点选了后者，理由是首屏体验。
两条路的区别
浏览器端渲染的做法是：HTML 里先放 $E=mc^2$ 的原文，
加载完 KaTeX 的 JS 之后再把它替换成排版好的公式。
构建期渲染则在打包时就把公式转成 HTML 标记，浏览器拿到的就是最终结果。
| 浏览器端渲染 | 构建期渲染 | |
|---|---|---|
| 首屏 | 公式先闪一下原文 | 直接是最终效果 |
| JS 体积 | 需要 KaTeX 运行时 | 不需要 |
| 构建耗时 | 快 | 稍慢 |
| 无 JS 环境 | 公式显示为原文 | 正常显示 |
闪一下有多难受
公式密集的文章里，「先看到一堆美元符号和反斜杠，再突然变成公式」这个过程 在慢网络上会持续好几百毫秒。阅读节奏被打断，而且滚动位置会跳。
构建期渲染没有这个问题，因为页面到达时公式就已经是最终形态了。
代价是什么
构建时间会变长，而且公式写错时问题会暴露在构建阶段。 这其实是好事——总比上线之后读者看到一堆红色报错要好。
一个常见的坑是转义。反斜杠在 Markdown 与 LaTeX 里都是特殊字符，
矩阵换行要写成 \\：
只需要 CSS
构建期渲染之后，浏览器端唯一需要的只有 KaTeX 的 CSS （字体与排版尺寸），而这份 CSS 只在详情页加载—— 首页的卡片列表和文章摘要里没有公式，不需要为它付出体积代价。