如何使 MathJax 更快？

Question

我在一个包含大量数学表达式的网站上工作。我将 MathJax 与 React 结合使用（使用 'react-mathjax-preview'），但我注意到渲染数学方程式很慢，并且在刷新页面时可以注意到。我与 Mathematics Stack Exchange 等使用 MathJax 的网站进行了比较，我发现方程式的呈现速度更快（即使页面包含大量数学表达式）。那么为什么我的数学运算速度变慢了呢？以及如何让它像 Mathematics Stack Exchange 一样快速？

注意：我尝试将KaTex与react一起使用，它比MathJax更快，但是分数和根的定位以及文本样式存在一些问题。所以我又回到了 MathJax，因为它还提供了更多的 latex 功能，并且比 KaTex 使用得更多。

注意：在表格中包含数学表达式的情况下，问题似乎更严重，因为它们是在单独的 <MathJax /> 组件中编写的。

比如这段代码渲染的很慢，但是它只包含了9个数学表达式。（我处理的一些页面包含超过 50 个分隔的数学表达式（即使在使用像 'align' 环境这样的环境时也是如此）。

<div>
    <table className="table-style-a2">
        <thead>
            <tr>
                <th>Radical in the integral</th>
                <th>Trigonometric substitution</th>
                <th>Hyperbolic substitution</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><MathJax math={String.raw`$\sqrt{a^2-x^2}$`} /></td>
                <td><MathJax math={String.raw`$x = a \sin (\theta)$`} /></td>
                <td><MathJax math={String.raw`$x = a \tanh (\phi)$`} /></td>
            </tr>
            <tr>
                <td><MathJax math={String.raw`$\sqrt{a^2+x^2}$`} /></td>
                <td><MathJax math={String.raw`$x = a \tan (\theta)$`} /></td>
                <td><MathJax math={String.raw`$x = a \sinh (\phi)$`} /></td>
            </tr>
            <tr>
                <td><MathJax math={String.raw`$\sqrt{x^2-a^2}$`} /></td>
                <td><MathJax math={String.raw`$x = a \sec (\theta)$`} /></td>
                <td><MathJax math={String.raw`$x = a \cosh (\phi)$`} /></td>
            </tr>
        </tbody>
    </table>
</div>

\ Just an example

提前致谢。

Answer 1

我不知道 react-mathjax-preview 中是如何实现的，但在我自己的库 better-react-mathjax 中，您的问题的解决方案是将 DOM 的较大部分分组，其中包含同一 MathJax 组件内的多个表达式。否则会发生什么（至少在我的库中）我们在 Mathjax 中同步排列多个排版操作，即使它可以一次完成所有排版。这通常不是问题，但有很多数学问题。但是，您在我的图书馆中的示例不足以显示：

https://codesandbox.io/s/user-example-14-so72149128-6nw8r5

无论如何，通过这样做：

<MathJax>
    <table className="table-style-a2">
        <thead>
            <tr>
                <th>Radical in the integral</th>
                <th>Trigonometric substitution</th>
                <th>Hyperbolic substitution</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{"$\sqrt{a^2-x^2}$"}</td>
                <td>{"$x = a \sin (\theta)$"}</td>
                <td>{"$x = a \tanh (\phi)$"}</td>
            </tr>
            <tr>
                <td>{"$sqrt{a^2+x^2}$"}</td>
                <td>{"$x = a \tan (\theta)$"}</td>
                <td>{"$x = a \sinh (\phi)$"}</td>
            </tr>
        </tbody>
    </table>
</MathJax

你可以在没有运行的情况下添加更多的数学问题：

https://codesandbox.io/s/user-example-13-so72149128-obxokb

如果您仍然遇到问题，您还可以做其他事情：

将页面分成更小的部分，也许是可扩展的区域，这些区域在扩展之前不会排版。从用户体验的角度来看，同一页面上的信息过多也不是最佳选择。
如果您真的需要一次显示所有数学，请尝试关闭初始自动排版，然后简单地添加多个 larger-portion MathJax 组件。由于这些是按顺序排列的，第一个将首先排版，因此您可以确保页面的第一部分尽早排版，而后面的部分（在登陆页面后的前 X 秒内不可见） ) 稍后排版。

如何使 MathJax 更快？

How to make MathJax faster?

reactjs

math

latex

mathjax