Question

I have a resource consuming DOM (browser) related JavaScript process. When started it blocks the page (other DOM related processed). Is it possible to run this process in parallel asynchronously, and when it finished pass the result to main page? Web workers is not the case, as process works with DOM.

Can this be implemented with iframes? Does JS started in iframe block hosted page DOM too?

Answer 1

Actually it would be a prime example for using WebWorkers, but as you correctly mentioned you won’t have a reference to a DOM there. Your only option is to decouple that process into smaller task’s. If you can do that, you need to ask yourself two questions

• do the smaller tasks need to run sequentially ?
• can these tasks run asynchronously ?

If you can answer both questions with No, you can setup a run-away script timer and execute those tasks asynchronously. Example:

var taskList = [
    function() {},
    function() {},
    function() {},
    function() {}
    // a whole lot more entrys
];  // in a real-world scenario you would `.push()` values or functions

(function _loop() {
    setTimeout(function() {
        var start = Date.now();
        do {
            taskList.shift()();
        } while( taskList.length && Date.now() - start < 100)

        if( taskList.length ) setTimeout( _loop, 100 );
    },100);
}());

The above algorythm would execute the functions contained by taskList as fast as possible, but within a time-frame of 100ms max. This will ensure that the browser respectively the UI thread won’t get blocked for longer than 100ms during the processing. Hence the browser will stay responsive.