reactjs - 如何让 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 秒内看不到) )稍后排版。