worker-dom 介绍
worker-dom正在进行（如在非常alpha中）的DOM API实现，旨在在Web Worker中运行。
目的：将与DOM突变相关的中间工作的复杂性移至后台线程，仅向前台线程发送必要的操作。
用例：
来自第三方的嵌入式内容与第一方代码并存。
减少不需要对用户操作进行同步更新的内容的昂贵呈现。
通过在文档中的其他位置进行异步更新来保留高优先级更新的主线程可用性。
为了在 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>
GitHub:https://github.com/ampproject/worker-dom
网站描述:实现运行在一个Web Worker中的 DOM API 和框架
worker-dom
小编说
以上是编程之家为你收集整理的worker-dom全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。