インラインscriptのdefer, async属性は無効 #JavaScript

以下のように、インラインのscriptにもdefer属性付ければ、headでdefer属性付けたscriptより後に実行してくれること期待したけど、ダメでした。

functions.js

function awesomeFunction (selector) {
  document.querySelector(selector).innerHTML = 'awesome!!';
}

<html>
  <head>
    <script src="functions.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
    <script defer>
      awesomeFunction('#app');
    </script>
  </body>
</html>

インラインscriptのdefer, async属性は意味無しだそうです😢
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#Attributes

おとなしくdocument.addEventListener('DOMContentLoaded', ...書くしかない

<html>
  <head>
    <script src="functions.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        awesomeFunction('#app');
      });
    </script>
  </body>
</html>