4 ms·

I love this approach and have used it many times in JavaScript. I often end up adding an additional map in front with the resolved values to check first, becaus

I love this approach and have used it many times in JavaScript. I often end up adding an additional map in front with the resolved values to check first, because awaiting or then'ing a Promise always means you will wait until the next microtask for the value, instead of getting it immediately. With a framework like React, this means you'll have a flash of missing content even when it is already cached.

pflanze 4y ago
Replacing the promise with the result in the map (using a sum type as the map value type) might be more efficient than maintaining two maps?
skrebbel 4y ago
This surprises me. I had expected the microtask to be executed right after the current one, ie before any layouting etc - isnt that the whole point the "micro" aspect?
- chmod775 4y ago
  The event loop shouldn't continue the circle until the microtask queue is empty, from what I remember. Browsers probably used to squeeze layouting and such things in when the event loop completed an iteration or became idle. However nowadays it's entirely possible that have, or will have, browsers that do even work in parallel while the javascript event loop is still running, possibly even beginning to paint while javascript is still running synchronously (haven't seen that yet). I've seen instances where browsers seem to be like "nah, I'll render this part later" and only would render some parts of the page, but certain layers (scrolling containers) would not be filled on the first paint - despite everything being changed in one synchronous operation!* And I've seen them do that at least 5 years ago. It seems to me the situation is complicated. * There was a loading overlay and a list being filled with data (possibly thousands of elements). The loading overlay would be removed after the list was filled, revealing it. What often happened was that the overlay would disappear, but the list still looking empty for a frame or two.
- wingspan 4y ago
  I was able to reproduce this in a simple example [1]. If you refresh it a few times you will be able to see it flash (at least I did in Chrome on Mac). It is probably more noticeable if you set it up as an SPA with a page transition, but I wanted to keep the example simple. [1] https://codesandbox.io/s/recursing-glitter-h4c83u?file=/src/App.tsx https://codesandbox.io/s/recursing-glitter-h4c83u?file=/src/...
  - skrebbel 4y ago
    I am deeply disturbed and confused. Do you understand why this happens?

pflanze 4y ago

Replacing the promise with the result in the map (using a sum type as the map value type) might be more efficient than maintaining two maps?

skrebbel 4y ago

This surprises me. I had expected the microtask to be executed right after the current one, ie before any layouting etc - isnt that the whole point the "micro" aspect?

chmod775 4y ago
The event loop shouldn't continue the circle until the microtask queue is empty, from what I remember. Browsers probably used to squeeze layouting and such things in when the event loop completed an iteration or became idle. However nowadays it's entirely possible that have, or will have, browsers that do even work in parallel while the javascript event loop is still running, possibly even beginning to paint while javascript is still running synchronously (haven't seen that yet). I've seen instances where browsers seem to be like "nah, I'll render this part later" and only would render some parts of the page, but certain layers (scrolling containers) would not be filled on the first paint - despite everything being changed in one synchronous operation!* And I've seen them do that at least 5 years ago. It seems to me the situation is complicated. * There was a loading overlay and a list being filled with data (possibly thousands of elements). The loading overlay would be removed after the list was filled, revealing it. What often happened was that the overlay would disappear, but the list still looking empty for a frame or two.
wingspan 4y ago
I was able to reproduce this in a simple example [1]. If you refresh it a few times you will be able to see it flash (at least I did in Chrome on Mac). It is probably more noticeable if you set it up as an SPA with a page transition, but I wanted to keep the example simple. [1] https://codesandbox.io/s/recursing-glitter-h4c83u?file=/src/App.tsx https://codesandbox.io/s/recursing-glitter-h4c83u?file=/src/...
- skrebbel 4y ago
  I am deeply disturbed and confused. Do you understand why this happens?