CODEWITHSUNDEEP
typescriptqwik
Srikanth Sharma
Srikanth Sharma

Reputation: 2037

Any observed latency or delay in User Interaction for Qwik framework due to lazy loading of JS bundles?

The Qwik framework documentation mentions that there will be only one listener and all other listeners are serialized and attached to the DOM e.g: on:click etc. An elaborate caching algorithm is in place using service worker. In my understanding, for the users loading our application first time, if the onClick bundle is not found in the cache, it will be fetched from the network after the click event is triggered. If we are not using CDNs or on a slow network, there will be a network latency of even 400+ms which could be hampering the user experience. Any solutions for this scenario?

Upvotes: 4

Views: 707

Answers (2)

Libert KHE
Libert KHE

Reputation: 540

Actually, the user interaction can still be slow because of slow internet connection due to client connectivity such as 3g on phone.

For Qwik component, it would be nice to display a spinner at the place where the component is supposed to render

Upvotes: 0

Misko Hevery
Misko Hevery

Reputation: 47946

  1. All bundles are generated ahead of time and should be loaded into CDN or served as static content. This should make the serving pretty fast.
  2. The Service worker knows which on:click are present on the page and instantly starts to download them as soon as you navigate to the page.

The above two actions should ensure that the JS is ready when the user is ready to interact with the page. It should be very difficult for the user to get into a state where the JS is not present in the cache.

NOTE: If the user interacts before the service worker downloads, the JS URL will be prioritized and loaded next. The SW will ensure that there will be no request duplication (user request + SW request for the same URL)

To further improve performance, listeners who are often used should be bundled into a single chunk, minimizing the number of downloads.

To contrast this with the traditional approach:

  1. Qwik only downloads the code needed for interaction. This is always significantly smaller than the code needed for the whole application. (Replayable systems must download all of the code, execute the code, and reconcile the DOM with templates to attach the listeners. None of this is needed in Qwik; therefore, Qwik has to download way less code and executes none of it on startup.)
  2. No code is executed eagerly until the user interacts. Because resumability is inexpensive (almost instant), the added cost of resumability does not have a noticeable performance on interaction.

Upvotes: 6

Related Questions