mathml 渲染卡顿源于浏览器对每个 标签独立解析、布局与绘制，无缓存复用；应采用 intersectionobserver 懒加载、序列化字符串缓存及服务端预渲染 svg 等方案优化。
MathML 渲染卡顿是因为每次都要解析 DOM 树
HTML5 中直接写 <math></math> 标签，浏览器会等整个页面加载完再触发 MathML 引擎（如 Gecko 的 MathML 模块或 Blink 的实验性支持），中间没有缓存、不复用已渲染结果。尤其在含几十个公式的长页面里，滚动时反复重排重绘，layout thrashing 就很明显。
- 不是公式本身复杂，而是每个
<math></math>都被当作独立节点重新走一遍样式计算 + 布局 + 绘制流程 - Chrome 115+ 默认禁用原生 MathML，需手动开启
chrome://flags/#enable-experimental-web-platform-features，否则实际走的是 fallback 方案（比如用 SVG 模拟），性能更差 - Firefox 支持最完整，但若页面有大量
<math></math>且未做分片，首次渲染仍可能卡住主线程 200ms+
用 IntersectionObserver 触发懒加载，别等 onload
等 window.onload 或 DOMContentLoaded 再初始化 MathML，用户已经看到空白占位或乱码了。正确做法是让公式只在即将进入视口时才解析。
- 给每个
<math></math>加class="math-lazy"，初始设aria-hidden="true"和style="opacity:0" - 用
IntersectionObserver监听，阈值设{ threshold: 0.1 }，避免刚露头就触发导致布局抖动 - 触发后调用
MathML.polyfill()（如果用了 polyfill）或直接让浏览器重绘该节点：el.offsetParent强制回流，再移除aria-hidden和 opacity
const obs = new IntersectionObserver((entries) => {
entries.forEach(ent => {
if (ent.isIntersecting) {
const el = ent.target;
el.removeAttribute('aria-hidden');
el.style.opacity = '1';
obs.unobserve(el);
}
});
}, { threshold: 0.1 });
MathML 节点不能直接 innerHTML 缓存，得存序列化字符串
想“缓存已渲染结果”？别存 DOM 节点引用，也别存 outerHTML（含浏览器自动补全的 namespace、多余属性，下次插入会触发重复解析）。
- 缓存前用
new XMLSerializer().serializeToString(mathEl)提取纯净 MathML 字符串 - 缓存键建议用公式内容哈希（如
md5(mathStr)），而不是序号或 id——同一公式可能出现在多处 - 从缓存恢复时，用
DOMParser解析：new DOMParser().parseFromString(str, 'application/xml').documentElement，再replaceChild - 注意：Firefox 对
application/xml解析严格，空格/换行错误会导致parseFromString返回 null
服务端预渲染 MathML 成 SVG 是最稳的降级方案
客户端 MathML 兼容性差、性能不可控，尤其要支持 Safari 或旧版 Edge 时，硬扛原生支持不现实。
立即学习“前端免费学习笔记（深入）”；
- 用
mathjax-node或TeXLive + dvisvgm在构建时把$E=mc^2$转成带<path></path>的 SVG，保留字体 hint 和 baseline 对齐 - SVG 文件加
loading="lazy"和decoding="async"，避免阻塞图像解码线程 - 关键点：SVG 必须内联（
<svg>...</svg>），不能<img src="..." alt="HTML5公式渲染慢怎么优化_HTML5MathML懒加载与缓存策略说明【方法】" >，否则无法和文字基线对齐，且无法响应字号变化 - 如果必须动态生成，至少用
fetch+Cache-Control: public, max-age=31536000缓存 SVG 字符串，避免重复请求
真正难的不是怎么让公式显示出来，而是怎么让它在不同缩放、不同字号、不同滚动速度下都不“跳”——这要求你放弃“一次性全量渲染”的念头，把每个公式当成一个可调度的微任务来对待。
