Best Practices For Heavy Computations in Javascript?

Question

I am working on client side scripts and need to do heavy computations like pushing huge number of objects in an array, it causes JavaScript to stop response and browser hangs giving an alert:

Browser Warning

Is there any best practices or design patterns for handling these computation, I search and find many different ways to handle these situation but solutions are difficult to implement so I need best practices and easy to understand?

(I am writing code just for example But I need a general solution that is cross-browser i.e, multi-threading etc)

Example Code (series contains thousands of objects):

for (var series = 0; series < chartObj.masterChart.series.length; series++) {
    var detailData = [];
    jQuery.each(chartObj.masterChart.series[series].data, function (i, point) {
        if (point.x >= chartObj.RangeSelectedMinValue && point.x <= chartObj.RangeSelectedMaxValue) {
            detailData.push({
                x: point.x,
                y: point.y
            });
        }
    });
    chartObj.detailChart.series[series].setData(detailData);
}

In my opinion Javascript shouldn't do any heavy computation. Heavy means huge number of data or realy difficult algorithms which take a lot of time. — Tomasz Dzięcielewski
– Tomasz Dzięcielewski, Commented Dec 19, 2012 at 7:44
That's quite an open topic. Posting some code to make it specific would be a better step. — coderLMN
– coderLMN, Commented Dec 19, 2012 at 7:46
Many things are difficult to implement. The solution is not to find easier things but to try harder. — JJJ
– JJJ, Commented Dec 19, 2012 at 7:46
@ZaheerAhmed: We can say things like "Avoid Massive Loops, Avoid Huge arrays / objects, don't use heavy operations in each iteration of a loop, if it can be done outside of it, but all of that is way to generic for the StackOverflow Q&A format. — Cerbrus
– Cerbrus, Commented Dec 19, 2012 at 7:57

Cerbrus · Accepted Answer · 2012-12-19 08:27:11Z

5

Okay, looking at your code, there's a few things you can optimize:

var s = chartObj.masterChart.series, // #1
    sLength = s.length,              // #2
    chartMin = chartObj.RangeSelectedMinValue,
    chartMax = chartObj.RangeSelectedMaxValue;
for (var series = 0; series < sLength; series++) {
    var detailData = [],
        data = s[series].data,       // #3
        length = data.length;        // #2
    for(var i = 0; i < length; i++){ // #4
        var point = data[i];
        if (point.x >= chartMin && point.x <= chartMax) {
            detailData.push({
                x: point.x,
                y: point.y
            });
        }

    }
    chartObj.detailChart.series[series].setData(detailData);
}

You're getting the same "deeper" object inside chartObj multiple times --> Assign it to a temporary variable;
Don't calculate the length for every iteration of the loop. Same principle as #1
Assign s[series].data to a temp var. This provides a direct pointer to the data instead of having to access s[series].data each iteration of the loop. Same principle as #1
jQuery is slow. For a simple loop, use JavaScript instead, especially if you're looping through a massive object.

I'm not saying this edit will work miracles, but it should reduce the load a bit.

edited Dec 19, 2012 at 8:27

answered Dec 19, 2012 at 8:04

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zaheer Ahmed Over a year ago

Thank you nice optimization, implemented!!! :) but still facing problems that is why I ask a general solution? -- Nice +1

Cerbrus Over a year ago

I think those 4 points are pretty much as "general" as I can make it. Although, I found 1 more edit I could make. (chartMin /chartMax)

johnnydev · Accepted Answer · 2016-02-22 19:10:59Z

You should use WebWorkers

They are really supported and they are real threads in javascript as they spawn real OS threads!

Example

`main.js`

var heavy_process = new Worker('heavy_process.js');

heavy_process.addEventListener('message', function(e) {
  // Log the workers message.
  console.log(e.data);
}, false);

heavy_process.postMessage();

heavy_process.js:

for (var series = 0; series < chartObj.masterChart.series.length; series++) {

  var detailData = [];
  jQuery.each(chartObj.masterChart.series[series].data, function (i, point) {
      if (point.x >= chartObj.RangeSelectedMinValue && point.x <= chartObj.RangeSelectedMaxValue) {
        detailData.push({
            x: point.x,
            y: point.y
        });
      }
  });
  chartObj.detailChart.series[series].setData(detailData);
  // you should use self.postMessage here !!!
}

Karl Johan · Accepted Answer · 2012-12-19 08:26:24Z

2

You could split it in to different "threads" by using timeouts. Like so:

var counter;

function longRun(start) {
    counter = 0;

    for (var i = start; i < 3000; i++) {

        counter++;
        console.log(i);
        if (counter > 99) {
            setTimeout(function() {
                longRun(i+1)
            }, 0);
                console.log('counter at: ' + i + ' start fake "thread"');
            return;
        }
    }
    alert('Done!');
}
longRun(0);

jsFiddle example

I guess it would prevent the warning, but I don't know how sane it really is.

answered Dec 19, 2012 at 8:26

Karl Johan

4,0421 gold badge28 silver badges36 bronze badges

3 Comments

Karl Johan Over a year ago

I am fully aware that there are no threads per se in JavaScript, hence the quotation marks. But in this specific case the method of splitting the code into chunks makes the program handle 100 iterations at a time works. I think I made it clear with the quotation marks and the log statement in the code that I am not talking about real threads. It was a word I choose to compare it to another know pattern. I am Sorry if I was confusing anyone

thedayturns Over a year ago

Not only does JavaScript not have threads, it has no concept of parallel execution whatsoever. setTimeout or no, it's impossible to have two functions running at the same time - they will always be run in serial. So this solution won't really do anything but slow down your code.

Karl Johan Over a year ago

At no point in my answer did I say that my solution would execute functions in parallel.The point is to exit the currently running function and start again with a new start value. The main point here was to get rid of the browser warning, which my example did.

Collectives™ on Stack Overflow

Best Practices For Heavy Computations in Javascript?

3 Answers 3

2 Comments

Example

`main.js`

heavy_process.js:

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Example

main.js

heavy_process.js:

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`main.js`