如何让 MathJax 更快？

Question

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

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

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

例如，这段代码渲染得很慢，但它只包含 9 个数学表达式。（我工作的一些页面包含超过 50 个独立的数学表达式（即使使用“对齐”环境等环境）。

<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

如果您仍然遇到问题，您还可以采取其他措施：

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