Resize events can be really harmful

[Elindorath]

Hi there!

During the integration of your React component in a Next.js application, I noticed that the performance could be very degraded when resizing the window with the mouse.

For some context, I ran some tests on two pages in particular:

• A product page, which displays a few images (around 20) in a very large format, some in full width.
• The home page which displays a lot of images in a relatively small format (about 400x200).

When trying to resize the browser window on these two pages, I observe different behavior when inspecting the network:

• On the product page, resizing causes a lot of new requests (about 3 per image), but most of them are cancelled. No performance issues encountered.
• On the homepage, on the other hand, resizing causes at least as many requests per image as the product page, if not more (difficult to say precisely), except that the browser becomes so slow that no requests are cancelled.

Based on these observations, I would tend to think we could benefit of the use of a timer to debounce unnecessary requests.

I tried to dig a bit into the source code to see how this could be done, and I thought I understood that something should be done when using the resizeObserver API in src/_/placeholder.ts but I'm having trouble seeing how to do it.

[mbgspcii]

Hi @Elindorath and thank you for this feedback.

The numerous requests observed here should not be due to the resizeObserver. The latter is only responsible for the "preview" image. It generates new requests only when the ratio or the positioning of the image has been modified during the resize, as it is the case in this example: TwicPics x Next - Art directions

When the ratio or the positioning mode of the image is not modified during the resize, the preview should never be reloaded.

On the other hand, the other requests (those responsible for the final image) are triggered when the difference (in absolute value) between the width of the display area of the image and its intrinsic width is greater than the step (10 px by default).

As a first step, I would propose to increase the value of the step. To increase it to 100 for example.

Globally :

or for a particular component

Here is a link to a Next example with many images and a step set to 100.

Note that I observe performance degradations if I change the browser size with the mouse for too long as the network console fills up. Closing the console or clearing the log "fixes" the problem.

Hoping that the increase in step value will help you.

Keep us informed.

Best regards.

[mbgspcii]

Hi @Elindorath.

For your information, changes concerning the resize have been made in version 0.11.0.

I take this release as an opportunity to ask you if you have noticed an improvement by increasing the step?

I close the issue but you can reopen it if you still have performance problems.

Keep us informed.

Best regards.