I write a lot of javascript applications and in many different circumstances the
ID: 646859 • Letter: I
Question
I write a lot of javascript applications and in many different circumstances the browser will become unresponsive or give a "slow script" error. Even when following best practices, initializing large data sets, complex animation, or when too many event handlers fire at once, I have to include extra setTimeouts or requestAnimationFrames around script blocks to load balance them. Seems like there should be some standard way of managing the browser load for large javascript applications.
Any ideas? It seems like there must be JS application designers thinking about this, but I can find nothing on the web or on stack.
edit
I appreciate all the response. My question is not "How can I write efficient Javascript?" which seems to be the question the current responses are answering. My question is: How can I balance the load of multiple sequential threads of javascripts running in the same browser?
I am well aware of all the information posted in the responses so far and appreciate the posters, but I am looking for a framework or a design pattern that balances script execution in a browser. This question is common in many other languages and for devops, I am simply asking the same question for javascript.
Explanation / Answer
You have a very short span of time in your hands.
Before talking about threads:
The DOM is slow
Really.
If your website is DOM-heavy, then find ways to offshore these manipulations. Use CSS3 transitions, use canvas for animations, avoid unneccessary paints, etc.
There are also techniques to make it faster, like DocumentFragments, using off-DOM elements, etc.
JavaScript runs in a single thread in the browser
This means your scripts have to be very quick if you want the user to not feel any form of lag.
You can, for example, break intensive calculations into small fragments, for (a simple) example:
function findMax(arr){
var currentMax = -Infinity;
var i=0;
setImmidiate(function() doWork{
if(arr[i] > currentMax){
currentMax = arr[i];
}
i++;
if(i< arr.length){
setImmidiate(doWork);
}
});
return currentMax;
};
Wait, don't go yet! I lied! It's not really single threaded
JavaScript doesn't have to run single threaded in the browser any more! If you support modern browsers, you can use WebWorkers.. This will let you run intensive scripts in background threads and not interrupt the main program flow.
If you support modern browsers, this is probably the correct way to handle CPU intensive calculations.
WebWorkers let you use threads you're used to from other langauges but in a save (actor-system'ish) way. You can split work between workers and balance it just like you would in any other programming language.
Note web workers require IE10, Safari 4+, Opera 10.6 +, Chrome 3+ or Firefox 3.5+
One last thing
JavaScript is designed to perform asynchronous I/O, while this might not be what you're doing more often than not JavaScript performance issues might be the result of synchronous code where asynchronous code is appropriate. Synchronous event handling, blocking code, and more generally anything that isn't CPU intensive should take very little time any way and not require the use of 'the big guns' like web workers.