使用新的 window 而不是网络工作者

Using new window instead of web-workers

自从我第一次试用 webworkers 以来,我一直在努力为他们寻找一个真正的用例。与他们的交流并不像传递对象或引用那么容易,他们没有 window 对象所以我不能使用 JQuery 并且构建接口的复杂性增加是不值得的加载保存在主线程上。所以我剩下的所有选项基本上都是通过大型数组来获得性能优势。

今天我想通过window.open()打开一个新的window并使用新创建的window对象做一些任务并将结果传回主window.我什至应该能够通过访问新 window.

中的 window.opener 变量来访问主要 window 的 DOM

我的问题是:

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?

主要警告:它不起作用。还要注意:单独的 window 可能不是用于生产的 suitable。

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.

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


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

  • createDocumentFragment 用于在附加元素组之前创建独立的元素组。
  • innerHTML 导致 DOM 重新平衡您在其中更改 HTML
  • 的树
  • new Textdocument.createTextNode可以用来填入没有innerHTML
  • 的文字
  • 如果您的页面可滚动 table 许多项目,则只需要呈现屏幕上的项目。

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

最后说明:2019 年底了,“我不能使用 jQuery”应该不再是问题了。我们现在有 document.querySelector 和 CSS 动画,它们是过去 jQuery 的主要用途。