能否使用Web Worker运行网格更新函数？DOM访问与点击事件支持疑问

核心结论 #

• 你当前的代码无法直接放到Web Worker中运行
• Web Worker既不能直接获取点击事件这类DOM交互操作，也不能直接操作Canvas完成绘图

底层原因 #

Web Worker是浏览器提供的独立于主线程的后台运行线程，为了避免多线程并发操作DOM引发的渲染冲突，Worker运行环境完全隔离了所有DOM相关API：document、window、DOM元素实例、DOM事件监听、Canvas绘图上下文这些能力在Worker中都不存在，所以你运行代码会直接抛出document未定义的错误。

可行改造思路 #

如果要利用Worker做性能优化，可以把代码拆分为两部分，仅把纯计算逻辑放到Worker运行：

主线程保留逻辑 #

1. 调用document.getElementById获取Canvas元素，初始化2D绘图上下文
2. 绑定Canvas的mousedown点击事件，完成点击坐标到Canvas内部坐标的转换
3. 监听Worker返回的网格状态数据，调用Canvas的绘图API完成网格渲染

Worker运行逻辑 #

1. 维护网格状态数组、初始化随机网格状态
2. 接收主线程传递的点击坐标，计算更新对应单元格的状态
3. 状态更新完成后，将最新的网格数组通过postMessage传递给主线程

优化建议 #

你当前的逻辑复杂度不高，直接在主线程运行完全不会有性能问题，不需要额外引入Worker增加开发复杂度；只有当网格规模极大、状态计算出现明显的主线程卡顿的时候，再考虑按上述思路拆分逻辑。

内容的提问来源于stack exchange，提问作者Mr.Skalman