javascript - <脚本类型 ="module"> 加载性能

Question

我想象一个流行的用例 <script type="module">将用于加载“主模块”，项目的所有依赖项都通过 import 树从中解析声明。然而，在网络上，这似乎会造成加载瓶颈，因为浏览器在解析其依赖项以获取 import 之前无法知道要下载哪些脚本。 .将此与项目的所有脚本都在单独的 <script> 中引用的情况进行对比。最初交付的 HTML 文件中的元素。在解析 HTML 的同时和之后，所有脚本都可以并行下载。

威尔<script type="module">造成加载瓶颈？可以多个<script type="module">页面上的元素相互提供依赖关系，因此浏览器不一定需要下载和解析 JavaScript 来确定下一步要下载什么？

我想这会是 HTTP/2 PUSH_PROMISE 的用例吗？服务器需要静态分析 JavaScript 文件并提前确定它们的依赖关系。但是即使可以告诉浏览器提前下载模块，我想知道推送的模块是否仍然不会执行直到import。被解析。至少用<script> ，我知道他们会在第一时间执行。

Answer 1

<script type="module">可以像 <script> 一样有效地加载模块+ 动态模块加载器。

多个<script type="module">可以相互提供依赖关系。来源 ( via IRC ):

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

annevk: if they're in the same document, yes

这是因为从每个窗口的“模块映射”中重复导入(请参阅 the spec):

If module map contains an entry with key url, asynchronously complete this algorithm with that entry's value, and abort these steps.

通过创建多个 <script type="module">元素，我们可以通过让浏览器在第一时间知道它需要下载的脚本来避免“依赖树瓶颈”。

“模块脚本”推迟模块的评估，直到它的所有依赖项都被获取；而“经典脚本”只是执行，所以动态模块加载器理论上可以更快。但是，如果该动态模块加载器也阻止对依赖项的执行，那么它的任务可能需要与 import 一样长的时间才能完成。 .此外，对性能的真正威胁可能是网络；相比之下，评估可能如此之快以至于微不足道。