以下のように、インラインの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>