hypothesis / hypothesis/client
Optimize highlight rendering in heavily annotated PDF pages
- Dominant language
- Mustache
- Stars
- 730
- Forks
- 224
- PR merge metrics
- No merged PRs in 30d
Description
Highlight rendering in heavily annotated PDF pages has recently been optimized (see https://github.com/hypothesis/client/pull/3745). However there can still be quite a lot of jank when drawing highlights in heavily annotated pages due to forced reflows.
I have a couple of ideas for how we could improve this in future. If / when we work on these, we'll probably want to split them out into separate issues.
**1. Defer drawing of SVG highlights to reduce forced reflows.**
When the client anchors a batch of annotations it will sequentially anchor and draw highlights for each annotation. Each call to `highlightRange` creates one or more `` elements, modifying the DOM, and then creates SVG highlights, which requires measuring the `` elements. This interleaving of DOM reads and writes is inefficient as the reads force force reflows. A way we could reduce this would be to defer the SVG highlight creation after a call to `highlightRange`, eg. using `requestAnimationFrame`, for later rendering in a batch. This would reduce the number of DOM read/write alternations.
**2. Coalesce highlights that cover the same text**
A common usage pattern is for many users to annotate the same text in a page. When this happens we currently created `` elements for each annotation covering the same text nodes, along with corresponding duplication of ``s. It would be more efficient to create just one highlight and use classes or attributes to adjust the styling to reflect the number of annotations, if we want to indicate that. Reducing the number of DOM elements reduces browser memory usage and the amount of work it has to do in various situations. This would benefit both HTML and PDF highlighting.
An additional benefit of reducing the number of elements is that we can reduce noise for screen-reader users. Currently each `` element has `::before` and `::after` pseudo-elements which adds a notice about the presence of the annotation. Heavy nesting creates a lot of noise. This issue we could fix another way though, such as by overriding the `content` style rule for nested highlights.
**Test documents:**
Some PDFs with heavily annotated pages in the public group (feel free to add more):
- https://www.brookings.edu/wp-content/uploads/2020/08/FP_20200817_democracy_covid_belin_demaio.pdf
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.