javascript - Possible memory leaks using Web Workers (Garbage Collector) - Stack Overflow

admin管理员组

文章数量:1375833

I have an app which calls web worker after the button click. The calculations are moved to worker to relieve UI and make it responsive to user actions while calculations are being made.

Everything goes okay and after about 0.8-1.5s the worker sends a response. In worker.onmessage I perform all the needed DOM actions, but after this Garbage Collector appears and practically blocks the UI for 2 or more seconds depending on CPU. This is really confusing me, because UI blocking is what I want to prevent.

Here's the screenshot of timeline/memory console tab:

As you can see Garbage Collector events happen just after all DOM manipulations. Actually there's only one repaint event (DocumentFragment is used).

Main js 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 any way to avoid these Garbage Collector events in this place or not?

UPD: it seems to me that Garbage Collector event(s) time depends on data amount that was sent to worker.
UPD2: After shutdown and boot Garbage Collector events happen only twice thus blocking UI for less than a second. Hm?

I have an app which calls web worker after the button click. The calculations are moved to worker to relieve UI and make it responsive to user actions while calculations are being made.

Everything goes okay and after about 0.8-1.5s the worker sends a response. In worker.onmessage I perform all the needed DOM actions, but after this Garbage Collector appears and practically blocks the UI for 2 or more seconds depending on CPU. This is really confusing me, because UI blocking is what I want to prevent.

Here's the screenshot of timeline/memory console tab:

As you can see Garbage Collector events happen just after all DOM manipulations. Actually there's only one repaint event (DocumentFragment is used).

Main js 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 any way to avoid these Garbage Collector events in this place or not?

UPD: it seems to me that Garbage Collector event(s) time depends on data amount that was sent to worker.
UPD2: After shutdown and boot Garbage Collector events happen only twice thus blocking UI for less than a second. Hm?

• javascript
• html
• garbage-collection
• dom-events
• web-worker

Share Improve this question Follow edited Nov 21, 2021 at 15:43 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 14, 2011 at 19:40 Dmitrii SorinDmitrii Sorin 4,02644 gold badges3333 silver badges4040 bronze badges 6

• How big are the objects? How many? What sort of numbers are we talking? What DOM nodes are you creating? Do the GC event scale linearly with the number of contacts that are sorted? – Paul Grime Commented Sep 14, 2011 at 21:02
• JSON.stringify says it's about 2M.These are objects which have objects as their children. After worker response (it outputs an array) i create DocumentFragment and append approx. 400 "div" elements to it. Afterwards i append fragment to DOM. Regarding the last question - i need to rewrite my code to make the test, so i'll ment this a bit later. Btw: new UPD – Dmitrii Sorin Commented Sep 15, 2011 at 4:37
• Regarding the last question: no, GC event doesn't scale according to data amount. Moreover, i can't even find it on the timeline i.imgur./psGpr.png though for this period of time the UI is being clocked. – Dmitrii Sorin Commented Sep 15, 2011 at 13:10
• Strange. What are the effects on other browsers supporting web workers? Is it worth deleting your browser install and trying again? For the record I've tried a couple of heavy workers and DOM manipulations myself and not recreated your graphs - though I do get pauses and GCs. – Paul Grime Commented Sep 15, 2011 at 13:30
• You might benefit by using about:memory in firefox... It not only lets you see exactly how memory is allocated, but also allows you to trigger GC. (Click the GC button at the bottom of the page.) More recent (beta/nightly) versions of Firefox will have better analysis, though it might not matter at all for your purposes. – starwed Commented Sep 26, 2011 at 17:19

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

One thing to remember with Web Workers, and especially as you have them used in your example, is that you are cloning the object when you send it over to the worker. So lets run through this with a silly example:

1. Make big object (you said 2M in a ment... wtf... wow) - 2M allocated in main thread
2. Post to worker, 2M in main thread still, plus whatever extra was created as fluff in the main thread to JSONify your object/array, then off to worker where 2M in worker yay
3. Chug on that sucker in worker... here the 2M+ in the main thread is just sitting around waiting to GC, might happen now, might not... the GC triggers after a certain amount of new generation objects hit threshold... like say after or during the creation of a ton of new objects and dom elements :D
4. Worker responds back with a message, lets assume 2M which is now made anew in the main thread for a new 2M (yay), plus whatever fluff memory objects required to de JSONify the object... you see where this is going.

Since you said that this was a chrome app (another ment), then maybe you can restructure your code to make use of Transferable Objects to avoid the object Cloning creation of temporary objects etc. Course, to use transferable objects you'd have to restructure as an array buffer and that's a dark magic all of itself.

本文标签： javascriptPossible memory leaks using Web Workers (Garbage Collector)Stack Overflow