在前端开发中，使用 Web Worker 可以将一些计算密集型操作放到后台线程中运行，避免阻塞主线程。通常情况下，Web Worker 只能操作一些与 DOM 无关的操作，但是有时候我们需要在 Web Worker 中创建一些 DOM 元素，这该怎么做呢？
问题描述
在 Web Worker 中，由于没有访问 DOM 的权限，我们不能直接使用 document.createElement() 等 DOM 操作函数来创建元素。尝试在 Web Worker 中调用这些函数会抛出错误。
例如，以下代码会在控制台输出错误信息：
-- --------- ----- --- - ------------------------------
解决方案
要解决这个问题，我们需要找到一种可以在 Web Worker 中创建 DOM 元素的方法。有两种常见的解决方案，分别是使用 importScripts() 导入外部脚本和使用 postMessage() 向主线程发送消息。
方案一：导入外部脚本
在 Web Worker 中，我们可以使用 importScripts() 函数来导入外部脚本。如果我们编写一个包含创建 DOM 元素的函数的外部脚本，然后在 Web Worker 中导入该脚本并调用该函数，就可以在 Web Worker 中创建 DOM 元素了。
例如，以下是一个包含创建 div 元素的函数的脚本：
-- ------ -------- ----------- - ------ ------------------------------ -
我们可以在 Web Worker 中使用 importScripts() 导入该脚本，并调用该函数来创建 div 元素：
-- --------- ------------------------ ----- --- - ------------
方案二：向主线程发送消息
另一种常见的解决方案是，在 Web Worker 中通过 postMessage() 函数向主线程发送消息，然后由主线程来创建 DOM 元素并将其传回Web Worker。
例如，以下代码展示了如何在 Web Worker 中向主线程发送消息，要求主线程创建 div 元素：
-- ---------
------------------ ----- ----------- ---
-------------------------------- ------- -- -
-- ---------------- --- ------------- -
----- --- - ---------------
-- ----- --- -----
-
---然后，在主线程中监听 Web Worker 发送的消息，并根据需要创建相应的 DOM 元素并将其传递回 Web Worker：
-- ---- ------
----- ------ - --- --------------------
---------------------------------- ------- -- -
-- ---------------- --- ------------ -
----- --- - ------------------------------
-- ---- --- ---------
-------------------- ----- ------------- --- ---
-
---总结
在 Web Worker 中创建 DOM 元素需要使用一些技巧，例如导入外部脚本或向主线程发送消息。无论哪种方法，都需要仔细考虑适合您的特定情况，并确保在 Web Worker 中不会直接操作 DOM 元素。
示例代码：https://github.com/ChatGPT/example-code/blob/master/create-dom-element-in-web-worker
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27833