Non-blocking Javascript

Question

Hello,

I am wondering if it is possible to load javascript in a way in which it does not block the user experience. I am not sure how to achieve the same, but I am looking for a cross-browser solution. I am wondering if someone can guide me in the right direction. Placing the js at the bottom of the page does not work too well.

Thank you for your time.

Answer 1

Javascript runs in a single-thread, so if you have massive Javascript calls, let say with librairies like ExtJS, it's normal that it can be slow. You might however consider the following alternatives:

First and foremost, try to optimize the code as much as you can.

Then, you could use timers in Javascript to simulate asynchronous work. Here is a good example on how to do this : http://ejohn.org/blog/how-javascript-timers-work/

If you want more information, here are some additional tips on how to attempt to reduce Javascript freezing time.

http://debuggable.com/posts/run-intense-js-without-freezing-the-browser:480f4dd6-f864-4f72-ae16-41cccbdd56cb

Good luck !

Answer 2

I believe you can use Workers, but it seems to be implemented in FF3.5, but few other ones.

See http://hacks.mozilla.org/2009/07/working-smarter-not-harder/

Answer 3

When a page is loading it can only download 2 javascript files in parallel at any one time so trying to keeping the number of javascript files down and their size down (with Minification,obsfucation and GZipping) will help with the loading experience.

Using callbacks in your javascript will also help with items being non-blocking when javascript is running.

An example in jQuery would be

$('#id').click(function(){
  $.post('url',data,function(callbackdata){//do something
         });

});

Answer 4

Quoting this answer:

Javascript resource requests are indeed blocking, but there are ways around this (to wit: DOM injected script tags in the head, and AJAX requests) which without seeing the page myself is likely to be what's happening here.

Including multiple copies of the same JS resource is extremely bad but not necessarily fatal, and is typical of larger sites which might have been accreted from the work of separate teams, or just plain old bad coding, planning, or maintenance.

As far as yahoo's recommendation to place scripts at the bottom of the body, this improves percieved response times, and can improve actual loading times to a degree (because all the previous resources are allowed to async first), but it will never be as effective as non-blocking requests (though they come with a high barrier of technical capability).

You can take a look at a YUI blog entry about Non-Blocking Javascript.

Answer 5

Deferring execution of JavaScript can be a really good solution if you have some JavaScript that is not critical to have loaded immediately.

Answer 6

setTimeout with a small delay will allow your control flow to proceed while scheduling another function to execute later. This is especially useful to prevent the UI from blocking or being inadvertently dependent on the successful execution of the other function.

I find it very useful to prevent javascript errors from interfering with bound events. For example, to install a submit handler on a form:

$('#form').submit(function() {
  setTimeout(function() {
    // Submit handler function, i.e. do an ajax submission of the form
    $.ajax(...etc...);
  }, 1);
  // Return false before the handler executes, ensuring the form won't manually submit
  // in the event of a js error in the handler
  return false;
});