MathJax loading time

[dnarnold]

I have a feeling that there is nothing we can do about the time it takes for all the mathjax to load, which frequently results in element pop-ups coming up with latex macros displayed rather than formulas. But perhaps there are things that can be done in the page source that makes a difference, hence this issue. For example, would it help if we ran a macro-processor on the web files which expanded out, once forever, complex macros like \dofm{1}{2}{3}{4}{5}?

[hnarayanan]

Yes, this could be tried, but I would like your help with doing so. You can clone this repository to get the current versions of your make?.py (in the generators folder), and update the generators to provide the expanded LaTeX instead of the macros.

[hnarayanan]

(But I too have a feeling that the load time has more to do with the number of terms MathJax has to deal with, as opposed to this transformation step.)

[dnarnold]

I'm willing to give this a try, and I have cloned the repository, but I had something slightly different in mind. I guess that everything that mathjax renders is ultimately in the file app/index.html. Is that right? This file make use of the following tex macros

\pl \mP \mQ \mS \Pm{1}{2}{3} \Qm{1}{2}{3} \S{1}{2}{3} \dof{1}{2}{3}{4}{5} \dofm{1}{2}{3}{4}{5} \dofq{1}{2}{3}{4}{5} \dofs{1}{2}{3}{4}{5}

and no others. So I thought I would write a sed script, or something like that, that would replace each of these strings (for the first four), or the corresponding patterns (for the others) with the fully written out latex.

Does that seem like a reasonable approach to you? It has the advantage that it will replace all the macros you've created, not just the ones in the make?.py scripts. If you agree, I'll give it a try.

I need one more piece of information. Where can I find the definitions you use for the above macros. I don't want to mess something up by creating slightly different macros.

[hnarayanan]

What you suggest above is a reasonable approach. The procedure I follow (for the popups) is the the following:

1. Run each of python make?.py and save their corresponding output in element_familes/?.py (You will see the current version of the output checked into the repository).
2. Then, I run python generate_popups.py > foo.html
3. It is the contents of foo.html that I paste into app/index.html between <!-- GENERATED ELEMENT DETAIL POPUPS START HERE --> and <!-- GENERATED ELEMENT DETAIL POPUPS END HERE -->

You can edit the content at any point (either your make?.pys, or using sed their output) before replacing the content in index.html.

Finally, the definitions for the macros follow the latex files in the Dropbox folder, and reside in app/scripts/main.js in MathJax's notation.

[dnarnold]

OK, I have made a filter, expand-macros.sh, which you can call as

expand-macros.sh < index.html > new-index.html

Here it is:

#!/bin/bash
sed \
-e 's/\\mP/\\mathcal{P}/g' \
-e 's/\\mQ/\\mathcal{Q}/g' \
-e 's/\\mS/\\mathcal{S}/g' \
-e 's/\\Pm{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\\mathcal{P}^-_{\1}\\Lambda^{\2}(\\Delta_{\3})/g' \
-e 's/\\P{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\\mathcal{P}_{\1}\\Lambda^{\2}(\\Delta_{\3})/g' \
-e 's/\\Qm{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\\mathcal{Q}^-_{\1}\\Lambda^{\2}(\\square_{\3})/g' \
-e 's/\\S{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\\mathcal{S}_{\1}\\Lambda^{\2}(\\square_{\3})/g' \
-e 's/\\pl/\\,+\\,/g' \
-e 's/\\dof{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\1\\times\\underbrace{\\mathcal{P}_{\2}\\Lambda^{\3}(\\Delta_{\4})}_{\5}/g' \
-e 's/\\dofm{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\1\\times\\underbrace{\\mathcal{P}^-_{\2}\\Lambda^{\3}(\\Delta_{\4})}_{\5}/g' \
-e 's/\\dofq{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\1\\times\\underbrace{\\mathcal{Q}^-_{\2}\\Lambda^{\3}(\\square_{\4})}_{\5}/g' \
-e 's/\\dofs{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}{\([0-9]*\)}/\1\\times\\underbrace{\\mathcal{P}_{\2}\\Lambda^{\3}(\\square_{\4})}_{\5}/g'

It is difficult for me to test because of the reasons we discussed. Could you run it to create a new index.html and try it out. We want to see (1) that it produces identical output, and (2) whether it loads faster. If you go with it, you can get rid of the macro definitions in main.js.

[hnarayanan]

It was a good try, but not successful. I ran your script and created a new version of the site. I loaded both the old version and the new version three times and timed the mathjax loading indicator. The results were surprisingly consistent and similar. The timing values on my 4 year old laptop were 7.5--8 s across these 6 runs.

[dnarnold]

OK. Was worth a try I guess.

[hnarayanan]

I will pause thinking about this for the upcoming release of the website, but will be experimenting in the future when I have more time. Reflecting this, I will keep this issue open but marked to be resolved later.

[hnarayanan]

(I will not be working on any of these in earnest anytime soon, just documenting possible ideas to try at some arbitrary point in the future.)

• After giving KaTeX some months to mature, attempt replacing MathJax with it. This project is very-many-fold faster than MathJax, but does a lot less and is less consistent across different browsers (today).
• After giving MathJax-node some time to mature, attempt replacing current MathJax with pre-rendered to SVG server-side MathJax. Theoretically, this should move some of the heavy rendering steps to one-time operations, rather than bog down each page load for everyone visiting the site.
• Rewrite the site in a more sophisticated manner (using a client-side templating/data-binding framework) to actually get the content of the individual modal popups only when clicked. This should limit the number of terms MathJax needs to render on initial page load to a manageable number. Later it can handle each additional piece as needed.