我在一個包含大量數學運算式的網站上作業。我將 MathJax 與 React 一起使用（使用 'react-mathjax-preview'），但我注意到渲染數學方程很慢，并且在重繪 頁面時可以注意到。我與使用 MathJax 的網站（如數學堆疊交換）進行了比較，我發現方程的渲染速度更快（即使頁面包含大量數學運算式）。那么為什么我的數學渲染速度變慢了呢？以及如何讓它像數學堆疊交換一樣快速？
注意：我嘗試使用 KaTex 和 react 比 MathJax 更快，但是分數和根的定位以及文本樣式存在一些問題。所以我回到了 MathJax，因為它還提供了更多的乳膠功能，并且比 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
提前致謝。
uj5u.com熱心網友回復：
我不知道事情是如何實作的，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 秒內看不到） ) 稍后排版。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/471334.html