WorkerDOM:实现运行在一个Web Worker中的 DOM API 和框架

网友投稿 728 2022-10-30

WorkerDOM:实现运行在一个Web Worker中的 DOM API 和框架

WorkerDOM:实现运行在一个Web Worker中的 DOM API 和框架

WorkerDOM

An in-progress (as in very-alpha) implementation of the DOM API intended to run within a Web Worker.

Purpose: Move complexity of intermediate work related to DOM mutations to a background thread, sending only the necessary manipulations to a foreground thread.

Use Cases:

Embedded content from a third party living side by side with first party code.Mitigation of expensive rendering for content not requiring synchronous updates to user actions.Retaining main thread availablity for high priority updates by async updating elsewhere in a document.

For more information, visit our blog post announcing WorkerDOM or checkout the slides from the announcement at jsConf US.

Installation

npm install @ampproject/worker-dom

Usage

WorkerDOM comes in two flavours, a global variant and a module variant. It is possible to include the WorkerDOM main thread code within your document directly or via a bundler. Here's how you might do so directly:

WorkerDOM allows us to upgrade a specific section of the document to be driven by a worker. For example, imagine a div node in the page like so:

To upgrade this node using the module version of the code, we can directly import upgradeElement and use it like this:

The nomodule format exposes the global MainThread, and could upgrade the div in the following way:

"Safe" mode (in progress, alpha quality)

WorkerDOM has a special output variant that includes safety features e.g. HTML sanitization and a web worker sandbox. This variant is distributed under the ".safe" suffix for main and worker thread binaries:

index.safe.mjsindex.safe.jsworker.safe.mjsworker.safe.js

Running Demos Locally

After cloning the repository, you can try out the debug demos with the following.

npm run demo

This script will build the current version of WorkerDOM and start up a local webserver.

Which JavaScript APIs can I use?

Currently, most DOM elements and their properties are supported. DOM query APIs like querySelector have partial support. Browser APIs like History are not implemented yet. Please see the API support matrix here.

Local Development

Local development of WorkerDOM assumes the following:

Familiarity with npm or yarnLatest LTS release of Node (10 at time of writing) available.Comfort with TypeScript, the codebase and tests are entirely written in TypeScript.

Security disclosures

The AMP Project accepts responsible security disclosures through the Google Application Security program.

Code of conduct

The AMP Project strives for a positive and growing project community that provides a safe environment for everyone. All members, committers and volunteers in the community are required to act according to the code of conduct.

License

worker-dom is licensed under the Apache License, Version 2.0.

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:探索自助报表BI的现状和未来(文末送福利)
下一篇:mybatis学习(38):动态sql-foreach
相关文章

 发表评论

暂时没有评论,来抢沙发吧~