2

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

1

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. https://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts/8996894#8996894

  • Hmm, interesting thread, thanks. But i just wonder about opposite behavior, as shown on waterfall diagram: javascripts are implemented on the bottom without defer / async, but in waterfall are displayed, as they would be loaded first of all, just after html and js+css from the head... – Evgeniy Nov 17 '16 at 0:08
  • If I am seeing it correctly it looks like you do in fact have a js in the <head> you want to place all your js just before the </body> . CSS will only be downloaded when the selector is rendered, which will be after the scripts are loaded in the <head>. It looks like there is 1 js in the head that is blocking the loading of your CSS. – norcal johnny Nov 17 '16 at 1:07
  • i have one js and one css in the head - they are necessary to be loaded firstly. But all other js i implement before closing </body>, absolutely as you said. It makes me open-mouthed, why js from the html's end are shown in the waterfall at first – Evgeniy Nov 17 '16 at 8:29
  • Are all your JS external? I can not see in your pic. – norcal johnny Nov 17 '16 at 13:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.