fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

worker-dom
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/ampproject/worker-dom
网站描述:实现运行在一个Web Worker中的 DOM API 和框架

worker-dom正在进行(如在非常alpha中)的DOM api实现,旨在在Web Worker中运行。

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


用例:

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

为了在 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://fly63.com/nav/2154

more>>
相关栏目
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网GitHub
jquery
一个快速、简洁的JavaScript代码库
官网GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网GitHub
nw.js
轻量级桌面应用开发的捷径
官网GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网GitHub
petite-vue
vue的可替代发行版,针对渐进式增强进行了优化
点击进入GitHub
ocLazyLoad
AngularJS 的延迟加载(惰性加载)模块和组件
官网GitHub
weui.js
WeUI 的轻量级 js 封装
点击进入GitHub
Qatrix
一款超轻量级JS框架
点击进入GitHub
Mootools
大部分浏览器原生对象做了扩展
官网GitHub
enyo.js
强调模块化和封装的Js应用程序框架
点击进入GitHub
workbox
谷歌推进的 web 应用新模型,将网站升级成 PWA
官网GitHub
Senna.js
快速单页应用程序引擎
官网GitHub

手机预览