Dol*_*lly 6 javascript web-worker es6-modules
在 web.dev 上有一篇非常有趣的文章,关于 module worker 的https://web.dev/module-workers/我们有能力将 worker 作为预加载模块加载,这意味着它们可以被预加载,甚至可以预解析和预取他们的依赖项(https://web.dev/module-workers/#preload-workers-with-modulepreload)。
如果我是对的,不仅 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">
Run Code Online (Sandbox Code Playgroud)
这篇文章里有一句话,让我很困扰:
主线程和模块工作线程也可以使用预加载的模块。这对于在两种上下文中都导入的模块很有用,或者在无法提前知道模块将在主线程或工作线程中使用的情况下很有用。
这是否意味着模块加载也会缓存解析后的代码,这意味着在主线程和工作线程中使用的模块将不会被再次解析,如果我们在顶部使用 import 语句包含它?
然而,这不会发生,每当我们在任何领域(主线程、工作线程)上导入模块时,它们都会独立执行导入,然后将来它们会在自己的领域中引用解析缓存的实例。
我真的很困惑,作者到底想解释什么。以及我们如何实施它。
相关文章:https : //developers.google.com/web/updates/2017/12/modulepreload#does_preloading_modules_help_performance
Kaiido谢谢您的详细回复。这非常有帮助。
\n我还对这个有问题的引用进行了很多搜索,然后我在web.dev上发起了一个问题,看他们是否可以更新内容。您可以跟踪问题
\nJS 引擎最繁重的工作之一是解析/编译(什么是解析/编译)我们的代码,它在网页交互的时间上发挥着重要作用,而且我们还有很多方法可以改进 TTI,例如仅发送编写用户需要的代码(通过 webpack进行代码分割、块等)、压缩、tree shake、http 缓存、模块工作人员等......并且不要忘记预加载
\n预紧力的实际定义:
\n\n\n使用预加载的基本方法是尽早加载后来发现的资源。虽然大多数基于标记的资源很早就被 browser\xe2\x80\x99s 预加载器发现,但并非所有资源都是基于标记的。有些资源隐藏在 CSS 和 JavaScript 中,浏览器无法知道它将需要它们,直到已经很晚了。因此,在许多情况下,这些资源最终会延迟首次渲染、文本渲染或页面关键部分的加载。
\n
简而言之:
\n\n\n下载资源(准备+编译),因为您知道您\xe2\x80\x99d需要它,但您\xe2\x80\x99还不想执行它。
\n
早些时候,如果我们在希望运行的位置注入脚本,则浏览器必须先下载脚本才能执行(注意:浏览器在执行代码之前必须做很多事情),这可能需要一段时间尽管。但 Preload 解决了这个问题。
\n我相信作者试图使用链接 rel="modulepreload" 标签来解释相同的 ie 预加载甚至预解析模块(不执行+编译的字节码被缓存)以供以后评估(可以跳过重新编译)。
\n最后,我相信我的疑问得到了解决。\n非常感谢!
\n几个有用的链接:
\n| 归档时间: |
|
| 查看次数: |
908 次 |
| 最近记录: |