Do browsers execute loaded scripts in a single thread?

Question

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?

I think the time will be same for overall execution in both methods but in the `async` one we can show the important data like HTML faster. This is completely my opinion. — Mr_Green, Apr 12 '16 at 07:10

score 6 · Accepted Answer · edited May 23 '17 at 12:31

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?.

thanks, but the questions is specifically about execution time. from what I can see, the execution time is not affected by whether I use `defer` or `async` or not any of them. The loading time is indeed better with `async` — Max Koretskyi, Apr 12 '16 at 07:40
_without async the browser would wait for the first script to execute, and after that it would execute the second script._ - what will it do _with_ `async` if it only has one thread to execute scripts? :) that's the main point of my question. — Max Koretskyi, Apr 12 '16 at 07:48
thanks, so basically this proves that the total execution time doesn't change with the introduction of `async` attribute and is equal to the sum of each script's execution time, correct? — Max Koretskyi, Apr 12 '16 at 08:25

Do browsers execute loaded scripts in a single thread?

1 Answers1