Possible memory leaks using web workers (garbage collector)

Question

I have an application that calls a web worker after clicking a button. Computations are transferred to the employee in order to reduce the user interface and make it responsive to user actions during the calculations.

Everything is going well, and after about 0.8-1.5 seconds, the worker sends a response. In work.onmessage, I do all the necessary DOM actions. But after that, the GC appears and practically blocks the user interface for 2 or more seconds, depending on the processor. This really baffles me, because user interface locking is what I want to prevent.

Here's a screenshot of the timeline / memory console tab tab: http://i.imgur.com/zUoHa.jpg

As you can see, GC events occur immediately after all manipulations with the DOM. In fact, there is only one repaint event (using DocumentFragment).

js main code:

var sortWorker = new Worker('js/contactsorter.js'); sortWorker.onmessage = function(e) { var messages = []; e.data.forEach(function(userDoc) { var contactSection = _drawContact(userDoc); messages.push(contactSection); }); meta.append(messages); // this actually appends document fragment as a child }; sortWorker.postMessage(postMessageData); 

contactsorter.js (worker):

 onmessage = function(e) { var uid, output = [], usersStat = {}; // calculations... postMessage(output); close(); }; 

Is there a way to avoid these GC events in this place or not?

UPD: it seems to me that the time of the GC (s) depends on the amount of data that was sent to the employee. UPD2: after shutting down and loading, GC events occur only twice, thereby blocking the user interface in less than a second. Hm?

Answer 1

One thing to keep in mind with web workers, and especially how you used them in your example, is that you clone an object when you send it to an employee. So let's look at this with a stupid example:

• Make a large object (you said 2M in the comment ... wtf ... wow) - 2M is allocated to the main thread
• Publish to the worker, 2M in the main thread, plus everything that was created as fluff in the main thread for JSONify your object / array, then work with the worker, where 2M is in the working yay
• Click on this suction cup at the worker ... here 2M + in the main thread just sits waiting for the GC, it may happen now, it may not ... GC starts after a certain number of thresholds of new generation objects ... as they say after or during creation tons of new dom: D objects and elements
• The employee responds to the message, suggesting that 2M, which is now newly recreated in the main thread for the new 2M (yay), plus any fluff memory objects needed for the JSONify object ... you see where this happens.

Since you said that this is a chrome application (another comment), then perhaps you can rebuild your code to use Transferable Objects to avoid the clone object creating temporary objects, etc. The course is to use portable objects that you will need to restructure as an array buffer, and that is dark magic itself.