Menu
I can write the following:
<script src="file1.js" defer></script>
<script src="file2.js" defer></script>
<script src="file3.js" defer></script>
Which means files can be downloaded in parallel but executed only one after another. However, I can add async attribute to allow browser execute code in a random order.
<script src="file1.js" async></script>
<script src="file2.js" async></script>
<script src="file3.js" async></script>
If I'm interested in the performance boost, can the second block be executed faster? As I see it if a browser executes all JavaScript in one thread, then the total execution time for 3 scripts will be no different from the first block, only the order of execution may be different. Am I right?
561
Browsers aren't single threaded, but your script runs in a single runloop.
Well, Chrome is multiprocess, and I think every process deals with its own Javascript code, but as far as the code knows, it is "single-threaded". There is no support whatsoever in Javascript for multi-threading, at least not explicitly, so it does not make a difference.
JavaScript is a programming language that can run inside nearly all modern web browsers.
If you aren't dynamically loading scripts or marking them as defer or async , then scripts are loaded in the order encountered in the page. It doesn't matter whether it's an external script or an inline script - they are executed in the order they are encountered in the page.
If I'm interested in the performance boost, can the second block be executed faster?
Since the scripts will be downloaded and executed asynchronously, yes, it will reduce the page loading time.
Author of the Script-injected "async scripts" considered harmful compares three methods of including a script: an injected script, a blocking script and a script with async attribute. The result is:
script execution onload
----------------- ------------------ --------
script-injected ~3.7s ~3.7s
blocking script ~2.7s ~2.7s
async attribute ~1.7s ~2.7s
As you see, the async attribute gives the best performance. If scripts execution order doesn't matter, you should definitely use it.
As for your title question:
Do browsers execute loaded scripts in a single thread?
Yes, because JavaScript is single-threaded, but it doesn't matter in terms of performance. Downloading a script takes much longer time than actually executing it, so you should focus on optimizing the download part.
I've made a test. I created a simple script:
for (var i = 0; i < 1e8; i++);
I put the same script into two files, test1.js and test2.js. Then I made two HTML files, the first without async and the second with:
test1.html:
<!DOCTYPE html>
<script src="test1.js"></script>
<script src="test2.js"></script>
test2.html:
<!DOCTYPE html>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
Then I opened these HTML files in my browser and checked Timeline tab in Chrome DevTools:
test1.html:
test2.html:
As you see, in both cases scripts are not executed asynchronously.
See also: Is JavaScript guaranteed to be single-threaded?.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
