ampproject / ampproject/amphtml
🐌 amp-mathml is painfully slow. Benchmarking amp-mathml vs. KaTeX
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## Describe the new feature or change to an existing feature you'd like to see
The current version of [`amp-mathml`](https://amp.dev/documentation/components/amp-mathml/) seems to be based on MathJax. This is a huge bottleneck for pages with lots of math. An alternative version based on [KaTeX](https://katex.org/) might fix this.
## Describe alternatives you've considered
The current implementation *does* work, but it doesn't deliver on the fast load times AMP intends to have.
## Additional context
I *cannot promise* intend-to-implement **I2I** any time soon.
Benchmarks below.
---
## The Benchmark
This benchmark is based on a summary of "[Mirror Descent for Metric Learning: A Unified Approach](https://doi.org/10.1007/978-3-642-33460-3_60)" that includes 88 math blocks, mixed between inline blocks and equations.
Two versions of this web page were created:
1. Based on `amp-mathml`
2. Based on [KaTeX](https://katex.org/)
### Reproducing
See this gist: https://gist.github.com/hayesall/33ba7aed8ebfbf0dba761cb7ba501342
```bash
git clone https://gist.github.com/hayesall/33ba7aed8ebfbf0dba761cb7ba501342 hayesall-amp-demo
cd hayesall-amp-demo
python -m http.server # Start an HTTP server with Python 3
```
| AMP Complient? | Method | URL |
| :--- | :---: | :--- |
| No | KaTeX | http://0.0.0.0:8000/katex.html |
| Yes | `amp-mathml` | http://0.0.0.0:8000/amp-mathml.html#development=1 |
Preview of part of the benchmark page:

### Benchmark 1: `amp-mathml`
- **Gist**: [`amp-mathml.html`](https://gist.github.com/hayesall/33ba7aed8ebfbf0dba761cb7ba501342#file-amp-mathml-html)
- **githack**: [Live Demo Page](https://gist.githack.com/hayesall/33ba7aed8ebfbf0dba761cb7ba501342/raw/b68292f0204a0f910c98ed4b7fd0b80acfc5e7f9/amp-mathml.html)
All equations were rendered after around **22,000 ms**:

### Benchmark 2: `KaTeX`
- **Gist**: [`katex.html`](https://gist.github.com/hayesall/33ba7aed8ebfbf0dba761cb7ba501342#file-katex-html)
- **githack**: [Live Demo Page](https://gist.githack.com/hayesall/33ba7aed8ebfbf0dba761cb7ba501342/raw/b68292f0204a0f910c98ed4b7fd0b80acfc5e7f9/katex.html)
There is some delay in the beginning between when I refreshed the page, but the rendering took place between 1000 ms and 1200 ms, or around **200 ms**.

Contributor guide
Research direction
Start by reproducing the supplied gist benchmark with Python's HTTP server, comparing amp-mathml.html against katex.html and reviewing the linked amp-mathml and KaTeX documentation. Determine the implementation scope and acceptance criteria with maintainers; done would require an AMP-compliant approach whose rendering performance is measured against the reported baseline.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100