Tutorial staggered loading 3000 divs

[platinops]

The Page Events section of the Justpy tutorial shows a way to gradually load 3000 div's instead of all at once, in order to improve user experience.

How I experience this however (in Chrome, on localhost), is it takes about 5 seconds to load all divs "unstaggered", but over 30 seconds staggered. The first few 100 divs do load faster when staggered, but afterwards loading any remaining divs becomes slower and slower.

Do you see the same behaviour, and if so, any way this can be improved?

[elimintz]

Yes, I see the same behavior. The issue is that there is a threshold number of elements that depends on memory etc. after which Vue gets much slower when it has to update.

The gradual loading is best used for a smaller number of elements for which the browser needs to do a lot of work, for example charts. Instead of loading say 100 charts at once, you load 10 at a time and the user experience is much better. If you add too many elements, the bottleneck becomes Vue and then gradual loading is not helpful.

If you need to add thousands of elements you don't plan to interact with, best to add them as inner_html of a Div instead of having each be an element on its own.

I hope this helps. Please let me know if it is not clear.

[platinops]

I was indeed thinking of using this approach for gradually adding e.g. 20 charts to a page.

I tried it now, but although the first chart appears sooner in the staggered approach, the last one appears later than when I would output/update them all at once. It's a pity Vue cannot update a single item on a web page without being slowed down by the other (unaltered) items. Or is there a way to make the charts "static" until they have all finished loading?

Just to be sure, when you update the page after each chart is updated, the server only sends a single chart to the client? In other words:

1. Does the server first send chart 1, then chart 2, then chart 3, etc., or;
2. Does it first send 1, then 1+2, then 1+2+3, etc.?

I hope this makes any sense. Suggestions for other approaches are definitely welcome.

[elimintz]

There is a cache for charts on the browser side and if the object describing the chart has not changed, the chart is not changed. Each time the page is updated, it sends all the charts on the page created so far. Each update there is one more chart on the page. Just the new chart is actually created in the browser as the others have not changed and remain the same.

You can modify the sleep time between updates to get the total time down for the the staggered update. Even if the total time takes more when staggering, the user experience is much better since the user can start looking at the other charts.

[platinops]

Thanks for the quick feedback.

I already removed the sleep time, or is there any benefit to it?

So there is no way to only send the "new" chart from server to client? I tried to only update the div containing the new chart (as shown here), but this does not seem to improve performance at first sight. I guess even then the whole page is sent from server to client?

[elimintz]

I guess I am not sure what you mean by "performance". The total time for page load is not improved, just the user experience. The user is able to start interacting with the first chart sooner instead of waiting for all of them to load.

The sleep is important because otherwise the browser has no chance to render the partial pages that it receives.

Sending just the new chart will not improve performance because the bottleneck is chart generation in the browser, not size of message. The other charts are not generated again.