worker-dom 介绍
worker-dom 正在进行 (如在非常alpha中)的DOM API实现,旨在在Web Worker中运行。
目的 :将与DOM突变相关的中间工作的复杂性移至 后台 线程,仅向 前台 线程发送必要的操作。
用例 :
来自第三方的嵌入式 内容 与第一方 代码 并存。
减少不需要对 用户 操作进行同步更新的 内容 的昂贵呈现。
通过在文档中的其他位置进行异步更新来保留高优先级更新的主线程可用性。
为了在 Web Workers 内部实现 DOM 的完整表示,WorkerDOM 提供了一种用 TypeScript 编写的高效传输机制。谷歌 AMP 项目技术负责人 Malte Ubl 在 WorkerDOM 的公告中是这样说的:
WorkerDOM 对服务器渲染的 DOM 进行“注水( hy drat e)”,然后在应用程序对 页面 进行更改时进行代理“ 修改 (mutation)”,例如对 用户 操作做出响应或运行动画。?
?
WorkerDOM 可以通过 npm 或 yarn 安装:
npm install @ampproject/worker-dom
yarn add @ampproject/worker-dom
用法
WorkerDOM有两种形式,全局变体和模块变体。可以直接或通过捆绑包在文档中包含WorkerDOM主线程 代码 。以下是您可以直接执行的操作:
<script src="path/to/workerdom/ dis t/main.mjs" type="module"></script>
<script src="path/to/workerdom/ dis t/main.js" nomodule defer></script>
WorkerDOM允许我们 升级 文档的特定部分以由工作人员驱动。例如,想象一下div 页面 中的节点如下:
<div src="hello-world.js" id="upgrade-me"></div>
要使用模块版本的 代码 升级 此节点,我们可以直接导入upgradeElement并使用它,如下所示:
<script type="module">
import {upgradeElement} from './ dis t/main.mjs';
upgradeElement(document.getElementById('upgrade-me'),'./ dis t/worker/worker.mjs');
</script>
nomodule格式公开全局MainThread,并可以div通过以下方式 升级 :
<script nomodule async=false defer>
document.addEventListener('DOMContentLoaded',function() {
MainThread.upgradeElement(document.getElementById('upgrade-me'),'./ dis t/worker/worker.js');
},false);
</script>
GitHub: https://github.com/ampproject/worker-dom
网站描述: 实现运行在 一个 Web Worker中的 DOM API 和框架
worker-dom官方网站
官方网站:
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。