有没有办法在Web Worker中创建DOM元素?

编程入门 行业动态 更新时间:2024-10-25 12:20:59
本文介绍了有没有办法在Web Worker中创建DOM元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

上下文: 我有一个处理并显示大量日志文件的Web应用程序。它们通常只有大约10万行,但可以达到400万行或更多。为了能够滚动浏览该日志文件(用户启动和通过JavaScript)并过滤具有良好性能的行,我会在数据到达时(通过ajax在JSON中)为每行创建一个DOM元素。我发现这更好的表现,然后在后端构建HTML。之后,我将这些元素保存在一个数组中,并且只显示可见的行。

对于最大100k行,这只需要几秒钟,但还有更多事情需要处理到500k行一分钟(不包括下载)。我想要进一步提高性能,所以我尝试使用HTML5 Web Workers。现在的问题是,我无法在Web Worker中创建元素,甚至不在DOM之外。所以我最终只在Web Workers中进行了json到HTML的转换,并将结果发送到主线程。在那里创建并存储在一个数组中。不幸的是,这会使表现变差,现在至少还需要30秒。

问题:有什么办法,我不是意识到,要在Web Worker中的DOM树之外创建DOM元素?如果不是,为什么不呢?在我看来,这不会产生并发问题,因为创建元素可以并行发生,而不会产生问题。

好的,我对@Bergi提供的信息做了一些更多的研究,并在W3C邮件列表上发现了以下讨论:

w3-org.9356.n7.nabble/Limited-DOM-in- Web-Workers-td44284.html

以下摘录解释了为什么Web Worker中无法访问XML解析器或DOM解析器: p>

假设没有任何DOM实现代码使用任何非$ DOM $ b的非DOM对象,或者如果它那些对象是完全线程安全吗?情况并非如此,至少在Gecko。

在这种情况下,问题与在多个线程中触及的DOM对象不同。问题是不同线程上的两个DOM对象都触及了一些全局第三个对象。例如,XML解析器必须做一些事情,在Gecko中只能在主线程上完成(DTD加载,非正式的;有一个以前见过的其他人,但不记得以前)。

然而,还有一个解决方法提到,它使用解析器的第三方实现,其中 jsdom 就是一个例子。有了这个,您甚至可以访问自己的单独文档。

Context: I have a web application that processes and shows huge log files. They're usually only about 100k lines long, but it can be up to 4 million lines or more. To be able to scroll through that log file (both user initiated and via JavaScript) and filter the lines with decent performance I create a DOM element for each line as soon as the data arrives (in JSON via ajax). I found this better for performance then constructing the HTML at the back-end. Afterwards I save the elements in an array and I only show the lines that are visible.

For max 100k lines this takes only about a few seconds, but anything more takes up to one minute for 500k lines (not including the download). I wanted to improve the performance even more, so I tried using HTML5 Web Workers. The problem now is that I can't create elements in a Web Worker, not even outside the DOM. So I ended up doing only the json to HTML conversion in the Web Workers and send the result to the main thread. There it is created and stored in an array. Unfortunately this worsened the performance and now it takes at least 30 seconds more.

Question: So is there any way, that I'm not aware of, to create DOM elements, outside the DOM tree, in a Web Worker? If not, why not? It seems to me that this can't create concurrency problems, as creating the elements could happen in parallel without problems.

解决方案

Alright, I did some more research with the information @Bergi provided and found the following discussion on W3C mailing list:

w3-org.9356.n7.nabble/Limited-DOM-in-Web-Workers-td44284.html

And the excerpt that answers why there is no access to the XML parser or DOM parser in the Web Worker:

You're assuming that none of the DOM implementation code uses any sort of non-DOM objects, ever, or that if it does those objects are fully threadsafe. That's just not not the case, at least in Gecko.

The issue in this case is not the same DOM object being touched on multiple threads. The issue is two DOM objects on different threads both touching some global third object.

For example, the XML parser has to do some things that in Gecko can only be done on the main thread (DTD loading, offhand; there are a few others that I've seen before but don't recall offhand).

There is however also a workaround mentioned, which is using a third-party implementation of the parsers, of which jsdom is an example. With this you even have access to your own separate Document.

更多推荐

有没有办法在Web Worker中创建DOM元素?

本文发布于:2023-11-24 10:25:05,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:没有办法   元素   Worker   Web   DOM

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!