jsdom 与 worker-dom 学习以及改造成脱离 Node 的库

jsdom 与 worker-dom 学习记录

目前想在一个纯 JS 沙箱环境中使用 DOM 相关的操作，发现有 

worker-dom 是在 web-worker 内实现的 DOM API 标准，主要用于提升 JS 代码运行速度

jsdom 是纯 javascript 与 node 的实现的 DOM 与 HTML 标准，主要用于测试与抓包

 抽象并减少了很多样板代码，比如类型转换、参数校验、属性映射等。

 里的 Web 类由以下两个文件实现

 命令生成一个公共 API 文件（例如 

），里面包括了从 Web IDL 衍生出来的样板代码，引用到实现文件里的重要逻辑。然后把所有的功能通过 

原因一： worker-dom 本质上还是使用的是浏览器的 DOM 标准，在 worker 中操作 DOM 并发送消息到宿主，由宿主代为执行，并没有从零开发一个 DOM 标准

原因二：由于 worker 的通信是异步的订阅发布式，导致 DOM 的同步方法操作在 worker 中会变成异步操作，例如 

 的时候，会先请求代码字符串，然后执行 

其中消息格式是被简化过的，具体格式见调试日志

宿主环境接收到消息之后通过统一的 

 命令获取所有的全局变量属性，并写到 

初始化 git submodule，这一步有可能要挂代理，切等待时间较长

由于 wpt 的执行需要 Python3.6 或以上版本，而且 

 一定能在 worker 里面运行，然而在看了 

 相关测试都不能在 iframe 或 worker 内运行

不过至少可以确定打包后的代码在经过 

 转换后可以在 worker 与 iframe 中运行不报错

enum ScrollRestoration { "auto", "manual" };

[Exposed=Window]
interface History {
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  undefined go(optional long delta = 0);
  undefined back();
  undefined forward();
  undefined pushState(any data, DOMString unused, optional USVString? url = null);
  undefined replaceState(any data, DOMString unused, optional USVString? url = null);
};

jsdom 与 worker-dom 学习记录

简介

为什么不选 worker-dom？

原因

使用实例（Hello World）

宿主核心代码

jsdom it is

实现原理

Web IDL 示例详解（History）

快速开始

测试方式

运行 WPT 测试

在 worker 里运行 tests

Reference