1

I have code on a web-worker and because i can't post to it an object with methods(functions) , i dont know how to stop blocking the UI with this code:

        if (data != 'null') {
            obj['backupData'] = obj.tbl.data().toArray();
            obj['backupAllData'] = data[0];
        }
        obj.tbl.clear();
        obj.tbl.rows.add(obj['backupAllData']);
        var ext = config.extension.substring(1);
        $.fn.dataTable.ext.buttons[ext + 'Html5'].action(e, dt, button, config);
        obj.tbl.clear();
        obj.tbl.rows.add(obj['backupData'])

This code exports records from an html table. Data is an array and is returned from a web worker and sometimes can have 50k or more objects. As obj and all the methods that it contains are not transferable to we-worker, when data length 30k ,40k or 50k or even more, the UI blocks. which is the best way to do this? Thanks in advance.

Leonel Matias Domingos
  • 1,922
  • 5
  • 29
  • 53

2 Answers2

1

you could try wrapping the heavy work in an async function like a timeout to allow the engine to queue the whole logic and elaborate it as soon as it has time

setTimeout(function(){
  if (data != 'null') {
        obj['backupData'] = obj.tbl.data().toArray();
        obj['backupAllData'] = data[0];
    }
  //heavy stuff
}, 0)

or , if the code is extremely long, you can try figure it out a strategy to split your code into chunk of operation and execute each chunk in a separate async function (timeout)

Best way to iterate over an array without blocking the UI

Community
  • 1
  • 1
Karim
  • 8,454
  • 3
  • 25
  • 33
  • `setTimeout` can not save your ass if your function wrapped inside `setTimeout` does long-running operation – hoangfin May 17 '17 at 13:27
  • 1
    `Best way to iterate over an array without blocking the UI` used to be the answer that I love most haha – hoangfin May 17 '17 at 13:41
1

Update:

Sadly, ImmutableJS doesn't work at the moment across webworkers. You should be able to transfer the ArrayBuffer so you don't need to parse it back into an array. Also read this article. If your workload is that heavy, it would be best to actually send back one item at a time from the worker.

Previously:

The code is converting all the data into an array, which is immediately costly. Try returning an immutable data structure from web worker if possible. This will guarantee that it doesn't change when the references change and you can continue iterating over it slowly in batches.

The next thing you can do is to use requestIdleCallback to schedule small batches of items to be processed.

This way you should be able to make the UI breathe a bit.

hazardous
  • 10,627
  • 2
  • 40
  • 52