Web Workers处理AJAX调用 - 优化过度杀伤？

Question

我正在使用一个代码来处理使用Web Workers的所有AJAX请求(如果可用).这些工作人员几乎只做XMLHttpRequest对象处理(没有额外的计算).工作人员创建的所有请求都是异步的(request.open("get",url,true)).

最近,我遇到了关于这段代码的几个问题,我开始怀疑是否应该花时间修复这个或者只是转储整个解决方案.

到目前为止,我的研究表明,此代码实际上可能会损害性能.但是,我无法找到支持这一点的任何可信来源.我的两个发现是:

有人能指出我讨论这个问题的可靠来源吗？或者,是否有任何基准可以消除我的疑虑？

[ 编辑 ]当WebWorker也负责解析结果(JSON.parse)时,这个问题会变得更有趣.异步解析是否提高了性能？

Answer 1

我已经在jsperf上为它创建了一个合适的基准.根据浏览器的不同,WebWorker方法比原始ajax调用慢85-95%.

笔记:

由于每个请求的网络响应时间可能不同,我只测试new XMLHttpRequest()和JSON.parse(jsonString);.没有真正的 AJAX调用.
WebWorker设置和拆卸操作未被测量
请注意,我正在测试单个请求,对于多个同时发出的请求,webworker方法的结果可能会更好
Calvin Metcalf向我解释说,比较jsperf上的sync和async不会给出准确的结果,他创建了另一个消除异步开销的基准测试.结果仍然显示WebWorker方法明显变慢.
从Reddit讨论中我了解到,在主页面和WebWorker之间传递的数据被复制,并且必须在此过程中被序列化.因此,使用WebWorker进行解析没有多大意义,无论如何都必须先对数据进行序列化和反序列化,然后才能在主页面上使用它们.

+1 - 优化的第一条规则是不要.第二条规则是,不要.第三条规则是,如果你必须优化,请确保你的基准测试! (2认同)
什么时候花时间很重要。例如，用户可能会点击触发 AJAX 调用的动画切换开关，我发现主线程中的 JS 活动会导致 CSS 转换中的丢帧。在移动设备上，设置 XmlHttpRequest 可能需要大约 1 毫秒；我确信向网络工作者发布消息所花费的时间会更少。我不太关心将数据传回，这会在任意时间发生，而在动画期间很容易不会发生。 (2认同)

Answer 2

首先要记住的是,Web工作者在花费较少时间的意义上很少使事情变得更快,他们在将计算加载到后台线程的意义上使事情变得更快,从而不会阻止与用户交互相关的处理.例如,当您考虑传输数据时,进行大量计算可能需要8秒而不是4秒.但如果在主线程上完成,整个页面将被冻结4秒,这可能是不可接受的.

考虑到这一点,只需ajax调用关闭主线程就不会获得任何东西,因为ajax调用是非阻塞的.但是,如果您必须解析JSON甚至更好,从大型请求中提取一个小子集,那么Web工作者可以帮助您.

我听到但未确认的一个警告是,工作人员使用与主页面不同的缓存,因此如果在主线程和工作程序中加载相同的资源,则可能导致大量重复工作.

缓存是在 HTTP 端完成的......与网络工作者无关。https://www.mnot.net/cache_docs/ 和 https://www.mnot.net/blog/2017/03/16/browser-caching (2认同)

Answer 3

您正在错误的位置优化代码.

AJAX请求已经在一个单独的线程中运行,并在它们满足后返回主事件循环(并调用定义的回调函数).

Web worker是线程的接口,用于计算成本高昂的操作.就像在经典桌面应用程序中一样,当您不想使用需要很长时间的计算来阻止界面时.