Optimizing MathJax for Improved Speed

If the previous suggestions were not successful in resolving your issue, the ultimate and evergreen solution for Windows-related problems, apart from simply restarting your computer, is to perform a clean installation of Windows. There is no need to obtain Windows installation media or go through the process of reinstalling the operating system.


Question:

While working on a website that features numerous mathematical expressions, I utilized MathJax combined with React (specifically ‘react-mathjax-preview’). However, upon refreshing the page, I observed that the rendering of equations (
rendering math
) was considerably slower compared to websites like Mathematics Stack Exchange. Even on pages with a significant amount of equations (
math expression
), Mathematics Stack Exchange was able to render them faster. Therefore, I am curious as to why my mathematical equations are rendered slower and how I can enhance their speed to match that of Mathematics Stack Exchange.

I attempted to utilize react with KaTex instead of MathJax for faster performance. However, I encountered issues with the positioning of fractions, roots, and text style. Therefore, I switched back to MathJax, which not only offers greater functionality but is also more widely used.

The issue appears to be more severe when
math expressions
are included in tables, since they are written as separate

<MathJax />

components.

For instance, this code snippet has just 9 mathematical expressions, yet its rendering speed is slow. In contrast, some of the pages I deal with have over 50 individual math expressions, even when utilizing environments like the ‘align’ environment.

Radical in the integral Trigonometric substitution Hyperbolic substitution
\ Just an example

Thanks in advance.


Solution:

In

react-mathjax-preview

, I am not familiar with the implementation details, but in my own library,

better-react-mathjax

, a possible solution to your issue is to group larger portions of the DOM that contain multiple expressions within the same

MathJax

component. In my library, if this is not done, multiple typesetting operations are queued synchronously in Mathjax, even though it could perform all the typesetting in one operation. While this is typically not a problem, it could potentially become an issue when dealing with a significant amount of math. However, your example in my library does not illustrate this problem.

Here is the link to the user example with the code: https://codesandbox.io/s/user-example-14-so72149128-6nw8r5.

Anyways, by instead doing this:


    
Radical in the integral Trigonometric substitution Hyperbolic substitution
{"$\sqrt{a^2-x^2}$"} {"$x = a \sin (\theta)$"} {"$x = a \tanh (\phi)$"}
{"$sqrt{a^2+x^2}$"} {"$x = a \tan (\theta)$"} {"$x = a \sinh (\phi)$"}

There is room to incorporate a significant amount of additional mathematics without encountering any issues.

The link to the code example is available at “https://codesandbox.io/s/user-example-13-so72149128-obxokb”.

In case you continue to encounter difficulties, there are additional actions you can take.

  • To optimize the user experience, it is advisable to divide the page into smaller sections, such as expandable areas, that are not typeset until they are expanded. This prevents overcrowding the page with excessive information.
  • If it’s necessary to display all the math simultaneously, consider disabling the initial automatic typesetting and instead include multiple larger portions of code. As these portions are queued in order, the first one will be typeset first. This ensures that the initial part of the page is typeset early, while the subsequent parts (which are not visible in the first X seconds after accessing the page) are typeset later.

Frequently Asked Questions