Mobile app version of vmapp.org
Login or Join
BetL925

: Loading order of assets stack: how is it managed by browser? I have an issue, which i can't explain me - i seem to miss some basics. Could somebody explain me in plain words the browser

@BetL925

Posted in: #Performance

I have an issue, which i can't explain me - i seem to miss some basics. Could somebody explain me in plain words the browser behavior, which i describe further?

Given is a html document with some javascripts implemented on the bottom, according to performance best practices (but not async and/or defer). All fine, browser reads html file from top to bottom without to be blocked, reads all resources and forms the loading stack (all assets, images, javascripts, fonts, ...).

Then i realize in the timeline of dev. tools: the stack is ordered in that order, as assets are appearing in the html file:


firstly some images from CSS file, which is in the head,
then some images from the middle of the body,
then javascripts on very bottom, like they are implemented in the html file, and as i expect to see them.


But in the network diagram, if i sort it on download start time, i realize, that javascripts are loaded at the very first, before everything.

This is, what i don't understand and where i need an explanation: why the network diagram shows me a loading order, which differs from the implementing and timeline order?

On attached images is the loading order in timeline and waterfall visible:

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @BetL925

1 Comments

Sorted by latest first Latest Oldest Best

 

@Jessie594

This has been answered on stackoverflow.


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. Inline scripts that come after external scripts have are held until
all external scripts that came before them have loaded and run.


Full answer can be found here. stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts/8996894#8996894

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme