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>
Edit: Removed invalid code examples
So what really is the difference in performance from using these different loading methods and JavaScript patterns?
For your first question/snippet, its more about control-flow than performance. Performance is just an implicit consequence there.
<script>tags will, traditionally, block the HTML Renderer if they are encountered. That means, if you load a huge javascript file with a blocking<script>tag at the very top of the markup, a user would not see any progress on the page as long as the script is getting loaded and evaluated.In contrary, if we flag the
<script>tag with attributes like async and/or defer, the browser will no longer stop the HTML render process, but load and evaluate the script block asyncronously. How an implementation does this, is not on your concern (whether it uses real threads under the hood or just sequentially process it).Your second snippet is not really asyncronous code. Its just function expressions which invoke themselfs. That is still considered syncronous execution.