math

产品配图

+6

关于

      3.5KB 搞定公式渲染！是时候放弃 KaTeX / MathJax，拥抱原生 MathML 了 为什么说网页数学公式渲染一直以来都在“走弯路”？ 你敢相信吗？仅仅为了在网页里正常显示几个数学公式，你的项目就必须引入 260KB 甚至接近 1MB 的 MathJax/KaTeX 大礼包。更糟的是，这些库在浏览器的 JS 线程中动态计算字符宽度、对齐间距，并用绝对定位硬生生拼出成百上千个 DOM 节点来模拟排版。这不仅让用户的首屏加载缓慢，还极大地消耗了 CPU，造成严重的重绘卡顿。 其实，时代早已经变了。 自 2023 年 1 月起，随着 Chrome 109 正式支持 MathML Core，所有主流浏览器（Blink、Gecko、WebKit）早已完全实现了原生的数学公式排版。 这意味着：我们不再需要向前端打包庞大的排版引擎，所有的公式排版，完全可以交由浏览器的底层 C++ 引擎去高效完成！ @webc.site/math 就是为此诞生的开源项目：一个仅有 3.5KB (Gzip) 的 TeX-to-MathML 翻译器。我们只负责在几毫秒内将 TeX 语法转换为标准的 MathML 标签，把耗时的排版工作完全外包给浏览器本身。 为什么它具有极强的破坏力？ 1. 包体积狂缩 20 到 70 倍 @webc.site/math 压缩后仅有 3.58 KB，而 KaTeX 压缩后为 75.15 KB，MathJax 更是高达 278.39 KB。这让你可以毫无压力地将其打包进任何轻量前端应用、小程序，或在 SSR/SSG 构建阶段直接静态生成，实现网页首屏的瞬间加载。 2. 渲染速度暴增 3 到 48 倍 避开了 JS 排版计算后，它的编译性能达到了恐怖的 32.9 万次每秒（Ops/sec），是 KaTeX 的 3.6 倍，MathJax 的 48.8 倍。 3. LLM/AI 时代前端实时公式渲染的黄金搭档 在当下的 AI 智能对话（LLM Chat）场景中，AI 正在以前端流式输出（Streaming）的方式吐出大量的技术公式。在这种高频重绘场景下，传统的 MathJax/KaTeX 会造成显著的延迟和发热。而本库极低的 CPU 消耗，保证了即使在低端移动设备上，AI 输出公式时的打字机效果依然丝滑顺畅。 4. 极为硬核的容错设计 在处理用户或 AI 输入的公式时，如果有未闭合的 \left 或其他非法语法，本库会自动捕获异常并优雅退化为显示原始公式，绝不因为语法错误导致前端应用崩溃。 真实公式渲染排版效果展示 以下为浏览器使用 Latin Modern Math 字体原生渲染 TeX 公式转换后的 MathML 真实效果展示（导出为 SVG 矢量图）： 欧拉恒等式 (Euler's Identity) 二次方程求解公式 (Quadratic Formula) 麦克斯韦方程之一 (Maxwell's Equation) 薛定谔方程 (Schrödinger Equation) 性能对比数据 1. 体积对比（Gzip 压缩后） 2. 编译速度对比 (Ops/sec) 快速上手 1. 替换 Markdown 文本中的公式 javascript import mdMath from "@webc.site/math/md"; const markdown = "欧拉恒等式：$$e^{i\\pi} + 1 = 0$$"; const html = mdMath(markdown); 2. 直接转换单个 TeX 公式 javascript import mathml from "@webc.site/math"; const html = mathml("e^{i\\pi} + 1 = 0", true); 3. 数学字体配置推荐（关键） 虽然浏览器已原生支持 MathML，但为了达到印刷级别的精美排版，强烈建议配合 Latin Modern Math 数学字体使用（可使用 18s 字体包）： css / 引入在线数学字体 / @import url("//registry.npmmirror.com/18s/0.2.24/files/m.css"); math { font-family: m, sans-serif; } 坦诚的局限性 本库旨在满足 95% 场景下的日常需求，因此砍掉了少数冷门特性。它目前不支持化学公式扩展（如 \ce），复杂的自定义宏定义（如 \newcommand）。如果你的网站需要完美排版大学高等物理、化学论文级别的公式，可能仍需要使用 KaTeX。但对于个人博客、常规技术文档、AI 对话公式渲染等绝大多数场景，本库已经是极佳的替代选择。 欢迎大家前往 GitHub 试用、反馈与交流！

收录记录

1. 阮一峰周刊·用户投稿

   2026年6月7日 · 1 次收录

2. 阮一峰周刊·正刊推荐

   2026年6月12日 · 1 次收录