Posted at

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

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