MathJax vs KaTeX - Povzetek

1. Uvod

Zaradi občasnega pisanja enačb v mojih prispevkih, potrebujem slednje nekako prikazati. Lahko bi jih vključila kot sličice, kar tudi počnem na nekaterih straneh, ko nisem lena (npr. 137), kot zasilno rešitev v primeru, da obiskovalec nima omogočenega JavaScripta. Veliko lepše pa so enačbe prikazane s pomočjo knjižnic kot sta MathJax in KaTeX. O čemu je govora (na kratko):

1.1 MathJax

Starejša izmed obeh JavaScript knjižnic. Začetek projekta sega v leto 2009. Podpira večino LaTeX funkcij. Enačbe obdela tako, da najprej pregleda spletno stran, nakar natančno oblikuje matematično vsebino, ki jo na strani najde. Na ta način poskrbi, da se matematična vsebina lepo poda v okoliški tekst, vendar je zato izvedba dokaj počasna. (asinhrono izvajanje)

[30.5.2018] Velikost razširjenega arhiva izvorne kode MathJax-2.7.4: 187M
Spletna stran
Izdaje

1.2 KaTeX

Prva uradna verzija (v0.1.0) je izšla leta 2014. Knjižnica je ostredotočena na hitrost, neodvisnost od ostalih virov, kvaliteto tiskanja, omogoča pa tudi izris enačb na strežniški strani (server side rendering). Natančnost umeščanja matematičnih vsebin in njihov izgled nista njeni prioriteti. (sinhrono izvajanje)

[30.5.2018] Velikost razširjenega arhiva izvorne kode KaTeX-0.10.0-alpha: 7,5M
Spletna stran
Izdaje

2. Cilji testa

• primerjati učinkovitost (hitrost izvajanja in velikost) dveh JavaScript knjižnic za generiranje matematičnih enačb: KaTeX in MathJax
• ugotoviti ali ima KaTeX že dovolj funkcij, da je primeren za uporabo na teh spletnih straneh

3. Test

Postavila sem dve spletni strani, ki se razlikujeta le v uporabi omenjenih knjižnic, pa seveda v naslovu in povezavah na straneh, kar pa ne bi smelo bistveno uplivati na rezultate. Obe strani sta zgenerirani s privzetimi nastavitvami danih knjižnic:

<!-- mathjax -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 
  integrity="sha384-CABIusojVGLXKWOcdRP7wwh3SC7gjAbMmAnii19ZRH6QOsLiM6NIJ7Mb4BjfkQLU" 
  crossorigin="anonymous"></script>

<!-- katex -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css" 
  integrity="sha384-BTL0nVi8DnMrNdMQZG1Ww6yasK9ZGnUxL1ZWukXQ7fygA1py52yPp9W4wrR00VML" 
  crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.js" 
  integrity="sha384-y6SGsNt7yZECc4Pf86XmQhC4hG2wxL6Upkt9N1efhFxfh6wlxBH0mJiTE8XYclC1" 
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/contrib/auto-render.min.js" 
  integrity="sha384-IiI65aU9ZYub2MY9zhtKd1H2ps7xxf+eb2YFG9lX6uRqpXCvBTOidPRCXCrQ++Uc" 
  crossorigin="anonymous"></script>
<script>renderMathInElement(document.body);</script>

Omenjeni strani najdete na spodnjih povezavah:

• [MathJax test]
• [Katex test]

Kriteriji:

1. Hitrost (+ hitreje prikazana dokončno izrisana spletna stran)

2. Velikost (+ manjša velikost dokončno izrisane spletne strani)

3. Število zahtevkov (+ manj)

4. Ukazi, funcije, okolja (+ več)

4. Rezultati

4.1 Hitrost izvajanja in posledično čas nalaganja

Za meritve sem uporabila:

• Webpagetest
• Pingdom Website Speed Test
• GTmetrix

Zgornji testi sicer uprabljajo različne metrike, pa tudi lokacije merilnih strežnikov so različne, vendar so bili vsi testi na posamičnem servisu opravjeni iz enakih strežnikov z enako metriko za obe strani, tako da lahko kljub temu potegnemo nek zaključek. V fiziki sicer sklepanje na podlagi treh meritev ne bi bilo ravno veljavno, vendar v tem primeru menim, da bo dovolj dobro in nezavajajoče, saj ponavljanje meritev ne pokaže bistveno drugačnih rezultatov.

[Opomba]: Slovenskih terminov ne poznam, zato sem pustila angleške.

• Onload time: čas v katerem se naložijo, ne pa tudi izvedejo, vsi viri (css, js, slike, tekst)
• Fully loaded time: čas v katerem je stran povsem naložena

Ugotovitev: Onload time je na strani z MathJaxom sicer nekoliko krajši, vendar je fully loaded time približno 2,5x krajši za stran s KaTeX-om, kar pomeni veliko krajši čas izrisovanja enačb.

MathJax : KaTeX = 0 : 1

4.2 Velikost naložene strani

Ugotovitev: MathJax stran je manjša.

MathJax : KaTeX = 1 : 1

4.3 Število zahtevkov

Ugotovitev: KaTeX potrebuje manj zahtevkov za generiranje enačb.

MathJax : KaTeX = 1 : 2

4.4 Podprtost LaTeX ukazov

Seznam podprtih ukazov/funkcij/okolij:

• MathJax ukazi
• KaTeX ukazi

Težko bi preštela vse ukaze, vendar ima seveda MathJax še vedno veliko več ukazov, kot KaTeX.

MathJax : KaTeX = 2 : 2

5. Sklep

Glede na kriterije, ki sem jih postavila, je prišlo do izenačenja. Torej katero knjižnico uporabiti? Kaj odtehta pomanjkljivosti?

[tl;dr]
Za matematično vsebino na teh straneh, je KaTeX odličen: hiter, kompakten in podpira vse matematične vsebine za srednješolsko raven.

[ts;re]
MathJax uporabljam že vrsto let. Skoraj ni matematične vsebine, ki je ne bi mogla s pomočjo MathJaxa napisati. Ima ogromno nastavitev in možnosti. Moti me le dolg čas izrisovanja enačb.

Ko sem prvič preizkušala KaTeX leta 2014, se je zapletlo že pri prvi enačbi, ki sem jo želela napisati, saj KaTeX takrat še ni poznal nable. Z drugo enačbo, Gaussov zakon, tudi nisem imela sreče, saj ni bilo mej za iiint. Takrat sem sama KaTeXu prispevala nekaj simbolov, a sklenila, da bom KaTeX opustila dokler ne še malo dozori. Trenutno stanje je veliko boljše. Zataknilo se je šele pri Stokes-ovem izreku, oiint še ni podprt. Pa tudi okolja še niso dobro podprta, označevanja enačb ni, reference na enačbe niso podprte itd.

Za srednješolski nivo, bi se vsekakor odločila za KaTeX. Mogoče enačbe, izrisane s pomočjo omenjene knjižnice, res niso najbolj estetske, vendar so za moje, neumetniške oči, prav lepe. Upam, da mi tukaj moji profesorji matematike, ki so me vedno učili natančnosti, ne zamerijo preveč. Sicer pa sta pomembni tudi hitrost in zanesljivost, ki ju KaTeX zagotovo ima.

Za prikaz zahtevnejših matematičnih vsebin pa še vedno priporočam uporabo počasnejšega in okornejšega, ampak veliko bolje podprtega MathJaxa.

Sama si bom na teh straneh pustila obe predlogi, a poskušala uporabljati KaTeX v prihodnje. Pa da vidim, do kakih zapletov bo še prišlo.

Povezave:

• KaTeX and MathJax Comparison Demo
• KaTeX - a new way to display math on the Web
• MathJax Example Pages
• KaTeX is a (partial) alternative to (some of) MathJax

Slike:

EOF