KaTeX生成的MathML元素未显示的原因及替换为display:none的性能影响

为什么KaTeX插入的MathML元素不显示？ #

KaTeX生成MathML元素是为了提升公式的可访问性——屏幕阅读器等辅助技术可以读取MathML的结构，帮助视障用户理解数学公式的含义。

你当前使用的CSS是标准的「视觉隐藏」方案：通过clip: rect(1px,1px,1px,1px)、绝对定位等样式，把MathML元素移出可视区域，同时保留它在DOM中的存在，这样辅助技术仍能抓取到这部分内容，但普通用户看不到。这是兼顾视觉体验和可访问性的常规做法。

全局设置display:none能否提升渲染速度？ #

• 从性能角度看：display:none会让浏览器完全跳过该元素的渲染流程（包括布局、绘制），确实能节省极少量的性能开销，但这种提升在绝大多数场景下微乎其微——KaTeX生成的MathML代码量很小，对页面整体渲染速度的影响几乎可以忽略。
• 从可访问性角度看：display:none会让屏幕阅读器等辅助技术直接忽略该元素，导致视障用户无法读取公式内容，这是严重的可访问性缺陷，不推荐这么做。

如果你的场景确实不需要MathML（比如完全不考虑可访问性，或确定没有辅助技术用户），更高效的方式是在初始化KaTeX时直接指定输出格式为纯HTML，避免生成MathML元素：

katex.render("公式内容", element, {
  output: "html"
});

内容的提问来源于stack exchange，提问作者fweth