javascript - 使用新窗口而不是网络 worker

Question

自从我第一次尝试网络 worker 以来，我一直在努力寻找它们的真正用例。与它们的通信并不像传递对象或引用那么容易，它们没有窗口对象，因此我无法使用 JQuery，并且构建界面所增加的复杂性不值得在主线程上保存的负载。因此，我剩下的所有选项基本上都是通过大型数组来获得性能优势。

今天我考虑通过 window.open() 打开一个新窗口，并使用新创建的窗口对象执行一些任务并将结果传递回主窗口。我什至应该能够通过访问新窗口中的 window.opener 变量来访问主窗口的 DOM。

我的问题是:

• 这真的会给我带来性能优势吗？
• 除了更复杂的调试之外，这个想法还有什么注意事项吗？
• 我可以使用 window.opener 变量从新窗口访问主窗口的 DOM 并承担从主线程创建新 DOM 元素的负载吗？

Answer 1

Is that really going to give me a performance advantage?

不，只要您可以访问 window.opener 或从一个选项卡到另一个选项卡访问对象，就意味着它们共享同一个 javascript 解释器实例，并且 javascript 解释器是单线程的。

实际上没有(实际的)方法可以解决这个问题。您要么拥有单独的线程，要么共享相同的对象。

Are there any caveats about this idea besides more complicated debugging?

主要警告:它不起作用。另请注意:单独的窗口可能不适合生产。

Can I access the DOM of the main window from the new window using the window.opener variable and take the load of creating new DOM elements from the main thread?

可以，但您应该使用正确的文档实例来调用 document.createElement。

So all the options I'm left with are basically working through large arrays to gain a performance advantage.

这正是工作人员的用途，除非您正在处理大量原始数据，否则它们可能无法解决您的问题。

<小时/>

如果在创建 DOM 节点时性能下降，则很可能是您做错了什么。请记住:

• createDocumentFragment 用于在附加元素组之前创建自包含元素组。
• innerHTML 导致 DOM 重新平衡您更改了 HTML 的树
• new Text 或 document.createTextNode 可用于填充文本，无需 innerHTML
• 如果您的页面是包含许多项目的可滚动表格，则只需渲染屏幕上的项目。

您还应该使用开发人员工具分析您的代码，以了解性能瓶颈在哪里。 WebWorker 用于数据处理(例如，在上传之前调整图像大小)，而不是用于 DOM 操作。

最后一点:现在已经是 2019 年底了，“我不能使用 jQuery”应该不再是问题了。我们现在有了 document.querySelector 和 CSS 动画，这是过去 jQuery 的主要用途。