3 ms·

Another misconception here is the lack of understanding of engines' speculative loading capabilities. It's very easy for an engine to notice `await import('./fo

Another misconception here is the lack of understanding of engines' speculative loading capabilities. It's very easy for an engine to notice `await import('./foo.js')` or even `await fetch('./foo.json')` during the tokenization phase, and realize it might be a good idea to go fetch that file (and in the former case, all of its dependencies). This is already done for HTML's tokenization phase (with img, iframe, etc.), and would of course make sense for JS as well.

pornel 10y ago
but the use-case for these is not a static import (that is possible already), but a dynamic one, such as: await import(`${config.providerType}.js`); and this can't be resolved at tokenization phase (and brute-forcing it with speculative/symbolic execution would be too much of a hack IMHO).
- domenicd 10y ago
  Yes, indeed. If your app actually depends on dynamically-loaded information before it can continue, then of course your app needs to block further evaluation. Top-level await simply allows you to express that without placing the rest of your app inside async functions.
scribu 10y ago
But if the engine speculatively loads modules, doesn't that counteract the developer's intention to increase performance by loading a module only when needed? This is not a problem in HTML loading, because HTML doesn't have `if` statements.
- domenicd 10y ago
  It is a problem in HTML, actually, e.g. `<div hidden><img src="foo.png"></div>`. Per spec that fetch should not happen until the div becomes un-hidden. (Which is only determinable at runtime, since you can override the UA stylesheet for div[hidden].) But browsers make the intelligent tradeoff that the image is likely to be used, by doing a low-priority fetch for foo.png.
Touche 10y ago
I understand why `await import('./foo.js')` works here, as import() is not a normal function. But in the case of `await fetch('./foo.json')`, fetch is a global. What happens if my code overwrites window.fetch and redirects ./foo.json to ./bar.json? Won't the engine try to fetch foo.json (which might not exist) when it should wait for the code to execute?
- domenicd 10y ago
  Similarly to the `<div hidden>` example above, it's a tradeoff. A speculative fetch is just that: speculative. It might not always be correct, but on balance, it's likely to improve the user's experience. I think it's pretty unlikely we'd see this kind of speculative preloading for fetch though, at least initially. More likely, it's done for imports, and then some number of months or years down the line some engineer or PM has the bright idea to measure how much the average web page could be improved by doing speculative preloading for fetch, and then if the measurements are favorable and the technical tradeoffs are manageable, it happens.
  - Touche 10y ago
    Thanks, I wasn't aware that it would accept misses like this; I assumed that 404s would be avoided. Glad to learn something new, thanks!

pornel 10y ago

but the use-case for these is not a static import (that is possible already), but a dynamic one, such as: await import(`${config.providerType}.js`); and this can't be resolved at tokenization phase (and brute-forcing it with speculative/symbolic execution would be too much of a hack IMHO).

domenicd 10y ago
Yes, indeed. If your app actually depends on dynamically-loaded information before it can continue, then of course your app needs to block further evaluation. Top-level await simply allows you to express that without placing the rest of your app inside async functions.

scribu 10y ago

But if the engine speculatively loads modules, doesn't that counteract the developer's intention to increase performance by loading a module only when needed? This is not a problem in HTML loading, because HTML doesn't have `if` statements.

domenicd 10y ago
It is a problem in HTML, actually, e.g. `<div hidden><img src="foo.png"></div>`. Per spec that fetch should not happen until the div becomes un-hidden. (Which is only determinable at runtime, since you can override the UA stylesheet for div[hidden].) But browsers make the intelligent tradeoff that the image is likely to be used, by doing a low-priority fetch for foo.png.

Touche 10y ago

I understand why `await import('./foo.js')` works here, as import() is not a normal function. But in the case of `await fetch('./foo.json')`, fetch is a global. What happens if my code overwrites window.fetch and redirects ./foo.json to ./bar.json? Won't the engine try to fetch foo.json (which might not exist) when it should wait for the code to execute?

domenicd 10y ago
Similarly to the `<div hidden>` example above, it's a tradeoff. A speculative fetch is just that: speculative. It might not always be correct, but on balance, it's likely to improve the user's experience. I think it's pretty unlikely we'd see this kind of speculative preloading for fetch though, at least initially. More likely, it's done for imports, and then some number of months or years down the line some engineer or PM has the bright idea to measure how much the average web page could be improved by doing speculative preloading for fetch, and then if the measurements are favorable and the technical tradeoffs are manageable, it happens.
- Touche 10y ago
  Thanks, I wasn't aware that it would accept misses like this; I assumed that 404s would be avoided. Glad to learn something new, thanks!