Decorations take a long time to apply on large html files

[streamg]

Bug Report

When apply decorations inside an ePub's chapter that has a lot of content, it takes a significant time to do so.

What happened?

Our app has our own speech-to-text implementation. As the user is reading aloud, we add highlighting decorations word by word. In general, the decorations are applied in a matter of milliseconds, which is what we want. The issue is with books that have big chapters (e.g. 200k plus characters). In these cases, depending on the device, it takes hundreds of milliseconds or even full seconds to apply one decoration.

One change we did, that improved the experience, was making sure that the Locators describing the decorations have a cssSelector attached. Also we have a pull-request that caches the cssSelectors DOM ranges for an even faster calculation of the words DOM ranges within the same cssSelector. But this is not enough. The decorations applying process is still too slow for big html files.

Bellow I'm attaching two examples where we apply these decorations as the user is reading:

1. A book with regular size chapters
   https://github.com/readium/swift-toolkit/assets/25362002/c4265263-e3f4-4a5a-a8f2-5330ff74bae3

2. A book with a big chapter (over 200k characters)
   https://github.com/readium/swift-toolkit/assets/25362002/42b3ef01-1edc-4b6a-9aca-15396687e6ba

Expected behavior

The decorations to be applied faster.

How to reproduce?

I'm attaching a sample epub. The test should be performed on the part1.htm resource.
To reproduce this, one must add around 2-3 decorations per second.

Environment

• Readium version: 2.6.0

Development environment

macOS: 13.5.1
platform: arm64
carthage:
Xcode 14.3
Build version 14E222b

Testing device

• iOS version: 16.6.1 (not OS related)
• Model (e.g. iPhone 11 Pro Max): iPhone 12
• Is it an emulator? No

Additional context

• Are you willing to fix the problem and contribute a pull request? Yes, with proper guidance.

[mickael-menu]

Could you share the large EPUB you mentioned?

The Decoration API was not designed for fast paced animations. We might improve the performance with pre-caching but I'm not 100% sure this will ever be enough for this kind of feature. I think you might have better luck with a custom JS solution for your particular use case.

[streamg]

I forgot to attach the sample epub, sorry. Here it is:
9781625586988_wiidaq_preview.epub.zip