worker-dom

worker-dom正在进行（如在非常alpha中）的DOM API实现，旨在在Web Worker中运行。

目的：将与DOM突变相关的中间工作的复杂性移至后台线程，仅向前台线程发送必要的操作。

用例：

1. 来自第三方的嵌入式内容与第一方代码并存。
2. 减少不需要对用户操作进行同步更新的内容的昂贵呈现。
3. 通过在文档中的其他位置进行异步更新来保留高优先级更新的主线程可用性。
4. 
   

为了在 Web Workers 内部实现 DOM 的完整表示，WorkerDOM 提供了一种用 TypeScript 编写的高效传输机制。谷歌 AMP 项目技术负责人 Malte Ubl 在 WorkerDOM 的公告中是这样说的：

WorkerDOM 对服务器渲染的 DOM 进行“注水（ hydrate）”，然后在应用程序对页面进行更改时进行代理“修改（mutation）”，例如对用户操作做出响应或运行动画。 

WorkerDOM 可以通过 npm 或 yarn 安装：

npm install @ampproject/worker-dom
yarn add @ampproject/worker-dom

用法

WorkerDOM有两种形式，全局变体和模块变体。可以直接或通过捆绑包在文档中包含WorkerDOM主线程代码。以下是您可以直接执行的操作：

<script src="path/to/workerdom/dist/main.mjs" type="module"></script>
<script src="path/to/workerdom/dist/main.js" nomodule defer></script>

WorkerDOM允许我们升级文档的特定部分以由工作人员驱动。例如，想象一下div页面中的节点如下：

<div src="hello-world.js" id="upgrade-me"></div>

要使用模块版本的代码升级此节点，我们可以直接导入upgradeElement并使用它，如下所示：

<script type="module">
  import {upgradeElement} from './dist/main.mjs';
  upgradeElement(document.getElementById('upgrade-me'), './dist/worker/worker.mjs');
</script>

nomodule格式公开全局MainThread，并可以div通过以下方式升级：

<script nomodule async=false defer>
  document.addEventListener('DOMContentLoaded', function() {
    MainThread.upgradeElement(document.getElementById('upgrade-me'), './dist/worker/worker.js');
  }, false);
</script>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/2154