Performance Issue On New Content Load

[mcmah309]

When going through the examples, I noticed scrolled-continuous is very slow:

https://intity.github.io/epub-js/examples/scrolled-continuous.html

Lets say a user is trying to quickly scroll through to find a page or preview a reading, currently scrolling is not seamless. It keeps catching at the bottom waiting for new content to load in. Ideally it should never catch given the maximum speed a user may spin there mouse wheel. Thus we should shoot for achieving no catching while moving 10,000 px/sec.

I also observed the same issue with:

https://intity.github.io/epub-js/examples/paginated-continuous.html

When going to the next page, which has never been loaded before, there is a noticeable lag before the content appears. If you go back one page then forward again, there is no lag. Since I assume the content had already been loaded into memory.

It might be worth while to always having a few pages pre-loaded to improve the user experience. All that is left is to add the content when a scroll action approaches the bottom or the next page is requested. There really shouldn't be any memory or performance concerns with approach. But even so, we could make this configurable, including the number of pages to pre-load.

Edit:
Same issue with:

• https://intity.github.io/epub-js/examples/scrolled.html
• https://intity.github.io/epub-js/examples/scrolled-doc.html

One thing I did notice for the paginated examples, if I scroll a few pages, exit the tab, then open the same link in a new tab, all the pages that I previously scrolled to load almost instantly when I try to go to them. But new pages have the aforementioned performance issue. Seems like there is some sort of caching going on?

[intity]

Hi, @mcmah309

Can you provide information about the device on which you encountered this issue?

[mcmah309]

It should be platform independent. I observed this issue on Linux chrome browser and IOS safari. The two platforms I tested it on.

[mcmah309]

I tried to debug this issue to see where epub.js may be caching resources in the browser between pages and I can't seem to find anything (Correct me if you have some idea). My guess would be it might actually be the browser itself is caching previously requested resources like sources. Thus when loading a previously visited pages it is faster.

A possible implementation to pre-loading is is to book.load() a few next and previous pages in the background if these have not already been loaded once before.

[intity]

@mcmah309

The views-container (see Rendering System Architecture) caching method is defined by the ContinuousViewManager class.

If you find a solution to improve the performance of continuous scrolling, write here.

Please note that for analyzing the performance of the library components, the local webpack-dev-server and mocha tools are used.

The main section for testing is localhost:8080/test/

[mcmah309]

Can you comment on the issue / behavior I am mentioning?

[intity]

There's nothing to comment on here.

You'll need to create a test (or wait for me to prepare one myself) in the test/ subsection to make the problem clearly identified.

[mcmah309]

But do you see the behavior I speak of or otherwise need clarification?

[intity]

There is a delay because the example is set up like this.

If you want to improve the rendering results, you should try editing the settings. The basic settings of the continuous scrolling rendering manager have been adjusted slightly (see the changelog).

[mcmah309]

There is a delay because the example is set up like this.

Set up like what specifically to cause this?

[intity]

@mcmah309

For example, if you enable the storage component (see Input types configuration), you can cache views-container documents in the browser database.

Compare the results you get.