What are the differences in performance between synchronous and asynchronous JavaScript script loading?
- by jasdeepkhalsa
My question is simply: what are the differences in performance between synchronous and asynchronous JavaScript script loading?
From what I've gathered synchronous code blocks the loading of a page and/or rest of the code from executing. This happens at two levels.
First, at the level of the script actually loading, and secondly, within the JavaScript code itself.
For example, on the page:
Synchronous: <script src="demo_async.js" type="text/javascript"></script>
Asynchronous: <script async src="demo_async.js" type="text/javascript"></script>
And within a script:
Synchronous: function a() {alert("a"); function b() {alert("b");}}
Asynchronous (and self-executing):
(function(a,
function(b){
alert(b);
})
{
alert(a);
}))();
So what really is the difference in performance from using these different loading methods and JavaScript patterns?
