直接用renderMathInElement配合正确加载顺序和delimiter配置即可实现高性能LaTeX渲染；需确保katex.min.css在js前引入、auto-render.min.js在katex.min.js后引入，三者CDN版本严格一致，并显式配置$和$$分隔符及throwOnError:false。
直接用 renderMathInElement 配合正确加载顺序和 delimiter 配置，就能在 HTML 页面中实现高性能、零卡顿的 LaTeX 渲染；不用 MathJax 那套异步+polyfill 套路，KaTeX 同步渲染本身就不需要回流。
CDN 引入顺序和 integrity 属性必须严格匹配
KaTeX 的 CSS、JS、auto-render 三者版本不一致会导致公式错位、 rac 不显示、sqrt 漏边框等静默失败。官方推荐使用带 integrity 的 CDN 链接，且三者版本号完全相同（如 0.16.10）。
-
katex.min.css必须在katex.min.js之前引入，否则字体加载失败，符号变成方块 -
auto-render.min.js必须在katex.min.js之后引入，否则renderMathInElement未定义 - 所有 script 标签建议加
defer，避免阻塞 DOM 解析 - 不要混用
https://cdn.jsdelivr.net/npm/katex@0.16.8/...和@0.16.10/...—— 我见过因版本差一位导致egin{aligned}完全不渲染的线上事故
renderMathInElement 的 delimiter 配置决定公式是否被识别
默认配置只认 $$...$$ 和 [...]，但多数 Markdown 编辑器输出的是 $...$ 行内公式。不显式声明，这些公式就原样躺在页面里当纯文本。
- 必须手动传入
delimiters数组，至少包含：{left: "$", right: "$", display: false}（行内）、{left: "$$", right: "$$", display: true}（块级） -
display: true的公式会独占一行并居中，false则内联排版，影响行高和换行逻辑 - 不要启用
{left: "\(", right: "\)", display: false}后又忘记转义反斜杠——HTML 中写成\(E=mc^2\)才有效，否则会被浏览器解析为非法字符 -
throwOnError: false必须设为false，否则一个拼错的cfrac（KaTeX 不支持）会让整页公式停止渲染
按需加载可省掉 60% 以上空载资源
博客首页没公式却加载了 75KB 的 katex.min.js，是典型性能浪费。真实项目里，90% 页面根本不需要数学渲染能力。
- 先在
中只引入katex.min.css（约 20KB），它不影响首屏渲染 - 用
document.body.innerHTML.includes("$")或更稳妥的正则/$$|$[^$]|\[|\(/检测是否存在公式标记 - 检测到再动态
appendChild加载katex.min.js和auto-render.min.js，然后调用renderMathInElement - 注意：Vue/React 等框架中，不能在组件挂载后才插入 script 标签——得用
useEffect或onMounted+document.querySelector精准作用于当前容器，避免重复初始化
最易被忽略的是 delimiter 的转义细节和 CSS 加载时机：哪怕 JS 正确执行了 renderMathInElement，只要 katex.min.css 还没生效，所有公式都会以无样式、错位、重叠的方式闪现一帧——这不是 bug，是 CSS 未就绪的必然表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
