title: Event listener on DOMContentLoaded fires randomly
body: <p>I have a script on a page which is working most of the time but not always, and I'd like to know why.</p>
  
  <p>This script is imported via:</p>
  
  <pre><code>&lt;script src="script.js" async&gt;&lt;/script&gt;` tag in `&lt;head&gt;
  </code></pre>
  
  <p>And the content of the script is:</p>
  
  <pre><code>console.log("loading"); // always gets printed
  document.addEventListener("DOMContentLoaded", function() {
      console.log("outer"); // sometimes get not printed
      (function() {
          console.log("inner"); // sometimes get not printed
      })();
  });
  </code></pre>
  
  <p>The browser console always outputs <code>loading</code> but sometimes it doesn't output the rest (both <code>outer</code> and <code>inner</code>). Doing either a hard refresh on the page or simply reloading it (hitting <code>Enter</code> on the address bar) doesn't seem to influence this behavior (same results each way).</p>
  
  <p>I'll also add that <code>outer</code> and <code>inner</code> are always printed by pair, there is never one without the other.</p>
  
  <p>Is there a problem in the way I'm listening to <code>DOMContentLoaded</code>? Or would I have to load the script outside <code>&lt;head&gt;</code> (which I would prefer not to, if possible)?</p>