3

In the following document,

<!doctype html>
<html>
  <head>
    <script language="javascript" src="example.js"></script>
  </head>
  <body>
  </body>
</html>

Where example.js is:

document.addEventListener('DOMContentLoaded', function () {
    console.log('hello');
});

Is the log statement guaranteed to be executed?

Chris Martin
  • 30,334
  • 10
  • 78
  • 137
  • 3
    What are you asking? Your title and your question body are two different questions. – Sebastian Simon Apr 19 '18 at 03:02
  • @Xufox I'm puzzled. Is it not the case that "scripts in the document head always execute before DOMContentLoaded fires" if and only if "the log statement is guaranteed to be executed"? – Chris Martin Apr 19 '18 at 03:04
  • Unless you add the `async` or `defer` attributes, the example.js file will **load** before the body starts rendering... and thus the DOMContentLoaded event... that will log to the console – scunliffe Apr 19 '18 at 03:04
  • There's a comprehensive chart if you scroll down a little from here: https://html.spec.whatwg.org/multipage/scripting.html#script – Robby Cornelissen Apr 19 '18 at 03:06
  • @ChrisMartin Oh, you’re concerned about whether the `DOMContentLoaded` event always occurs after the event listener is defined? I was interpreting _“Is the log statement guaranteed to be executed?”_ as “Is the `DOMContentLoaded` guaranteed to fire _at all_?”. – Sebastian Simon Apr 19 '18 at 03:09

2 Answers2

2

According to MDN,

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Note: Synchronous JavaScript pauses parsing of the DOM.

In your case, the way you are referencing the external Javascript file, it is treated as synchronous, i.e. it will be fetched and loaded before the elements after that will be parsed.

So, answer is, yes, it will always execute - as long as the external JS file is available to the browser.

If you had indicated that browser should attempt to download the script asynchronously (by setting async attribute to true), then the event may or may not trigger the callback you register.

Community
  • 1
  • 1
Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
0

Yes, see MDN: : The Script element

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

The document will not be fully parsed until it gets to the end, and when it encounters a script tag, it will stop parsing and wait for the script to download (if necessary) and run before continuing.

This is pretty bad though - you don't want to delay the page from being parsed and rendered. It would be better to give your script tag a defer (or async) attribute - that way, it will automatically run once parsing is finished without blocking, and without requiring you to wrap your whole script in a DOMContentLoaded listener.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320