WorkerDOM为JavaScript编程添加DOM并发

最新推荐文章于 2024-11-28 01:50:03 发布

原创最新推荐文章于 2024-11-28 01:50:03 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JSConf大会引入WorkerDOM，使WebWorkers能访问DOM，旨在利用多核处理器提升Web性能，改善用户体验。WorkerDOM通过高效传输机制实现在WebWorkers内部表示DOM，支持服务器渲染DOM的“注水”和“修改”。项目初期将兼容React、Preact和Svelte等框架，目前处于Alpha阶段，开源并欢迎贡献。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在今年的JSConf大会上，最大的新闻是引入WorkerDOM，这是一个JavaScript库，使Web Workers可以使用DOM，从而使开发人员可以利用多核处理器体系结构来提高Web性能。

Web Workers已经存在多年，但是，不能访问DOM限制了它们的应用。WorkerDOM项目希望帮助恢复人们对Web多线程编程的兴趣，为用户创造更好的体验。

利用替代方法来提升用户体验的需求是一个日益流行的话题。在今年的FullStack大会上，软件工程师James Milner介绍了利用Web Workers改进用户体验的技术，即将处理工作交给Web Workers以提升应用程序主线程的性能。

WorkerDOM的另一个目标是使Web性能堪比本地平台，其方式是通过尽可能地释放性能来提供更好的体验，特别是在移动设备上，单个处理器的速度没有像处理器核数提高得那么快。

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

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

WorkerDOM可以通过npm或yarn安装：

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

或者，对于提供本地模块支持的浏览器（除IE11和Samsung Internet之外一切现代化的东西），它也可以作为一个ES模块包含进来：

\u0026lt;script src=\u0026quot;path/to/workerdom/dist/index.mjs\u0026quot; type=\u0026quot;module\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\u0026lt;script src=\u0026quot;path/to/workerdom/dist/index.js\u0026quot; nomodule defer\u0026gt;\u0026lt;/script\u0026gt;

WorkerDOM README中提供了详细的使用说明。JSConf演讲“WorkerDOM：JavaScript并发和DOM”的完整幻灯片也已提供。

WorkerDOM目前尚处于Alpha状态，请准备好进行实验和贡献。WorkerDOM的目标还包括提供与JavaScript框架的兼容性，最初会支持React、Preact和Svelte。该项目重视与框架及工具作者的合作，力图为开发人员和用户提供最佳的体验。

WorkerDOM遵循Apache 2开源许可协议。欢迎通过WorkerDOM GitHub项目提交贡献，并请遵循WorkerDOM项目的贡献指南和代码规范。

查看英文原文：WorkerDOM Adds DOM Concurrency for JavaScript Programming