<script type = "module"> download performance

Question

I assume that a popular use case for <script type="module"> is to load the "main module" from which all project dependencies are resolved using the import statement tree. However, on the Internet it seems that this will create a bottleneck because the browser cannot know which scripts to load until it analyzes their dependents for import . Compare this to the situation where all project scripts reference individual <script> elements in the originally loaded HTML file. Scripts can be loaded in parallel, as well as after parsing HTML.

Will <script type="module"> create a boot bottleneck? Can several <script type="module"> elements on a page provide dependencies to each other, so the browser doesn’t need to load and parse JavaScript to figure out what to load next?

I assume this will be use for HTTP / 2 PUSH_PROMISE? The server will need to statically analyze JavaScript files and determine their dependencies in advance. But even if the browser might be prompted to load modules at an early stage, I wonder if the pushed modules will not execute until import is parsed. At least with <script> , I know that they would execute as soon as possible.

Answer 1

<script type="module"> can load modules as efficiently as the <script> + dynamic module loader.

Multiple <script type="module"> can provide dependencies to each other. Source ( via IRC ):

Me: If I have <script type="module" src="a.js"> where "a.js" will be an export module, and I also have <script type="module" src="b.js"> , and" b.js "will be import "./a.js"; , will there be the same module instance created by the previous <script type="module" src="a.js"> ?

annevk: if they are in the same document, yes

This is due to the fact that re-import is drawn from the "module map" for each window (see specification ):

If the module map contains an entry with a key URL, end this algorithm asynchronously with this entry value and abort these steps.

By creating several <script type="module"> elements, we can avoid the bottleneck of the dependency tree by making the browser aware of the scripts that need to be loaded as soon as possible.

"Module scripts" defer module evaluation until all its dependencies are received; whereas "classic scripts" are simply executed, so a theoretical module loader could theoretically be faster. But if this dynamic module loader also blocks dependency execution, its task will probably take as long as with import . In addition, the real threat to performance is probably related to the network; the estimate is probably so quick in comparison that it would be trivial.