0

I just want to verify if I am understanding this correctly. When the browser receives an HTML page it will

  1. begin parsing the HTML into the DOM, and any style tags into the CSSOM.

  2. upon encountering any resource requests, fire of those requests to the server.

  3. halt parsing of the HTML into DOM when encountering an inline or external <script> tag

    • Exception: If an external script tag contains an async keyword, it will be ran after the HTML has been fully parsed and the DOM fully constructed.

  4. any script, inline or external, will only begin executing after the whole HTML page has been checked for any style info, and that style info has been converted into a CSSOM.

Let me know if there are any additions I should add to these rules.
Alternatively, if you have a good resource for understanding the dependencies and how to optimize them, please share.

Alohci
  • 78,296
  • 16
  • 112
  • 156
Battlefrisk
  • 55
  • 1
  • 6
  • I think inline scripts are executed immediately, unless they have ASYNC or DEFER attributes. – Barmar Jun 23 '20 at 20:47
  • 1
    The whole process is almost certainly far more complex than this brief summary. – Barmar Jun 23 '20 at 20:47
  • Barmar I am certain the process is more complicated if we want to discuss the browser in detail, but I really think there should be some straightforward answer as to how dependencies are structured during parsing? – Battlefrisk Jun 23 '20 at 21:01
  • look at the performance tab in chrome, it will tell you exactly what's happening.. nothing halts – Lawrence Cherone Jun 23 '20 at 21:45
  • @Alohci, as far as I know there is a distinction between parsing the HTML into the DOM and checking the HTML for CSS styles to be parsed into the CSSOM. I'm guessing it's something like 'the HTML parser can continue to tokenize the HTML file while pulling script resources, but it does not construct node objects for tokens after the current script tag. However, if those tags are styles, it does pass them to the CSSOM constructor which runs asynch with the DOM constructor. Once all of the CSSOM is constructed, the script tag can execute.' – Battlefrisk Jun 23 '20 at 22:19

1 Answers1

0

Seems like you have everything covered. You can go this below link for more details on Concurrency model and the event loop.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#:~:text=A%20JavaScript%20runtime%20uses%20a,starting%20with%20the%20oldest%20one.

SAURABH
  • 127
  • 7
  • This question is more about blocking within the browser processes than the javascript engine, which is what I think your link covers. – Battlefrisk Jun 23 '20 at 22:23