: 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:

Vote Up Vote Down

Login to post a comment!