CODEWITHSUNDEEP
javascripthtml
spirytus
spirytus

Reputation: 10946

Why Chrome seems requesting Javascript files asynchronously?

Given that my HTML page requests 3 script files:

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<link rel="stylesheet" type="text/css" href="d.css"/>

Until now my understanding was that browser requests a.js and document is not parsed any further until a.js is downloaded and executed (default behaviour without async attribute on script tag).

But now looking at Chrome developer tools, Timeline tab with Loading box checked, I look at and got something along these lines:

Send Request (this is request for HTML page itself)
Receive data
Receive data
Receive data (this are pockets coming if I understand correctly)
Finish Loading (here page is loaded now)
Parse HTML (now browser starts reading actual HTML code)
Send Request (a.js)

Now, in here I would expect the browser to halt everything and wait till a.js will be fully downloaded, then executed and only then start parsing HTML further and reading b.js and the rest) I have however this output further:

Send Request b.js (Why is this happening, a.js is not finished loading yet)
Send Request c.js (again why?)
Send Request d.css

Only then at some point I get:

Finish Loading a.js

Browser executes a.js and only then other files (if already downloaded) are executed in order of SCRIPT tags in html.

Now my question is how browser knows to request b.js, c.js and css file if the a.js wasn't fully downloaded and executed? Is Chrome applying some magick to optimise and speed up process? What if a.js when run modifies and removes the rest of SCRIPT tags? Is the request wasted then? Or am I simply reading output wrong?

Upvotes: 1

Views: 214

Answers (2)

user488187
user488187

Reputation:

If there are multiple things to download, browsers will normally download several of them in parallel. The exact number of parallel downloads can vary by browser.

Note: The CSS should be before the JS to get maximum benefit from parallel downloads.

Upvotes: 1

enhzflep
enhzflep

Reputation: 13109

A: Because each of the JS files are specified in the HTML. The browser tries to batch-up as many downloads as it can to save time. From the moment you right-click on something and select "save link as" it's being downloaded - even though you haven't specified a file name yet. If you then hit cancel instead of specifying a name/location, you have wasted whatever was already downloaded.

Chrome applies a similar policy with regards to resources in a page. If a.js removes any/all subsequent script tags, then yes - their download has been in vain.

The alternative is to have choppy performance.

Upvotes: 1

Related Questions