带有Vue的MathJax v3：重新呈现页面的速度非常慢

问题描述

我有一个Vue应用程序，其组件包含要由MathJax v3渲染（有时是重新渲染）的TeX。该组件在同一页面上多次出现（每个实例都有自己的内容）。

它可以工作，但速度令人难以置信，至少需要两倍的时间才能加载页面。我敢肯定，过去使用MathJax v2时并不会那么慢。

我尝试了以下方法（在开发和生产中（已完全部署）模式），但没有成功：

托管我自己的MathJax副本
将渲染功能放入包含TeX的组件中
将渲染功能放入父级组件
在MathJax.typset（）中包括可选参数，该参数指定应处理其内容的元素

我还尝试将MathJax直接包含在App.vue中（而不是在index.html中），但无法弄清楚该怎么做。

我在某处缺少什么吗？

Index.html从CDN中获取MathJax（这些行之一一次被注释掉了）：

index.html
<head>
  ...
  <script src="/mathjax/tex-mml-chtml.js" id="MathJax-script" async> </script>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
  ...
</head>

App.vue包含用于重新呈现相关内容的方法：

App.vue
<script>
  methods: {
    render() {
      window.MathJax.typeset()
    }
  },updated() {this.render() }
</script>

为清楚起见，其结构如下：

//TeX Component 1:

<template>
  <div>\( A = \pi {r}^{2} \)</div>
</template>


TeX Component 2:

<template>
  <div>\( C = \pi d \)</div>
</template>


Simplified parent component:

<template>
  <tex-component-one>
  <tex-component-two>
  ...
</template>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

mathjax vue.js