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: