Stuttering when scrolling down large size images or too many images

[mienaiyami]

If any dev reading this knows the solution, please reply.

• Less prominent with app.disableHardwareAcceleration();
• Appears to depend on hardware capability.
• Does not stutter once you have scrolled to the end. So, its related to how chromium render images?
• Images are preloaded by setting src on const img = document.createElement("img"); inside useLayoutEffect(()=>{ },[])

[mienaiyami]

Fixed by using img.decode() on load and additionally removing pageNumber react state from app.tsx and adding it to window.currentPageNumber commit.

[mienaiyami]

img.decode() not working on some images leading to same stutter problem. Error messages in console DOMException: The source image cannot be decoded. Usually occur with approx. 3000+ resolution images.

[mienaiyami]

On researching I found out it was due to caching limit. Chromium will throw error when image decode caching limit reaches. https://bugs.chromium.org/p/chromium/issues/detail?id=1055828#c7

[mienaiyami]

Delaying each image decode by 1 second didnt work. It did decode all images but it deleted previous decode cache on decoding new, so stuttering still remains.

[omodia]

img.decode() not working on some images leading to same stutter problem. Error messages in console `DOMException: The source image cannot be decoded. Usually occur with approx. 3000+ resolution images.

On further testing,

Image width = 800,

• The DOMException: The source image cannot be decoded is thrown too.
• This happens if there are > 59/60 images in a chapter.
• But the scrolling is smooth, the same scrolling as when this error is not thrown.
• Stuttering does not happen 98% of time.
• If there are 100 images in a chapter, then stutter happens for single image/time only. Sometimes stutter does not happen at all.
• If images width = 900, then DOMException is thrown when there are 49/50 images in a chapter.

When image width increases, the DOMException is thrown earlier.

[mienaiyami]

@omodia It is issue of total cache size limit in chromium, not the resolution of images. Images are loaded in cache and if they are all decode in similar time frame then if cache is full, other images are discarded. If you manually decode image again, it will remove some of previous cache and write new one. But still it's no use since cache size if not changeable or at least that what I have found so far.

[omodia]

I do not understand these jargon, but if it helps you,

1. Stack Overflow
2. Medium
3. Fantinel, This might solve it. Lazy Loading and Async Decoding
4. Twitter
5. Html Spec

[omodia]

Do any of the above help / look promising?

[mienaiyami]

I have tried these already. Every one of them have flaws.

Its like this, let you have space of 50mb, decoding will save images in this space , after you have used all space it will through decoding error and on manually decoding image it will delete previously save stuff.

In short, you can only have images worth 50mb(let) ready to show at a time.

[omodia]

Chrome developers have to solve the cache limit issue then. Got it. Thank you.

[mienaiyami]

Fixed by replacing img element with canvas.

Drawbacks:

• High RAM usage according to resolution of images. RAM usage can be very high if res is high. Downscaling canvas and image might help a bit.
• Image lose clarity/sharpness when reader size / canvas width is low and text became unreadable.

[omodia]

Image lose clarity/sharpness when reader size / canvas width is low and text became unreadable.

Do you mean image width, if it is, then how much width?

[omodia]

High RAM usage according to resolution of images. RAM usage can be very high if res is high. Downscaling canvas and image might help a bit.

How much high can the RAM usage be?

[mienaiyami]

Do you mean image width, if it is, then how much width? How much high can the RAM usage be?

Totally depends on image resolution. There's no fixed value, even if folder opened has same size, RAM usage might differ a lot. Im trying my best to find a way to reduce ram usage.

[mienaiyami]

How much high can the RAM usage be?

Since image displayed isnt compressed, it will take whole size it is meant to. for example. let a image from the stutter example folder you sent few months ago, avg image res in that was 2400 x 3800 , and one pixel take 4 bytes of size as in Red Green Blue Alpha so one image will take around 34mb RAM and there are 35 images so total ram will be around 1200mb.

That is RAM usage for canvas elements alone, there will be something around 70mb from app as well.

I have made some improvement in normal image based reader as well , so you wont experience much stuttering in that unless you scroll too fast using scrollbar or space key

[omodia]

so one image will take around 34mb RAM and there are 35 images so total ram will be around 1200mb.

If it takes this much RAM, then wouldn't it be better to stick to the present system? Since chrome developers might increase the cache size, hence solving the issue.

[mienaiyami]

You can say that, but when you think about it "2400 x 3800" is too big of a resolution. Most screens are just 1920px wide and even on those people wont have reader size to max. So I can do some downscaling which wont affect image quality and reduce RAM usage a lot.

For example, if i downscale image by 2 , RAM usage will be 4 times less

[mienaiyami]

Since chrome developers might increase the cache size, hence solving the issue.

It has over years and i dont see it happening.

[omodia]

Will you release a v2.6.1 (UI enhancements) before updating to canvas based image system?

[mienaiyami]

Canvas is not forced; it is there as optional feature if you are experiencing too much stuttering because of image compressing and is disabled by default.

[omodia]

Canvas is not forced; it is there as optional feature

• If it is disabled, then will the RAM usage be the same as now.
• Or will the app take some extra resources/space for this line of code.
• For example, Currently 100 MB of RAM is used by the app.
• If app is updated and this feature is disabled, will it use extra RAM i.e. > 100 MB or will the RAM usage remain the same?

[mienaiyami]

If it is disabled, then will the RAM usage be the same as now.

Yes

[ghost]

@mienaiyami does yomikiru has lazy loading?

[mienaiyami]

@toprak It has been in my todo list for few months, but wasnt able to give it much time because of other issues. Maybe I will be doing this next.

[ghost]

@mienaiyami that would be awesome!