Javascript 当脚本加载为";预载/&引用;ModuleReploAD";?

Javascript 当脚本加载为";预载/&引用;ModuleReploAD";?,javascript,web-worker,es6-modules,Javascript,Web Worker,Es6 Modules,web.dev上有一篇关于模块worker的非常有趣的文章,我们可以将worker作为预加载的模块加载,这意味着可以预加载、甚至预解析和预取它们的依赖项() 如果我是正确的,不仅Web Workers可以作为预加载模块加载,这也适用于任何js脚本、字体、css等 <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/w

web.dev上有一篇关于模块worker的非常有趣的文章,我们可以将worker作为预加载的模块加载,这意味着可以预加载、甚至预解析和预取它们的依赖项()

如果我是正确的,不仅Web Workers可以作为预加载模块加载,这也适用于任何js脚本、字体、css等

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

这篇文章中有一句话,让我很困扰:

主线程和模块工作人员也可以使用预加载的模块。这对于在两种上下文中导入的模块都很有用,或者在无法预先知道模块是在主线程中使用还是在辅助线程中使用的情况下也很有用

这是否意味着模块加载也会缓存已解析的代码,这意味着如果我们在上面使用import语句将其包含进来,那么在主线程和辅助线程中使用的模块将不会再次被解析

然而,这不会发生,每当我们在任何领域(主线程、工作线程)上导入模块时,它们都会独立地执行其导入,然后以后它们会在自己的领域中引用已解析的缓存实例

我真的很困惑,作者到底想解释什么。我们如何实施它


相关文章:

我不确定这篇文章是从哪里得到这个想法的,但通过阅读说明书,我看不到任何证据

主线程和模块工作人员也可以使用预加载的模块


如果我们检查规格,算法会在第5步执行

  • 设置对象为
    链接
    元素的节点文档
  • 然后,在步骤11将该设置对象传递给算法,该算法本身将使用该设置对象调用并最终调用获取单个模块脚本

    这是将找到的位置,此模块映射将在中使用,以避免多次请求同一模块(缓存)

  • 让moduleMap成为模块映射设置对象的

  • 如果moduleMap[url]是
    “获取”
    ,请并行等待,直到该条目 值更改,然后将网络任务源上的任务排队到 继续运行以下步骤

  • 如果moduleMap[url]存在,则使用异步方式完成此算法 moduleMap[url],并返回

  • 可能应该注意的是,虽然这个算法,但它还没有执行它


    因此,从这里我们可以看到,
    modulepreload
    链接不仅会获取链接的资源,还会获取所有子资源,甚至会为这些资源中的每一个准备模块脚本,这与本文所声称的不同之处有很大的对应关系

    然而,这还不足以就有问题的报价得出任何结论

    我们必须检查一下规范,这将调用传递相同的文档对象设置的算法,我们的
    moduleRepload
    链接正在使用该设置,这次称为“外部设置”

    在该算法的步骤8,它要求

  • 使用领域执行上下文和外部设置,并让内部设置成为结果
  • 此算法将仅使用文档的外部设置来设置
    继承的原点
    内部值和新设置对象的
    顶级原点
    属性

    此新设置对象的模块映射为,它“最初为空”

    工人的环境设置对象不会从外部设置继承其模块映射。 因此,当工作人员自己调用这些和算法作为其中的一部分时,它将检查的一个模块映射是它自己的内部设置的模块映射,在那里,它将找不到我们的
    modulepreload
    链接创建的模块脚本。


    因此,通过阅读规范,我认为
    modulepreload
    链接对模块工作人员的唯一帮助是HTTP缓存已经下载了图形中的所有文件。如果您只打算在Worker中使用这些模块,那么让Worker在文档端准备模块脚本实际上会适得其反,一个简单的
    预取
    链接可能会更好,只是您必须为每个子资源创建一个这样的链接。

    感谢您的详细回复。这很有帮助

    我还搜索了很多关于这个有问题的引用,然后我提出了一个问题,他们是否可以更新内容。你可以追踪

    JS引擎最繁重的工作之一是解析/编译()我们的代码,它在网页交互中扮演着重要的角色,我们还有很多方法可以改进TTI,比如只发送用户需要的代码(通过网页包、块等)、缩小、树抖动等。。。。也不要忘记预载

    预载的实际定义:

    使用预加载的基本方法是尽早加载晚发现的资源。虽然大多数基于标记的资源很早就被浏览器的预加载程序发现,但并非所有资源都是基于标记的。一些资源隐藏在CSS和JavaScript中,浏览器在相当晚的时候才知道需要它们。因此,在许多情况下,这些资源最终会延迟第一次呈现、文本呈现或页面关键部分的加载

    简言之:

    下载一个资源(preparse+compile),因为你知道你需要它,但你还不想执行它

    之前,如果我们在希望脚本运行的位置注入脚本,那么浏览器必须下载脚本才能执行(注意:浏览器在执行代码之前必须做很多事情),这可能需要一段时间。但是预加载可以解决这个问题

    我相信作者正试图解释相同的,即预加载甚至预解析的模块(不是执行+编译byt)