0

As the picture shows, i have a html which contain tree script tags and one css link, two of the scripts are loaded by asynchronous methods. From what I have learned, The browser loads in the order in which the script appears in html. But when I open the chrome devtool to analyze the detail. I found that the loading of the second script wa blocked by css resources.

<head>
  <title>css-block-js-parse</title>
  <!-- I have a express server to mock delay of resources, the query param `sleep` is the  
delay time -->
  <link rel="stylesheet" href="./static/style.css?sleep=1500">
  <script src="./static/index1.js?sleep=2400" async></script>
  <script src="./static/index2.js?sleep=1000" async></script>
  <script src="./static/index3.js?sleep=1000"></script>
</head>

<body>
  <p>hello world</p>
</body>

The screenshot below is what i found in the tool. click for my image

I have the following understanding:

  1. why asynchronously script index2.js are slower than non-asynchronous script index3.js, and not in the order they appear in the html?
  2. why the first asynchronously script index1.js unaffected by css loading?

Thanks in advance!

tirelyl
  • 1
  • 1

1 Answers1

0

async blocks the parsing of the page while defer does not.

From flaviocopes.com

^ Can be the case, it can also be because you are running it on localhost, or because the script is big in file size.

  1. Probably because the index1.js is blocking the parsing of html, it runs the script asynchronously. I don't know what could cause the offset though.
  2. File size is my only guess.

If you need more information, I suggest you look at this answer.

MHUnlimited
  • 49
  • 6
  • thanks for your reply，i check the size of my script, the contents of these three scripts are the same, there is only one `console.log` statement – tirelyl Jun 30 '21 at 09:24
  • I've tried it out, with each one being console.log("Works"); and for me it [works perfectly fine](https://imgur.com/a/ZP0khB7). – MHUnlimited Jun 30 '21 at 09:40
  • I do see you have some sleep delay in there. Maybe that's the problem? I can't recreate your express server right now, maybe try without sleep? Try to debug the process of what is happening in the server. – MHUnlimited Jun 30 '21 at 09:45
  • i write a reproduction, but the time line still not as i expected, here is the link of the repo https://github.com/tirelyl/css-block-js-load. Can you see what's wrong with my code that I didn't find – tirelyl Jun 30 '21 at 11:49
  • It is either your sleep function, or you're server. Keep in mind that when hosted, even on local host, it can take the server some time to respond. For what do you need the sleep function? – MHUnlimited Jun 30 '21 at 12:27
  • css loading will blocked script execution that without `async`, so i give a large time to css link, index3.js execute at first. but the time to start request of index2.js was delayed until after index3.js execute finish. when i move the css link after all scripts. The order of request's start time will be index1 -> index2 -> index3 -> css as i expected – tirelyl Jun 30 '21 at 12:56