ampproject / ampproject/amphtml

🐌 amp-mathml is painfully slow. Benchmarking amp-mathml vs. KaTeX

Open
#29,729 5 comments 3 reactions 0 assignees View on GitHub
Component: amp-mathml P2: Soon Type: Feature Request Type: Performance WG: components
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:

![mdml_section2_border](https://user-images.githubusercontent.com/11916674/89574864-d2ffd980-d7fa-11ea-8b0c-b04a7cc99cc5.png)

### 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**:

![amp-mathml-flame-chart-border](https://user-images.githubusercontent.com/11916674/89577365-933af100-d7fe-11ea-90a6-bd200f374f5e.png)

### 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**.

![katex_flamegraph-border](https://user-images.githubusercontent.com/11916674/89577379-97670e80-d7fe-11ea-9d38-cd8115bab7fc.png)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.